How can i set the AnimatedContainer height to match it's child height content

Viewed 41

we all know that AnimatedContainer widget working with two difference value size when it changed from size to other one

i have the following simple full code ,

import 'package:flutter/material.dart';

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late bool boolValue =  false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 500),
          color: Colors.blue,
          height: !boolValue? 200:0,
          child: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: const [
                Text('Hello world , Hello Dart',style: TextStyle(color: Colors.white,fontSize: 15),),
                Text('Hello world , Hello Dart',style: TextStyle(color: Colors.white,fontSize: 15),),
                Text('Hello world , Hello Dart',style: TextStyle(color: Colors.white,fontSize: 15),),
                Text('Hello world , Hello Dart',style: TextStyle(color: Colors.white,fontSize: 15),),
                Text('Hello world , Hello Dart',style: TextStyle(color: Colors.white,fontSize: 15),),
              ],
            ),
          ),
       )
      ),
        floatingActionButton:  FloatingActionButton(
            backgroundColor:  const Color(0xFFE57373),
            onPressed: (){
              setState(() {boolValue = !boolValue;});
            },
            child:  const Icon(Icons.check)
        )
    );
  }
}

ok now when i change my boolValue it animate from 200 as a height to 0 and vice versa but the problem is that i want the height to be match to it's child height content it's self

in my previous example i used 200 as a height and it just for example , but if i did not put value to height so the height will be great work as expected to it's child height but of course there will not be animation ..

Note: the Column item height depends on users inputs and it could be changed all the time , so i can't put fixed height value !

so How can i achieve this ?

1 Answers

You can manually specify detailed BoxConstraints to suit your needs, rather than letting the container generate them for you.

Replacing the height argument with the following will animate the container between a forced minimum height of 200 and the height of its child.

constraints: BoxConstraints(minHeight: !boolValue ? 200 : 0)

Related