Open In App

Flutter – Responsive and Adaptive Apps

Improve
Improve
Like Article
Like
Save
Share
Report

Whenever we are developing an app we usually develop it for a single device but it is not meant for use only on a single device but on different devices of different sizes and in case of flutter it also provides us the facility to develop for the web at the same time. So we have to deal with a range of different sizes. Here we will be discussing how to deal with this problem.

To deal with this problem we will be using the MediaQuery class of Flutter.  This class provides us with information related to the size of the screen the app is running on. the size attribute provides us with the size and has width and height of the device.

We will be developing a simple app that is going to tell us on which platform we are and the width of the device. It is just a simple app that will get us started with responsive apps. We will be testing the app on flutter for the web for checking for its responsiveness.

First, we are going to initialize the app in main.dart with a simple Home widget which we will be developing in a separate dart file called home.dart.

Dart




import 'package:flutter/material.dart';
import 'home.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'GeeksforGeeks',
      home: Home(),
      theme: ThemeData(primarySwatch: Colors.green),
    );
  }
}


In the home.dart we will be writing some functions to define the sizes of the different devices. We have defined the functions to check the size of the device. The MediaQuery.of(context).size.width requires a context which is a build context, so we will be using these functions inside the build function. 

Dart




import 'package:flutter/material.dart';
  
double deviceSize(BuildContext context) => MediaQuery.of(context).size.width;
  
class Home extends StatelessWidget {
  static bool isMobile(BuildContext context) =>
      MediaQuery.of(context).size.width < 800;
  
  static bool isTablet(BuildContext context) =>
      MediaQuery.of(context).size.width >= 800 &&
      MediaQuery.of(context).size.width < 1200;
  
  static bool isDesktop(BuildContext context) =>
      MediaQuery.of(context).size.width >= 1200;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Container(
              width: double.infinity,
              height: 50,
              color: Colors.green,
              child: Center(
                child: Text(
                  'GeeksforGeeks',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: isDesktop(context)
                  ? Desktop()
                  : isTablet(context)
                      ? Tablet()
                      : Mobile(),
            )
          ],
        ),
      ),
    );
  }
}


After this, we defined three more widgets to deal with different sizes. We have defined the widgets in the same dart file but for developing complex widgets we can make separate files for these widgets.

Dart




class Desktop extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Desktop ${deviceSize(context).toInt()}'));
  }
}


Desktop mode

Dart




class Tablet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Tablet ${deviceSize(context).toInt()}'));
  }
}


Tablet mode

Dart




class Mobile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Mobile ${deviceSize(context).toInt()}'));
  }
}


Run the app and adjust the window to see the different outputs.

Output for Mobile Screen size:



Last Updated : 24 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads