Nowadays, we don’t think about building apps, without thinking about their responsiveness, all apps must have the ability to present themselves well regardless of the screen size of the user’s device.
Here I will present how can we achieve a app with responsive design in a easy way, with few lines of code.
Responsive Layout
First lets create a class in our project, it can have the name responsive_layout.dart, it will be a class with capabilities to return a custom widget depending on screen size of the user's device.
import 'package:flutter/material.dart';
class ResponsiveLayout extends StatelessWidget
{
}
Breakpoints
Now inside the class created, let’s create breakpoints, which are points that determine a range or the maximum width of the screen, whose will return a widget according to that width.
class ResponsiveLayout extends StatelessWidget
{
static const int mobileMaxWidth = 576;
static const int tabletMaxWidth = 768;
static const int desktopMaxWidth = 992;
}
Screen Verification
Next, lets create some methods to verify if the width of user screen is on some breakpoint range.
static bool isMobile(context)
{
return MediaQuery.of(context).size.width <= mobileMaxWidth;
}
static bool isTablet(context)
{
return mobileMaxWidth < MediaQuery.of(context).size.width
&& MediaQuery.of(context).size.width <= tabletMaxWidth;
}
static bool isDesktop(context)
{
return tabletMaxWidth < MediaQuery.of(context).size.width
&& MediaQuery.of(context).size.width <= desktopMaxWidth;
}
static bool isLarge(context)
{
return desktopMaxWidth < MediaQuery.of(context).size.width;
}
Build Layout
Almost in the end, now lets render our ResponsiveLayout according to screen size.
Supported Widgets
class ResponsiveLayout extends StatelessWidget {
...
final Widget mobileBody;
final Widget desktopBody;
final Widget? tabletBody;
final Widget? largeBody;
const ResponsiveLayout({
Key? key,
required this.mobileBody,
required this.desktopBody,
this.tabletBody,
this.largeBody
})
: super(key: key);
...
Render Widget
class ResponsiveLayout extends StatelessWidget {
...
@override
Widget build(BuildContext context) {
if(isLarge(context))
{
if(largeBody != null)
{
return largeBody!;
}
return desktopBody;
}
if(isDesktop(context))
{
return desktopBody;
}
if(isTablet(context) && tabletBody != null)
{
return tabletBody;
}
return mobileBody;
}
...
Result
Now, we must just create a Scaffold page and use our ResponsiveLayout widget.
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Responsiveness"),
),
body: ResponsiveLayout(
mobileBody: Container(color: Colors.red),
desktopBody: Container(color: Colors.green),
),
);
}
}
Resources
You can learn more about Flutter responsive widgets in this link.
https://docs.flutter.dev/development/ui/layout/adaptive-responsive
This project is in github in the link below, it also contains helpers for orientation and flex layout.
https://github.com/assisfery/responsive_layout_flutter
Top comments (3)
Good stuff, we've done a similar approach on our company, a bit more feature-rich, but quite similar in approach.
Just to knit pick, this approach would not be considered Responsive, it would be considered Adaptive, although the lines can be bit blurry.In Flutter you can work with both though!
Thanks, now I can easily differentiate these concepts, I've updated the title heheh
Yeah, kinda confusing xD Took me a while to grasp