Press "Enter" to skip to content

Flutter Responsive Height and Width with Screen Size

As we make every app as responsive, Flutter also supports responsive design with device screen’s or parent’s width and height.

You can set the width and height of your widget depends to screen size.

In case of ‘Container’ widget, you need to set the height and width. But if you want to set its size into full of screen’s width or half of screen width, then you need use any method for getting responsive layout.

Container with height 100 and width 200:

 Container(
            height: 200,
            width: 300,
            color: Colors.teal,
            child: Text("hello"),
          ),

Output:

Flutter with fixed height and width

Responsive Screen Methods

How to get width as screen width or percentage wise screen width like 50% ?

1. Media Query

MediaQuery is one of the best and simple method to get screen size of width and height.

Here MediaQuery.of(context).size.width is used to get device screen’s width and MediaQuery.of(context).size.height is used to get height.

Example Code (Full App code included)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Responsive App';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: BuildBody(),
      ),
    );
  }
}
class BuildBody extends StatefulWidget {
  @override
  _BuildBodyState createState() => _BuildBodyState();
}

class _BuildBodyState extends State<BuildBody> {
  @override

 Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      color: Colors.teal,
      child: Text("hello"),
    );
  }
}

Output

Flutter MediaQuery for Height and Width

Another example with height 75% (0.75) and width 50% (0.5) of screen size.

  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width * 0.5,
      height: MediaQuery.of(context).size.height * .75,
      color: Colors.teal,
      child: Text("hello"),
    );
  }
Flutter Media Query for percentage wise height and width

2. Fractionally Sized Box

FractionallySizedBox is another method but similar to Media Query. Here widthFactor and heightFactor properties used instead of width and height.

Example

Widget build(BuildContext context) {
   return FractionallySizedBox(
          widthFactor: 0.75,
          heightFactor: 0.9,
          child: Container(
          color: Colors.green,
          child: Text('FractionallySizedBox'),
        ),
      );
}

Output

Flutter FractionallySizedBox for responsive design

3. Expanded

In this method, you can divide the total size of height and width into different width and height sections. The property ‘Flex’ decides the size of width or height. Let’s see an example:

Widget build(BuildContext context) {
    return Column(
       children: <Widget>[
         Expanded(
           flex: 1,
             child: Container(
               width: MediaQuery.of(context).size.width,
               color: Colors.lime,
               child: Text(' flex 1, means 1 / 10 of total flext sum '),
             )
         ),
         Expanded(
             flex: 3,
             child: Container(width: MediaQuery.of(context).size.width,
               color: Colors.teal,
               child: Text(' flex 3, means 3 / 10 of total flext sum'),
             )
         ),
         Expanded(
             flex: 6,
             child: Container(width: MediaQuery.of(context).size.width,
               color: Colors.cyan,
               child: Text(' flex 6, means 6 / 10 of total flext sum'),
             )
         )
       ],
    );
  }

Here there are 3 Expanded widgets are there. All contain a property of Flex of total 10 (1 + 3 + 6 = 10).

 So Flex = 1 means, 1 of 10 section height of total screen height(which is considered as 10).

Also Flex : 3 means 1 of 10.

If you want to split screen by Columns, then you need to define the width manually as well as if you split screen by Rows then you need to set the height manually.

Output for above code (Column Wise)

Flutter Using Expanded widget for responsive design

Row Wise Splitting

Widget build(BuildContext context) {
    return Row(
       children: <Widget>[
         Expanded(
           flex: 2,
             child: Container(
               height: MediaQuery.of(context).size.height,
               color: Colors.lime,
               child: Text(' flex 2'),
             )
         ),
         Expanded(
             flex: 3,
             child: Container(
               height: MediaQuery.of(context).size.height,
               color: Colors.teal,
               child: Text(' flex 3'),
             )
         ),
         Expanded(
             flex: 5,
             child: Container(
               height: MediaQuery.of(context).size.height,
               color: Colors.cyan,
               child: Text(' flex 5'),
             )
         )
       ],
    );
  }

Output

Flutter Expanded Flux for Responsive design

4. Flexible

Similar to Expanded widget, Flex property is deciding the widget’s screen. But you need to set both width and height manually.

Example

Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Flexible(
            flex: 2,
            child: Container(
              height: MediaQuery.of(context).size.height * 0.3,
              width: MediaQuery.of(context).size.width,
              color: Colors.lime,
              child: Text(' flex 2'),
            )
        ),
        Flexible(
            flex: 3,
            child: Container(
              height: MediaQuery.of(context).size.height * 0.5,
              width: MediaQuery.of(context).size.width,
              color: Colors.teal,
              child: Text(' flex 3'),
            )
        ),
        Flexible(
            flex: 5,
            child: Container(
              height: MediaQuery.of(context).size.height * 0.75,
              width:  MediaQuery.of(context).size.width,
              color: Colors.cyan,
              child: Text(' flex 5'),
            )
        )
      ],
    );
  }

Output

Flutter Flexible widget for responsive design

5. Aspect Ratio

aspectRatio is more customized. You can use this widget with help of Expanded and Align widgets. Here aspectRatio : 2/3 means 2 of 3 part, where 3 is the height and 2 is the width.

Example

 Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
        flex: 1,
          child: Align(
           alignment: Alignment.centerLeft,
           child: AspectRatio(
            aspectRatio: 2/3,
              child:
              Container(width: MediaQuery.of(context).size.width,
                color: Colors.cyan,
                child: Text(' 2 of 3 part of the height'),
              ),
          ),
        )
      ),
        Expanded(
            flex: 2,
            child: Align(
              alignment: Alignment.centerRight,
              child: AspectRatio(
                aspectRatio: 1/3,
                child:
                Container(width: MediaQuery.of(context).size.width,
                  color: Colors.cyan,
                  child: Text(' 1 / 3 part of the height of this section'),
                ),
              ),
            )
        )
      ],
    );
  }

Output

Flutter aspect Ratio widget for responsive layout design

There are more methods rather than above mentioned.. Browse and try yourself 🙂

Be First to Comment

Leave a Reply