AnimatedContainer with Column child-CodePudding

I would like to animate the child height of an AnimatedContainer where the child is a Column widget. While I can animate the Column, the Column's children are animated individually rather than a single Widget causing the Column's children to overlap:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(title: 'Animated Container Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool expanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: [
          AnimatedContainer(
            clipBehavior: Clip.hardEdge,
            duration: const Duration(milliseconds: 1000),
            curve: Curves.easeInOut,
            color: Colors.black12,
            height: expanded ? 100 : 0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Column(
                  children: const [
                    Expanded(
                      child: Text(
                        'Top',
                        style: TextStyle(
                          color: Colors.blue,
                          fontSize: 32,
                        ),
                      ),
                    ),
                    Expanded(
                      child: Text(
                        'Bottom',
                        style: TextStyle(
                          color: Colors.blue,
                          fontSize: 32,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Center(
            child: ElevatedButton(
              child: const Text(
                'Toggle Animate',
              ),
              onPressed: () {
                setState(() {
                  expanded = !expanded;
                });
              },
            ),
          ),
        ],
      ),
    );
  }
}

CodePudding user response：

Remove expanded from both the children of Column.

CodePudding user response：

We can use AnimatedSize widget in this case. And to align widget inside Stack we need positioned widget like Positioned,Align...

Align(
  alignment: Alignment.topCenter,
  child: AnimatedSize(
    clipBehavior: Clip.hardEdge,
    duration: const Duration(milliseconds: 1000),
    curve: Curves.easeInOut,
    alignment: Alignment.topCenter,
    child: !expanded
        ? const SizedBox()
        : Container(
            height: 100,
            color: Colors.black12,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Column(
                  children: const [
                    Text(
                      'Top',
                      style: TextStyle(
                        color: Colors.blue,
                        fontSize: 32,
                      ),
                    ),
                    Text(
                      'Bottom',
                      style: TextStyle(
                        color: Colors.blue,
                        fontSize: 32,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
  ),
),