Explore IndexedStack Widget In Flutter
Widgets are settled with one another to construct the application. It implies your application’s base is itself a widget, and right down is a widget moreover. For instance, a widget can show something, characterize configuration, deal with communication, etc. At whatever point you will code for building anything in Flutter, it will be inside a widget.
The focal reason for existing is to construct the application out of widgets. It portrays how your application view should look like with their present setup and state. When you modified the code, the widget rebuilt its depiction by computing the contrast between the past and current widget to decide the negligible changes for rendering in the UI of the application.
In Flutter, nearly everything is a widget — even layout models are widgets. The pictures, symbols, and text you find in a Flutter application are on the widgets. In any case, things you don’t see are additionally widgets, like the rows, columns, and grids that arrange, oblige and align the obvious widgets.
In this article, we will Explore IndexedStack Widget In Flutter. We will implement an indexedstack widget demo program and create a custom navigation bar in your flutter applications.
IndexedStack class – widgets library – Dart API
API docs for the IndexedStack class from the widgets library, for the Dart programming language.api.flutter.dev
Table Of Contents::
IndexedStack Widget:
An IndexedStack is a stack where only one component is shown at one time by its index. A Stack that shows a solitary child from a list of children. The showed child is the one with the given index. The stack is consistently just about as large as the biggest child. On the off chance that the value is null, nothing is shown.
For more info on IndexedStack Widget ,Watch this video By Flutter :
Below demo video shows how to create a custom navigation bar in a flutter. It shows how the custom navigation bar will work using the IndexedStack widget in your flutter applications. It shows three buttons on the bottom screen. When the user taps on these buttons, it will show the data. It will be shown on your device.
Demo Module :
Properties:
There are some properties of IndexedStack Widget:
- > index: These properties are used to the index of the child to show.
- > children: These properties are used to the List<Widget>. The widgets below this widget in the tree.
- > alignment: These properties are used to align the non-positioned and partially-positioned children in the stack.
- > sizing: These properties are used to size the non-positioned children in the stack.
- > textDirection: These properties are used to the text direction with which to resolve alignment.
Implementation:
Step 1: Add the assets
Add assets to pubspec — yaml file.
assets:
- assets/
Step 2: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called custom_navigaton_bar_demo.dart inside the lib folder.
We will create an integer index that is zero.
int index = 0;
In the body, we will add a column widget. In the Column widget, we will create two widgets are_stackedContainers() and _navigationButtons(). We will deeply define the below code.
Column(
children: <Widget>[
_stackedContainers(),
_navigationButtons()
],
),
We will deeply define _stackedContainers() widget:
In this widget, we will return an Expanded widget. Inside, we will add IndexedStack() widget. In this widget, we will add an index that means the index of the child to show. Add the children widget, inside add three containers. In these containers, we will add three images with the wrap of the center widget.
Widget _stackedContainers() {
return Expanded(
child: IndexedStack(
index: index,
children: <Widget>[
Container(
child: Center(
child: Image.asset("assets/images/flutter.png",)
)
),
Container(
child: Center(
child: Image.asset("assets/images/powered_by.png",)
)
),
Container(
child: Center(
child: Image.asset("assets/images/devs.jpg",)
)
),
],
),
);
}
We will deeply define _navigationButtons() widget:
In this widget, we will return a row widget. Inside, we will add three FlatButton(). For all three buttons, we will add text, color, and onPressed method. In this method, we will add setState() and add the different index.
Widget _navigationButtons() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
FlatButton(
color:Colors.pink[300],
child: Text('Flutter', style: TextStyle(fontSize: 16.0,color: Colors.white),),
onPressed: () {
setState(() {
index = 0;
});
},
),
FlatButton(
color:Colors.pink[300],
child: Text('Aeologic', style: TextStyle(fontSize: 16.0,color: Colors.white),),
onPressed: () {
setState(() {
index = 1;
});
},
),
FlatButton(
color:Colors.pink[300],
child: Text('Flutter Devs', style: TextStyle(fontSize: 16.0,color: Colors.white),),
onPressed: () {
setState(() {
index = 2;
});
},
),
],
);
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
class CustomNavigationBarDemo extends StatefulWidget {
@override
_CustomNavigationBarDemoState createState() => _CustomNavigationBarDemoState();
}
class _CustomNavigationBarDemoState extends State<CustomNavigationBarDemo> {
int index = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.pink[300],
title: Text('Flutter Indexed Stack Demo'),
),
body: Padding(
child: Column(
children: <Widget>[
_stackedContainers(),
_navigationButtons()
],
),
padding: EdgeInsets.all(5.0),
),
);
}
Widget _stackedContainers() {
return Expanded(
child: IndexedStack(
index: index,
children: <Widget>[
Container(
child: Center(
child: Image.asset("assets/images/flutter.png",)
)
),
Container(
child: Center(
child: Image.asset("assets/images/powered_by.png",)
)
),
Container(
child: Center(
child: Image.asset("assets/images/devs.jpg",)
)
),
],
),
);
}
Widget _navigationButtons() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
FlatButton(
color:Colors.pink[300],
child: Text('Flutter', style: TextStyle(fontSize: 16.0,color: Colors.white),),
onPressed: () {
setState(() {
index = 0;
});
},
),
FlatButton(
color:Colors.pink[300],
child: Text('Aeologic', style: TextStyle(fontSize: 16.0,color: Colors.white),),
onPressed: () {
setState(() {
index = 1;
});
},
),
FlatButton(
color:Colors.pink[300],
child: Text('Flutter Devs', style: TextStyle(fontSize: 16.0,color: Colors.white),),
onPressed: () {
setState(() {
index = 2;
});
},
),
],
);
}
}
Conclusion:
In the article, I have explained the IndexedStack Widget basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to IndexedStack Widget On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the IndexedStack Widget in your flutter projects. We will show you what the IndexedStack Widget is?. Some indexedstack widget properties, make a demo program for working IndexedStack Widget, and create a custom navigation bar. It shows three buttons on the bottom screen. The user taps on these buttons will show the data using the IndexedStack widget in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Indexed Stack Demo:
flutter-devs/flutter_indexed_stack_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
