Flutter Responsiveness (using adaptive concepts)

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

Comments

[Keff]

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!

Where responsive design relies on changing the design pattern to fit the real estate available to it, adaptive design has multiple fixed layout sizes. When the site detects the available space, it selects the layout most appropriate for the screen. So, when you open a browser on the desktop, the site chooses the best layout for that desktop screen; resizing the browser has no impact on the design.
Excerpt from: interaction-design.org/literature/...

[Assis Ferreira]

Thanks, now I can easily differentiate these concepts, I've updated the title heheh

[Keff]

Yeah, kinda confusing xD Took me a while to grasp