I'm trying to understand why on the code bellow "Containers" in this case as an example, fills in the entire space, even though the have constraints or sizes.
return Scaffold(
body: SafeArea(
child: NestedScrollView(
physics: BouncingScrollPhysics(),
headerSliverBuilder: (context, innerBoxIsScrolled) {
return <Widget>[];
},
body: Container(
constraints: BoxConstraints(
maxHeight: 100,
minWidth: 100,
),
color: Colors.red,
height: 100,
width: 100,
child: Container(
constraints: BoxConstraints(
maxHeight: 50,
minWidth: 50,
),
color: Colors.yellow,
height: 50,
width: 50,
child: Text('a'),
),
),
),
),
);
You can add a Column
over the entire page to control the size of each Container
You can try this:
return Scaffold(
body: SafeArea(
child: NestedScrollView(
physics: BouncingScrollPhysics(),
headerSliverBuilder: (context, innerBoxIsScrolled) {
return <Widget>[];
},
body: Column(
children: [
Container(
color: Colors.red,
height: 100,
width: 100,
child: Container(
margin: EdgeInsets.all(25.0),
color: Colors.yellow,
height: 50,
width: 50,
child: Text('a'),
),
),
],
),
),
),
);