day046_indexed_stack.dart

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class Day46IndexedStack extends StatefulWidget {
  Day46IndexedStack({Key key}) : super(key: key);

  @override
  _Day46IndexedStackState createState() => _Day46IndexedStackState();
}

class _Day46IndexedStackState extends State<Day46IndexedStack> {
  List colorsList = [
    Colors.red[800],
    Colors.green[800],
    Colors.yellow[800],
    Colors.blue[800],
    Colors.deepOrange[800],
    Colors.deepPurple[800],
  ];

  var _index = 0;

  inc() {
    // ! increment function....
    setState(() {
      if (_index < colorsList.length - 1) {
        _index++;
      }
    });
  }

  dec() {
    // ! decrement function....
    setState(() {
      if (_index > 0) {
        _index--;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("IndexedStack"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.help),
            onPressed: () async {
              const url =
                  'https://github.com/sanjaysanju618/100-Days-Of-Flutter-Widgets/' +
                      'blob/master/hundred_days_of_flutter_widget/' +
                      'lib/day046_indexed_stack.dart';
              if (await canLaunch(url)) {
                await launch(url);
              } else {
                throw 'Could not launch $url';
              }
            },
          )
        ],
      ),
      body: SafeArea(
          child: Center(
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            /**
             * ? What is IndexedStack....
             * ! IndexedStack is the great widget for swap between multiple widgets....
             * ! it have all the property as Stack have in addtion [index]....
             */
            IndexedStack(
              index:
                  _index, // ! [index] is the property which decides the viewing element...
              sizing:
                  StackFit.expand, // ! [sizing] is same as [fit] of Stack....
              alignment: Alignment.center, // ! we can align the stack....
              children: <Widget>[
                for (Color color in colorsList)
                  Container(
                    width: 250,
                    height: 250,
                    color:
                        color, // ! here we pass the colors from list to the conainer....
                    child: Center(
                        child: Text(
                      _index
                          .toString(), // ! here we print the current index value....
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.white, fontSize: 20),
                    )),
                  ),
              ],
            ),
            Positioned(
              bottom: 1,
              left: 1,
              child: IconButton(
                  icon: Icon(Icons.keyboard_arrow_left),
                  color: Colors.white,
                  onPressed: () {
                    dec(); // ! here we decrement the [_index]....
                  }),
            ),
            Positioned(
              bottom: 1,
              right: 1,
              child: IconButton(
                  icon: Icon(Icons.keyboard_arrow_right),
                  color: Colors.white,
                  onPressed: () {
                    inc(); // ! here we increment the [_index]....
                  }),
            )
          ],
        ),
      )),
    );
  }
}