Responsive Container in Flutter

In the earlier tutorial, we learnt how to create containers in flutter. These containers had a fixed width and height of 100. But in usual development scenarios, we’d want to have a responsive container in flutter to fit to the various screen resolutions of mobile devices.

We would like the container to respond to the various screen sizes of both web and mobile apps.

To follow along, you can get the code from the repo. The project folder is centralized_containers.

https://github.com/Prakashash18/flutterBlogs

If you unsure how to clone a repo, refer here.

Flutter MediaQuery Class

The key aspect of making the UI responsive is to get the resolutions of the device that the app is running, programmatically. For that, we can use the MediaQuery Class.

The MediaQuery class will be useful when it is used with the context of the running app. Thus, we will always pass the context to the MediaQuery class using the of method, allowing a responsive container in flutter.

MediaQuery.of(context)

The details of the device running the app are then extracted from this method. For this example, we are interested in the size of the device that is hosting our app.

MediaQuery.of(context).size

Flutter Width Responsiveness

For the code given, you can make the width responsive by stating the width of the box to take 50% of the available screen width, i.e. * 0.5

MediaQuery.of(context).size.width * 0.5

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Container(
        width: MediaQuery.of(context).size.width * 0.5, //responsive
        height: 100 ,
        decoration: BoxDecoration(
            color: Colors.blue,
            border: Border.all(color: Colors.red, width: 3),
            borderRadius: BorderRadius.all(Radius.circular(5))),
        child: Center(
          child: Text(
            "Hey There",
          ),
        ),
      )),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

Running the code on a mobile simulator should show this. If you’re unsure on how to run this code, see here.

To test out the responsiveness, change the device to chrome web. If unsure, refer here.

You can see the responsiveness of the container to various devices. It takes 50% of the available width.

Flutter Height Responsiveness

Getting the height to be responsive is a little more tricky. The height of a device is shared with the AppBar (if present in UI Design) and status bar (for mobile devices).

For example, we can edit the height of the container to take all available space as such

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Container(
        width: MediaQuery.of(context).size.width * 0.5, //responsive
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
            color: Colors.blue,
            border: Border.all(color: Colors.red, width: 3),
            borderRadius: BorderRadius.all(Radius.circular(5))),
        child: Center(
          child: Text(
            "Hey There",
          ),
        ),
      )),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

Running this, shows the output as such. All the available height space is taken up.