This is my first question and I'm new in Flutter. I searched a lot but I did not find any suitable answers.

Flutter: I need to set my box height flexible to fit any size of screen. I also need to fit my last box to the right side of screen to fit any screen. I also mentioned my problem in the image of screen. Kindly help. I'm adding my code here.

Output and requirement of my code

void main() {
  runApp(const Challange2());
}

class Challange2 extends StatelessWidget {
  const Challange2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blueGrey,
        body: SafeArea(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                height: 850.0,
                width: 100.0,
                color: Colors.amberAccent,
                child: Text(
                  'This box height should be flexible according to screen size',
                  style: TextStyle(color: Colors.black, fontSize: 25),
                ),
              ),
              const SizedBox(
                width: 65,
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    height: 100.0,
                    width: 100.0,
                    color: Colors.deepPurpleAccent,
                    child: Text(
                      'Text2',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  Container(
                    height: 100.0,
                    width: 100.0,
                    color: Colors.deepOrangeAccent,
                    //Flexible(
                    child: Text(
                      'Text3',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  //),
                ],
              ),
              const SizedBox(
                width: 65,
              ),
              Container(
                height: 850.0,
                width: 100.0,
                color: Colors.blue,
                child: Text(
                  'This box need to be right alignment and height should be flexible according to screen size',
                  style: TextStyle(color: Colors.black, fontSize: 25),
                ),
                // child: const Align(
                //   alignment: Alignment.topCenter,
              ),
            ],
          ),
        ),
      ),
      //),
      //return Container();
    );
  }
}

CodePudding user response：

To adapt to screen height, you can set height of containers to double.infinity, To keep rigth container aligned to the right, use expanded in the center row child, in order to make this widget grow or shrink as needed.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(children: [
        Container(
          width: 100,
          height: double.infinity,
          color: Colors.red,
          child: Text(
              'This box height should be flexible according to screen size'),
        ),
        Expanded(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.green,
                ),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.yellow,
                ),
              ]),
        ),
        Container(width: 100,
                            height: double.infinity,
color: Colors.blue, child:Text("Right Panel"),),
      ]),
    );
  }
}

CodePudding user response：

LayoutBuilder() Provides a way to get the actual screen size dynamically and allows you to calculate relative sizes: Youtube - Flutter: LayoutBuidler

Generally when using Rows and Columns you can use Expanded widgets to have relative instead of absolute sizes:

Row(
   children: [
     Expanded(flex: 1, child: Container()), // This will take up 1 third of the screen
     Expanded(flex: 2, child: Container()), // This will take up 2 thirds of the screen
   ]
),

CodePudding user response：

Expanded(flex: 1, child: Container()), Expanded(flex: 1, child: Container()),