Flutter Stepper

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(body: Center(child: AnimatedRow())),
    );
  }
}

class AnimatedRow extends StatefulWidget {
  final int itemCount;

  const AnimatedRow({Key? key, this.itemCount = 2}) : super(key: key);

  @override
  State<AnimatedRow> createState() => _AnimatedRowState();
}

class _AnimatedRowState extends State<AnimatedRow> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    // Returning the row
    return LayoutBuilder(
      builder: (context, constraints) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            for (int i = 0; i < widget.itemCount; i++)
              GestureDetector(
                onTap: () {
                  setState(() {
                    currentIndex = i;
                  });
                },
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.easeInOut,
                  margin: const EdgeInsets.symmetric(horizontal: 6.0),
                  height: 20,
                  width: currentIndex != i
                      ? 30.0
                      : 375.0 - (42 * widget.itemCount),
                  decoration: BoxDecoration(
                    color: i == currentIndex
                        ? Colors.blueAccent
                        : Colors.grey.shade400,
                    borderRadius: BorderRadius.circular(16),
                  ),
                  alignment: Alignment.center,
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        "$i. ",
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: i == currentIndex
                              ? FontWeight.bold
                              : FontWeight.normal,
                        ),
                      ),

                      AnimatedSize(
                        duration: const Duration(milliseconds: 300),
                        curve: Curves.easeInOut,
                        child: currentIndex == i
                            ? Text(
                                "Example Text",
                                style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: i == currentIndex
                                      ? FontWeight.bold
                                      : FontWeight.normal,
                                ),
                              )
                            : SizedBox.shrink(),
                      ),
                    ],
                  ),
                ),
              ),
          ],
        );
      },
    );
  }
}