Responsive Layout for Flutter Web 💻➡️🖥➡️📱➡️⌚️

Responsive Builder

The responsive builder package contains widgets that allows you to create a readable responsive UI. The package is inspired by the Responsive UI Flutter series created by FilledStacks.

It aims to provide you with widgets that make it easy to build different UI’s along two different Axis. Orientation x ScreenType. This means you can have a separate layout for Mobile - Landscape, Mobile - Portrait, Tablet - Landscape and Tablet-Portrait.

Installation

Add responsive_builder as dependency to your pubspec file

responsive_builder:

Usage

This package provides a widget called ResponsiveBuilder that provides you with a builder function that returns the current SizingInformation. The SizingInformation includes the DeviceScreenType, screenSize and localWidgetSize. This can be used for fine grained responsive control from a view level down to per widget responsive level.

Responsive Builder The ResponsiveBuilder is used as any other builder widget.

// import the package
import 'package:responsive_builder/responsive_builder.dart';

// Use the widget
ResponsiveBuilder(
    builder: (context, sizingInformation) {
      // Check the sizing information here and return your UI
          if (sizingInformation.deviceScreenType == DeviceScreenType.desktop) {
          return Container(color:Colors.blue);
        }

        if (sizingInformation.deviceScreenType == DeviceScreenType.tablet) {
          return Container(color:Colors.red);
        }

        if (sizingInformation.deviceScreenType == DeviceScreenType.watch) {
          return Container(color:Colors.yellow);
        }

        return Container(color:Colors.purple);
      },
    },
  );
}

This will return different colour containers depending on which device it’s being shown on. A simple way to test this is to either run your code on Flutter web and resize the window or add the device_preview package and view on different devices.

for more check this out