animate 3Sections [upwork]

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: HomePage(),
    ),
  );
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int selectedIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          const fixedHeight = 100.0;
          final expandHeight = constraints.maxHeight - fixedHeight;

          return Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              AnimatedContainer(
                duration: Durations.medium1,
                height: selectedIndex == 0 ? expandHeight : fixedHeight,
                color: Colors.deepPurple,
                child: Center(
                  child: ElevatedButton(
                    onPressed: () {
                      if (selectedIndex == 0) {
                        selectedIndex = 1;
                      } else {
                        selectedIndex = 0;
                      }

                      setState(() {});
                    },
                    child: Text(selectedIndex == 0 ? "Close" : "Expand"),
                  ),
                ),
              ),
              AnimatedContainer(
                height: selectedIndex == 1 ? expandHeight - fixedHeight : 0,
                duration: Durations.medium1,
                color: Colors.red,
              ),
              GestureDetector(
                onTap: () {
                  if (selectedIndex == 2) {
                    selectedIndex = 1;
                  } else {
                    selectedIndex = 2;
                  }

                  setState(() {});
                },
                child: AnimatedContainer(
                  duration: Durations.medium1,
                  height: selectedIndex == 2 ? expandHeight : fixedHeight,
                  color: Colors.blue,
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}