Responsive UI In Flutter

Why do we have to make Responsive UI In Flutter?

The device screen size is evolving from time to time and it is a challenge for a developer to make the Responsive UI In Flutter and run their application smoothly on any device.

In 2021, the number of mobile devices operating worldwide stood at almost 15 billion, up from just over 14 billion in the previous year.

Even though the apps you create to run on all the compatible devices but we have faced the challenge of displaying the optimal UI on different screen sizes.

That is why it is more important than ever to make your apps responsive.

Read more about Flutter app development from mobikul.

What is Responsive App Design?

The responsive design layout UI changes according to the screen size and the shape of the devices.
The Responsive UI In Flutter simply means using a single code set that responds to various changes to the layout of the devices.

Some apps will adjust the size of the page according to the screen when the user either resizes the window on the laptop or changes the orientation of the phone or tablet.

In responsive design, there are majorly three things to consider- Size, Orientation, and Device type.

What are the major things we have to kept in our mind while we make the app to responsive?

There are two basic approaches to creating Flutter apps with responsive design:

Use Flutter’s own Responsive Widgets:-

AspectRatio
CustomSingleChildLayout
CustomMultiChildLayout
FittedBox
FractionallySizedBox
LayoutBuilder
MediaQuery
MediaQueryData
OrientationBuilder

Use Developers-made packages:-

responsive_framework
Screen_Utils
flutter_responsive etc.

Today we are working with responsive_framework to make the Responsive UI In Flutter.

To use the responsive framework in flutter projects import the latest version from https://pub.dev.

Add dependency in pubspec.yaml file:
dependencies:
responsive_framework: latest version or use (any)

Run flutter pub get in the terminal.

Import this library into your project:

main. dart file

import 'package:flutter/material.dart';
import 'package:responsive_framework/responsive_framework.dart';

void main() => runApp(const AppWidget());

class AppWidget extends StatelessWidget {
  const AppWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, widget) => ResponsiveWrapper.builder(
        ClampingScrollWrapper.builder(context, widget!),
        breakpoints: const [
          ResponsiveBreakpoint.resize(350, name: MOBILE),
          ResponsiveBreakpoint.autoScale(600, name: TABLET),
          ResponsiveBreakpoint.resize(800, name: DESKTOP),
          ResponsiveBreakpoint.autoScale(1700, name: 'XL'),
        ],
      ),
      title: 'Flutter Responsive Framework',
      home: const HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

import 'package:flutter/material.dart';

import 'package:responsive_framework/responsive_framework.dart';

void main() => runApp(const AppWidget());

class AppWidget extends StatelessWidget {

const AppWidget({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

builder: (context, widget) => ResponsiveWrapper.builder(

ClampingScrollWrapper.builder(context, widget!),

breakpoints: const [

ResponsiveBreakpoint.resize(350, name: MOBILE),

ResponsiveBreakpoint.autoScale(600, name: TABLET),

ResponsiveBreakpoint.resize(800, name: DESKTOP),

ResponsiveBreakpoint.autoScale(1700, name: 'XL'),

title: 'Flutter Responsive Framework',

home: const HomePage(),

debugShowCheckedModeBanner: false,

);

}

ResponsiveVisibility
The Responsive Framework package provides us with that can help us conditionally display widgets in our app based on the breakpoint conditions we specify and The TABLET breakpoint and hide other widgets on smaller screens.

ResponsiveVisibility(
visible: false,
visibleWhen: [Condition.largerThan(name: TABLET)],
child: Widget(),
),

ResponsiveVisibility(

visible: false,

visibleWhen: [Condition.largerThan(name: TABLET)],

child: Widget(),

Responsive Row/Column
The ResponsiveRowColumn is a widget that manages to change the layout in rows or columns.

ResponsiveRowColumn(
  rowMainAxisAlignment: MainAxisAlignment.center,
  rowPadding: const EdgeInsets.all(30),
  columnPadding: const EdgeInsets.all(30),
  layout: ResponsiveWrapper.of(context).isSmallerThan(DESKTOP)
      ? ResponsiveRowColumnType.COLUMN
      : ResponsiveRowColumnType.ROW,
  children: [
    ResponsiveRowColumnItem(
      rowFlex: 1,
      child: Widget(),
    ),
    ResponsiveRowColumnItem(
      rowFlex: 1,
      child: Widget(),
    ),
  ],
),

ResponsiveRowColumn(

rowMainAxisAlignment: MainAxisAlignment.center,

rowPadding: const EdgeInsets.all(30),

columnPadding: const EdgeInsets.all(30),

? ResponsiveRowColumnType.COLUMN

: ResponsiveRowColumnType.ROW,

children: [

ResponsiveRowColumnItem(

rowFlex: 1,

child: Widget(),

ResponsiveRowColumnItem(

rowFlex: 1,

child: Widget(),

Responsive Values
These values can be of any type, but for our example, we are going to create a dynamic double to set a font size for our text.
The responsiveTextWidget displays the ‘Flutter Response Framework’ text and changes the current font size to the following.

 Widget responsiveTextWidget() {
    return Text(
      'Flutter Response Framework',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: ResponsiveValue(
          context,
          defaultValue: 60.0,
          valueWhen: const [
            Condition.smallerThan(
              name: MOBILE,
              value: 40.0,
            ),
            Condition.largerThan(
              name: TABLET,
              value: 80.0,
            )
          ],
        ).value,
        color: Colors.black,
        fontWeight: FontWeight.w700,
      ),
    );
  }

Widget responsiveTextWidget() {

return Text(

'Flutter Response Framework',

textAlign: TextAlign.center,

style: TextStyle(

fontSize: ResponsiveValue(

context,

defaultValue: 60.0,

valueWhen: const [

Condition.smallerThan(

value: 40.0,

Condition.largerThan(

value: 80.0,

)

).value,

color: Colors.black,

fontWeight: FontWeight.w700,

);

}

That’s all for today.

If you want to learn more then please go and check their page on pub.dev:
https://pub.dev/packages/responsive_framework

You can read more blogs on this website: https://mobikul.com/blog/

Parveen Baghel 28 April 2023

. . .

Responsive UI In Flutter

Why do we have to make Responsive UI In Flutter?

What is Responsive App Design?

What are the major things we have to kept in our mind while we make the app to responsive?

Leave a Comment Cancel Reply

Message Sent!