flutter_adaptive_layout

Description:

flutter adaptive layout

flutter_adaptive_layout #
A convenient way to implement screen-size-driven layouts for your widgets.
Features #

extracts device's screen size
applies provided (or overriden) breakpoints for the screen size
renders a provided layout variant for the extracted screen size

Gallery #



iPhone 14
iPad Mini
iPad Pro 12"










Getting started #

install the library

flutter pub add flutter_adaptive_layout
copied to clipboard

import the library

import 'package:flutter_adaptive_layout/flutter_adaptive_layout.dart';
copied to clipboard

wrap your widget with an AdaptiveLayout builder

Widget build(BuildContext context) {
return AdaptiveLayout(
smallBuilder: (context, child) => child!,
mediumBuilder: (context, child) =>
Center(
child: Material(
color: Colors.white,
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: ConstrainedBox(
constraints: BoxConstraints.tight(const Size.square(400)),
child: child,
),
),
),
largeBuilder: (context, child) =>
Center(
child: Material(
color: Colors.white,
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: ConstrainedBox(
constraints: BoxConstraints.tight(const Size.square(600)),
child: child,
),
),
),
child: const MyHomePage(),
);
}
copied to clipboard
Usage #
Working example can be found in /example
directory
Default breakpoints are set to 400 for small-medium screens and 600 for medium-large screens.
You optionally can change these by providing smallBreakpoint and mediumBreakpoint variables in BreakpointQualifier
for an AdaptiveLayout
Widget build(BuildContext context) {
return AdaptiveLayout(
qualifier: BreakpointsQualifier(
smallBreakpoint: 300,
mediumBreakpoint: 700,
),
smallBuilder: ...,
mediumBuilder: ...,
largeBuilder: ...,
child: ...,
);
}
copied to clipboard
Or instead you also can implement your own ScreenSizeQualifier.
Also you can override the default breakpoints by wrapping your widget tree with an BreakpointsSetting instance:
Widget build(BuildContext context) {
return BreakpointsSetting(
smallScreenBreakpoint: 200,
mediumScreenBreakpoint: 500,
child: MaterialApp(...),
);
}
copied to clipboard