How to make body divided into 3 equal part using container?-CodePudding

I want to make my screen into 3 equal part using container class in flutter. How to do that?

CodePudding user response：

What you want is the Flexible widget

Let's say you want the three equal parts to be stacked vertically

return Column(
  children: [
    Flexible(child: Container()),
    Flexible(child: Container()),
    Flexible(child: Container()),
  ]
);

You can also specify a flex component to signify the relationship between the widgets' sizes

return Column(
  children: [
    Flexible(child: Container(), flex:1),
    Flexible(child: Container(), flex:2),
  ]
);

which will make the second widget take 2/3 of the available space

CodePudding user response：

I prefer using LayoutBuilder, it constraints that can be used to get body height,maxWidth, also it provides more than this. Also, you can try MediaQuery.

 @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    return Scaffold(
        body: LayoutBuilder(
      builder: (context, constraints) => Column(
        children: [
          Container(
            height: constraints.maxHeight / 3,
            width: constraints.maxWidth,
            color: Colors.deepPurple,
          ),
          Container(
            height:size.height/3,
            width: size.width/3,
            color: Colors.deepPurple,
          )
        ],
      ),
    ));
  }

You can remove Cloumn it's just an example. Using LayoutBuilder provide parents' constraints.