Flutter Responsiveness (using adaptive concepts)
Tags: flutter, dart, mobile
Published: 2022-05-18 11:43:14


![Photo by Linus Mimietz on Unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jdgmpk684r13p5q6l90.jpg)
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.

```dart
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.

```dart
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.

```dart
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**

```dart
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**

```dart
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.

```dart
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](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](https://github.com/assisfery/responsive_layout_flutter)