Flutter | Responsive Layout For Flutter Web

Flutter is a powerful tool-kit because it allow us to create build for almost all Operating Systems with single codebase

To build app for more than one platform, Responsiveness plays great role

So here I would like to write about responsive layout in flutter in short.

Device type used by users:

  • Mobile

We can create a Stateless Widget that allow us to write different layout with different screen size (i.e. Mobile, Tablet, Desktop) and declare three final widgets as below,

class Responsive extends StatelessWidget {final Widget mobile;final Widget tablet;final Widget desktop;}

Create constructor to allow users to build different layout. Most users use Mobile or Desktop so we set that as required

const Responsive({Key key,@required this.mobile,this.tablet,@required this.desktop,}) : super(key: key);

Now we can define boolean to check what size of device is being used according to width

  • Mobile ( width < 800 )
static bool isMobile(BuildContext context) =>MediaQuery.of(context).size.width < 800;
  • Tablet ( width ≥ 800 && ≤ 1200 )
static bool isTablet(BuildContext context) =>MediaQuery.of(context).size.width >= 800 &&MediaQuery.of(context).size.width <= 1200;
  • Desktop ( width ≥ 1200 )
static bool isDesktop(BuildContext context) =>MediaQuery.of(context).size.width >= 1200;

And in Stateless Widget, we can return LayoutBuilder as written below, which will return layout according to screen size

@overrideWidget build(BuildContext context) {return LayoutBuilder(builder: (context, constraint) {if (constraint.maxWidth >= 1200) {return desktop;} else if (constraint.maxWidth >= 800) {return tablet ?? mobile;} else {return mobile;}},);}

Complete code of Responsive Widget

import 'package:flutter/material.dart';class Responsive extends StatelessWidget {final Widget mobile;final Widget tablet;final Widget desktop;const Responsive({Key key,@required this.mobile,this.tablet,@required this.desktop,}) : super(key: key);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;@overrideWidget build(BuildContext context) {return LayoutBuilder(builder: (context, constraint) {if (constraint.maxWidth >= 1200) {     return desktop;} else if (constraint.maxWidth >= 800) {     return tablet ?? mobile;    // tablet is not required so we made it null and return mobile} else {     return mobile;}},);}}

To use this, wrap any Widget with Responsive widget we just created and provide different layout for both Mobile and Desktop just like following

child: Scaffold(body: Responsive(mobile:
_HomeScreenMobile(scrollController: _trackingScrollController),
desktop:
_HomeScreenDesktop(scrollController: _trackingScrollController),
),
)

We created Boolean isMobile, isTablet and isDesktop if you remember, we can use them as explained below

appBar: Responsive.isDesktop(context)? DesktopLayout(preferredSize: Size(screenSize.width, 100.0),child: CustomAppBar(. . .
. . .
selectedIndex: _selectedIndex,onTap: (index) => setState(() => _selectedIndex = index),),): MobileLayout(),

That’s all for now, will write something new soon

I write articles for my own reference only. I use medium.com as my digital notebook