IndexedStack In Flutter
Flutter offers a lot of built-in widgets that can assist us with making dazzling applications without composing an excess of code or installing such a large number of third-party libraries only for building UIs.
In Flutter, almost everything is a widget — even format models are widgets. The photos, symbols, and text you find in a Flutter application are on the widgets. Anyway, things you don’t see are extra widgets, similar to the rows, columns, and grids that arrange, oblige and align the conspicuous widgets.
In this article, we will explore the IndexedStack In Flutter. We will implement an indexedstack demo program and how to use it in your flutter applications.
Table Of Contents::
What is IndexedStack?
An IndexedStack is a stack where just one component is displayed at one time by its index. It accepts children as ordinary Stack. Yet, it just shows one child at one time. IndexedStack is a subclass of Stack. You can determine which child widget to be shown through the index property. Assuming the index is null, child widgets will be shown.
To use IndexedStack, we can simply wrap the list of widgets inside the IndexedStack widget. Then, add an index parameter with a variable that can be changed with some action.
To utilize IndexedStack, we can just wrap the list of widgets inside the IndexedStack widget. Then, at that point, add an index parameter with a variable that can be changed with some activity.
Demo Module::
The above demo video shows how to use indexedstack in a flutter. It shows how the indexedstack will work using the IndexedStack in your flutter applications. It shows when the user clicks the button then, the images will be changed because it shows only one component at one time by index. It will be shown on your device.
Constructor:
To utilize IndexedStack, you need to call the constructor underneath:
IndexedStack({
Key? key,
AlignmentGeometry alignment = AlignmentDirectional.topStart,
TextDirection? textDirection,
StackFit sizing = StackFit.loose,
this.index = 0,
List<Widget> children = const <Widget>[],
})
Properties:
There are some properties of IndexedStack are:
- > index: This property is used to assign the index to the child. Defaults to 0.
- > List<Widget> children: This property is used to below list the widgets in the tree. Defaults to
const <Widget>[]. - > StackFit sizing: This property is used to size the non-positioned children in the stack. Defaults to
StackFit.loose. - > AlignmentGeometry alignment: This property is used to align the non-positioned and partially-positioned children.
- > TextDirection? textDirection: This property is used to text direction to resolve the alignment.
- > Key? key: This property is used to control how a widget is replaced with another widget.
Implementation:
Create a new dart file called main.dart inside the lib folder.
In the main. dart file, we will create a new class IndexedStackDemo. In this class, we will create an integer value equal to zero.
int value = 0;
In the body, we will add the IndexedStack method. In this method, we will add an index equal to a value. In children, we will add four different texts and four different images.
IndexedStack(
index: value,
children: [
Column(
children: const [
Text(
"Image 1",
style: TextStyle(
color: Colors.red,
fontSize: 22.0,
fontWeight: FontWeight.bold),
),
SizedBox(
width: 300,
height: 300,
child: Center(
child: Image(
image: AssetImage("assets/logo.png"),
),
),
)
],
),
Column(
children: const [
Text(
"Image 2",
style: TextStyle(
color: Colors.red,
fontSize: 22.0,
fontWeight: FontWeight.bold),
),
SizedBox(
width: 300,
height: 300,
child: Center(
child: Image(
image: AssetImage("assets/powered_by.png"),
),
),
)
],
),
Column(
children: const [
Text(
"Image 3",
style: TextStyle(
color: Colors.red,
fontSize: 22.0,
fontWeight: FontWeight.bold),
),
SizedBox(
width: 300,
height: 300,
child: Center(
child: Image(
image: AssetImage("assets/flutter.png"),
),
),
)
],
),
Column(
children: const [
Text(
"Image 4",
style: TextStyle(
color: Colors.red,
fontSize: 22.0,
fontWeight: FontWeight.bold),
),
SizedBox(
width: 300,
height: 300,
child: Center(
child: Image(
image: AssetImage("assets/demo.png"),
),
),
)
],
)
],
),
Now, we will add the SizedBox widget with height and width. Its child, we will add ElevatedButton. In this button, we will add style and the onPressed method. Inside the method, we will add setState() function. In this function, we will add if (value < 3) then, value++. Else, the value is equal to zero. Its child, we will add the text ”CLICK”.
SizedBox(
height: 65,
width: 130,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.cyan,
),
onPressed: () {
setState(() {
if (value < 3) {
value++;
} else {
value = 0;
}
});
},
child: const Text(
"CLICK",
style: TextStyle(
color: Colors.white,
fontSize: 21.0,
fontWeight: FontWeight.bold),
),
),
),
)
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';
import 'package:flutter_indexedstack_demo/splash_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const Splash(),
);
}
}
class IndexedStackDemo extends StatefulWidget {
const IndexedStackDemo({Key? key}) : super(key: key);
@override
_IndexedStackDemoState createState() => _IndexedStackDemoState();
}
class _IndexedStackDemoState extends State<IndexedStackDemo> {
int value = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey[100],
appBar: AppBar(
backgroundColor: Colors.cyan,
automaticallyImplyLeading: false,
title: const Text("Flutter Indexed Stack Demo"),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IndexedStack(
index: value,
children: [
Column(
children: const [
Text(
"Image 1",
style: TextStyle(
color: Colors.red,
fontSize: 22.0,
fontWeight: FontWeight.bold),
),
SizedBox(
width: 300,
height: 300,
child: Center(
child: Image(
image: AssetImage("assets/logo.png"),
),
),
)
],
),
Column(
children: const [
Text(
"Image 2",
style: TextStyle(
color: Colors.red,
fontSize: 22.0,
fontWeight: FontWeight.bold),
),
SizedBox(
width: 300,
height: 300,
child: Center(
child: Image(
image: AssetImage("assets/powered_by.png"),
),
),
)
],
),
Column(
children: const [
Text(
"Image 3",
style: TextStyle(
color: Colors.red,
fontSize: 22.0,
fontWeight: FontWeight.bold),
),
SizedBox(
width: 300,
height: 300,
child: Center(
child: Image(
image: AssetImage("assets/flutter.png"),
),
),
)
],
),
Column(
children: const [
Text(
"Image 4",
style: TextStyle(
color: Colors.red,
fontSize: 22.0,
fontWeight: FontWeight.bold),
),
SizedBox(
width: 300,
height: 300,
child: Center(
child: Image(
image: AssetImage("assets/demo.png"),
),
),
)
],
)
],
),
SizedBox(
height: 65,
width: 130,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.cyan,
),
onPressed: () {
setState(() {
if (value < 3) {
value++;
} else {
value = 0;
}
});
},
child: const Text(
"CLICK",
style: TextStyle(
color: Colors.white,
fontSize: 21.0,
fontWeight: FontWeight.bold),
),
),
),
)
],
),
),
);
}
}
Conclusion:
In the article, I have explained the IndexedStack basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to IndexedStack On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the IndexedStack in your flutter projects. We will show you what IndexedStack is?. Make a demo program for working IndexedStack using the IndexedStack 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.
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.
