flutter_adaptive_layout 1.0.2
flutter_adaptive_layout: ^1.0.2 copied to clipboard
Adaptive layout builder - you can easily build custom page layout that would depend on a screen size to choose the correct widget
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
- import the library
import 'package:flutter_adaptive_layout/flutter_adaptive_layout.dart';
- 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(),
);
}
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: ...,
);
}
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(...),
);
}