How to make the children in the stack equal in height in flutter?

Question

How to make the children in the stack equal in height in flutter? The container below is the automatic height, I need to set the height of the upper container according to the height of the lower container.

Why do I need this？

Because I want to implement a background progress bar.

return Stack(
  children: [,
    Container(
      //how to auto set this widget equal height to below.
      height:?
    ),
    Container(
      child: Column(
        children: [
          Text("a"),
          Text("b"),
          Text("c"),
          //maybe more widgets..
        ],
      ),
    ),
  ],
);

Answer 1

Just wrap your Stack widget with IntrinsicHeight widget.

This will make each of the children of the Stack widget occupy the height of the largest child. So. all children will be of equal height.

As per the example you shared:

return IntrinsicHeight(
child: Stack(
  children: [,
    Container(
      child: SomeWidget(),
    ),
    Container(
      child: Column(
        children: [
          Text("a"),
          Text("b"),
          Text("c"),
          //maybe more widgets..
        ],
      ),
    ),
  ],
)
);

Answer 2

Although there is a good solution that made by 'noveleven',
I implemented by using 'addPostFrameCallback' and 'key'.

(I added a background color for distinguish Widget.)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey _key = GlobalKey();
  double _sizeOfColumn = 0.0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        _sizeOfColumn = _key.currentContext.size.height;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildBody(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _buildBody() {
    return Stack(
      children: [
        Container(
          color: Colors.grey,
          height: _sizeOfColumn,
        ),
        Container(
          key: _key,
          color: Colors.yellow,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            // crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text("a"),
              Text("b"),
              Text("c"),
              Text("a"),
              Text("b"),
              Text("c"),
              //maybe more widgets..
            ],
          ),
        ),
      ],
    );
  }
}

Answer 3

I found the solution based on @JaisonThomas' comment.

return Stack(
  children: [
    Positioned.fill(
      child: LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {                       
        return Container(
          child: Row(
            children: [
              Container(
                width: constraints.maxWidth * _progress,
                color: statusColor,
              ),
            ],
          ),
        );
      }),
    ),
    Container(
      child: Column(
        children: [
          Text("a"),
          Text("b"),
          Text("c"),
          //maybe more widgets..
        ],
      ),
    ),
  ],
);