How To Make Indexed Stack Widget Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 12-10-2020

Indexed Stack is a multilevel widget that can hold multiple child widgets inside it. Indexed Stack widget supports a custom property named as index which support integer numeric value. Indexed Stack can display only given index number widget from multiple widgets. The index position starts from 0 Zero. If we increase index number then it will load next widget according to given index. If user dose not give the index position then it will display no widget.

How To Make Indexed Stack Widget Using Flutter Android App

Indexed Stack Widget 
Complete Code For Indexed Stack Widget In Flutter
main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: Stack()
        )
    );
  }
}

class Stack extends StatefulWidget {
  StackState createState() => StackState();
}
class StackState extends State<Stack>{
  int indexPosition = 0 ;
  loadNextWidget(){
    if(indexPosition < 2){
      setState(() {
        indexPosition ++ ;
      });
    }
    else{
      setState(() {
        indexPosition = 0 ;
      });
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.pink,
            title: Text('IndexedStack Widget')),
        body: Center(child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            IndexedStack(
              index: indexPosition,
              children: <Widget>[
                Container(
                    width: 300,
                    height: 300,
                    color: Colors.orange,
                    child: Center(
                        child: Text('Widget - 1',
                          style: TextStyle(fontSize: 25,
                              color: Colors.white),))
                ),
                Container(
                    width: 300,
                    height: 300,
                    color: Colors.green,
                    child: Center(
                        child: Text('Widget - 2',
                          style: TextStyle(fontSize: 25,
                              color: Colors.white),))
                ),
                Container(
                    width: 300,
                    height: 300,
                    color: Colors.red,
                    child: Center(
                        child: Text('Widget - 3',
                          style: TextStyle(fontSize: 25,
                              color: Colors.white),))
                ),

              ],
            ),
            Container(
                margin: const EdgeInsets.fromLTRB(20, 100, 20, 20),
                child:
                RaisedButton(
                  onPressed: () => loadNextWidget(),
                  child: Text(' Show Next Widget ', style: TextStyle(fontSize: 20),),
                  textColor: Colors.white,
                  color: Colors.pink,
                  padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
                )
            )
          ],))
    );
  }
}

Related Post