How to make the children in the stack equal in height in flutter?
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..
],
),
),
],
);
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..
],
),
),
],
);
}
}
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..
],
),
),
],
)
);