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..
        ],
      ),
    ),
  ],
);

Is this what you are looking for? -[stack solution](https://stackoverflow.com/a/51828082/10755967) — Jaison Thomas, Jul 30 '21 at 02:39
why not set both height like `MediaQuery.of(context).size.height*0.2` — Sam Chan, Jul 30 '21 at 02:41

score 4 · Answer 1 · answered Jan 24 '22 at 13:01

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..
        ],
      ),
    ),
  ],
)
);

score 3 · Accepted Answer · answered Jul 30 '21 at 03:04

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..
        ],
      ),
    ),
  ],
);

score 3 · Answer 3 · answered Jul 30 '21 at 03:11

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..
            ],
          ),
        ),
      ],
    );
  }
}

Good solution, but i need to use it in ListView. – noveleven Jul 30 '21 at 03:31 — noveleven, Jul 30 '21 at 03:31

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

3 Answers3