매번 구글링 하고나면 '아~'하고 이해한 뒤 금방 잊어버려서 기록해 두는 지식.
//이 코드는
Expanded(
child: Foo(),
);
//이 코드와 동일함.
Flexible(
fit: FlexFit.tight,
child: Foo(),
);
https://stackoverflow.com/questions/65933330/expanded-and-flexible-not-filling-entire-row
build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.max,
children: [
// FlexibleWidget(),
ExpandedWidget(),
FlexibleWidget(),
],
),
Row(
children: [
ExpandedWidget(),
ExpandedWidget(),
],
),
Row(mainAxisSize: MainAxisSize.min,
children: [
FlexibleWidget(),
FlexibleWidget(),
],
),
Row(mainAxisSize: MainAxisSize.min,
children: [
FlexibleWidget(),
ExpandedWidget(),
],
),
],
),
);
}
}
class ExpandedWidget extends StatelessWidget {
Widget build(BuildContext context) {
return Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.white),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'Expanded',
style: TextStyle(color: Colors.white, fontSize: 24),
),
),
),
);
}
}
class FlexibleWidget extends StatelessWidget {
Widget build(BuildContext context) {
return Flexible(
child: Container(
decoration: BoxDecoration(
color: Colors.red,
border: Border.all(color: Colors.white),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'Flexible',
style: TextStyle(color: Colors.black, fontSize: 24),
),
),
),
);
}
}
Widget