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