Animated Container over the contents of another flutter container-CodePudding

I'm trying to make a screen that the blue container is on top of the content of the grey container, but the way I'm doing the blue container is pushing the content of the grey container. How could I make the blue container when expanded to be on top of the grey one? Do I have to use stack? I couldn't understand how I can do it.

 class _TestScreenState extends State<TestScreen> {
   bool isExpanded = false;
   @override
   Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
    title: const Text('Title'),
  ),
  body: LayoutBuilder(
    builder: (p0, p1) {
      final widthScreen = p1.maxWidth;
      final heightScreen = p1.maxHeight;

      return Column(
        children: [
          Container(
            color: Colors.amber,
            width: widthScreen,
            height: heightScreen * 0.32,
            child: Column(
              children: [
                Row(
                  children: [
                    IconButton(
                      iconSize: 30,
                      icon: const Icon(Icons.arrow_back),
                      onPressed: () {},
                    ),
                  ],
                ),
              ],
            ),
          ),
          Expanded(
            child: Container(
              height: heightScreen * .5,
              alignment: Alignment.bottomCenter,
              color: Colors.grey,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Text("line 1"),
                  Text("line 2"),
                  Text("line 3"),
                  AnimatedContainer(
                    duration: Duration(milliseconds: 300),
                    height: isExpanded
                        ? heightScreen - heightScreen * 0.32
                        : heightScreen * .2,
                    color: Colors.blue,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              IconButton(
                                iconSize: 30,
                                color: Colors.black,
                                icon: const Icon(Icons.ac_unit),
                                onPressed: () {
                                  setState(() {
                                    isExpanded = !isExpanded;
                                  });
                                },
                              )
                            ]),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      );
    },
  ),
  );
 }
}

CodePudding user response：

Yes you have to use a Stack:

Columns and Rows only put UI elements next to each other.

Stack(
  children: [
    BottomWidget(),
    MiddleWidget(),
    TopWidget(),
  ]
),

If you want your TopWidget to also be at the top of the screen wrap it with an Align widget.

In your case replace TopWidget() with whatever you want to be on top (probably the blue container).

Also watch this 1 min video about the Stack widget: Stack - Flutter.

CodePudding user response：

In column you should wrap all the widgets with expanded widget and provide flex accourding to the size which you need. Try the code as followed:

Column(
       children: [
                  Expanded(flex: 2, child: Container(color: 
                  Colors.red));
                  Expanded(flex: 3, child: Container(color: 
                  Colors.green));
                  Expanded(flex: 1, child: Container(color: 
                  Colors.blue));
                 ]
    );

This might solve your issue.