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
• Tablet
• Desktop

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

@override
Widget 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;
@override
Widget 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