Flutter – Implement IndexedStack Widget

The IndexedStack widget in Flutter is used to display a single child from a list of children at a given index. It’s commonly used when you want to show one child widget while hiding the others, such as in a tabbed interface. In this article, we are going to implement the IndexedStack widget and explore some properties of it. A sample video is given below to get an idea about what we are going to do in this article.

Basic Syntax of IndexedStack Widget

Dart

IndexedStack(
  index: /* Index of the child to display */,
  children: <Widget>[
    /* List of child widgets to stack on top of each other */
    ChildWidget1(),
    ChildWidget2(),
    // Add more child widgets as needed
  ],
)

Required Tools

To build this app, you need the following items installed on your machine:

• Visual Studio Code / Android Studio
• Android Emulator / iOS Simulator / Physical Device device.
• Flutter Installed
• Flutter plugin for VS Code / Android Studio.

Step By Step Implementations

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package

First of all import material.dart file.

import 'package:flutter/material.dart';

Step 3: Execute the main Method

Here the execution of our app starts.

Dart

void main() {
  runApp(MyApp());
}

Step 4: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        // Set the app's primary theme color
        primarySwatch: Colors.green,
      ),
      debugShowCheckedModeBanner: false,
      title: 'IndexedStack Example',
      home: IndexedStackExample(),
    );
  }
}

Step 5: Create IndexedStackExample Class

In this class we are going to Implement the IndexedStack widget that help to display a single child from a list of children at a given position. Comments are added for better understanding.

IndexedStack(
            index: _currentIndex, // Index of the child to display
            children: [
              // Child 1
              Container(
                width: 200,
                height: 200,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    'Child 1',
                    style: TextStyle(
                      fontSize: 24,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
              // Child 2
              Container(
                width: 200,
                height: 200,
                color: Colors.green,
                child: Center(
                  child: Text(
                    'Child 2',
                    style: TextStyle(
                      fontSize: 24,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ],
          ),

Dart

class IndexedStackExample extends StatefulWidget {
  @override
  _IndexedStackExampleState createState() => _IndexedStackExampleState();
}

class _IndexedStackExampleState extends State<IndexedStackExample> {
  // Index to control which child to display
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('IndexedStack Example'),
      ),
      body: Column(
        children: [
          // Buttons to switch between children
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    // Show the first child
                    _currentIndex = 0;
                  });
                },
                child: Text('Child 1'),
              ),
              SizedBox(width: 20),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    // Show the second child
                    _currentIndex = 1;
                  });
                },
                child: Text('Child 2'),
              ),
            ],
          ),
          SizedBox(height: 20),
          // IndexedStack to display children
          IndexedStack(
            // Index of the child to display
            index: _currentIndex,
            children: [
              // Child 1
              Container(
                width: 200,
                height: 200,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    'Child 1',
                    style: TextStyle(
                      fontSize: 24,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
              // Child 2
              Container(
                width: 200,
                height: 200,
                color: Colors.green,
                child: Center(
                  child: Text(
                    'Child 2',
                    style: TextStyle(
                      fontSize: 24,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Here is the full Code of main.dart file:

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      title: 'IndexedStack Example',
      home: IndexedStackExample(),
    );
  }
}

class IndexedStackExample extends StatefulWidget {
  @override
  _IndexedStackExampleState createState() => _IndexedStackExampleState();
}

class _IndexedStackExampleState extends State<IndexedStackExample> {
  int _currentIndex = 0; // Index to control which child to display

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('IndexedStack Example'),
      ),
      body: Column(
        children: [
          // Buttons to switch between children
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _currentIndex = 0; // Show the first child
                  });
                },
                child: Text('Child 1'),
              ),
              SizedBox(width: 20),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _currentIndex = 1; // Show the second child
                  });
                },
                child: Text('Child 2'),
              ),
            ],
          ),
          SizedBox(height: 20),
          // IndexedStack to display children
          IndexedStack(
            index: _currentIndex, // Index of the child to display
            children: [
              // Child 1
              Container(
                width: 200,
                height: 200,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    'Child 1',
                    style: TextStyle(
                      fontSize: 24,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
              // Child 2
              Container(
                width: 200,
                height: 200,
                color: Colors.green,
                child: Center(
                  child: Text(
                    'Child 2',
                    style: TextStyle(
                      fontSize: 24,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Output: