Breaking News: Grepper is joining You.com. Read the official announcement!

split screen to 3 part flutter

Hurt Hoopoe answered on July 4, 2022 Popularity 6/10 Helpfulness 2/10

answer split screen to 3 part flutter

split screen to 3 part flutter

Comment

//with dart 2 new and const keywords are optional
void main() => runApp(new MaterialApp(home: new HomePage(),));

class HomePage extends StatelessWidget {

  final text = new Text('Text here', style: new TextStyle(fontSize: 50.0),);

  final margin = const EdgeInsets.only(bottom: 10.0, right: 10.0, left: 10.0);

  final backColor = Colors.lightGreen;

  @override
  Widget build(BuildContext context) {

    var width = MediaQuery.of(context).size.width; // Using this line I got the device screen width

    return new Scaffold(
      body: new SafeArea(//I didnt add appbar. this will add necessary padding for status bar.
        child: new Column(
        children: [
          new Expanded(
            flex: 2,
            child: new Container(
              width: width /1.5, // this will give you flexible width not fixed width
              margin: margin, // variable
              color: backColor,// variable
              child: new Column(
                children: <Widget>[
                  new Expanded(
                    flex: 1,
                    child: new Container(
                      alignment: Alignment.topCenter,
                      child: text, //varaible above
                    ),
                  ),
                  new Expanded(
                    flex: 1,
                    child: new Container(
                      alignment: Alignment.bottomCenter,
                      child: text, //variable above
                    ),
                  ),
                ],
              ),
            ),
          ),
          new Expanded(
            flex: 3,
            child: new Container(
              width: width /1.5, // this will give you flexible width not fixed width
              margin: margin, //variable
              color: backColor,//variable
            ),
          ),
        ],
      ),
      ),
    );
  }
}

Popularity 6/10 Helpfulness 2/10 Language whatever

Source: stackoverflow.com

Tags: flutter whatever

Link to this answer
Share Copy Link

Contributed on Jul 04 2022

Hurt Hoopoe

0 Answers Avg Quality 2/10

split screen to 3 part flutter

Contents

More Related Answers

split screen to 3 part flutter

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.