Adaptive Layout
A flutter package that facilitates implementing layouts that adapt to different screen widths.
Try out the live example app.
Table of contents
Live demos
See the package in action:
Installing
1. Depend on it
Depend on this package as a dependency by running flutter pub add adaptive_layout.
2. Import it
Now in your Dart code, you can use:
import 'package:adaptive_layout/adaptive_layout.dart';
Usage
AdaptiveLayout is a Stateless Widget whose build method will return one of the Widgets provided to it according to the current width of the screen.
Include it in your build method like:
AdaptiveLayout(
smallLayout: Container(width: 300),
mediumLayout: Container(width: 700),
largeLayout: Container(width: 900),
)
In the above example AdaptiveLayout will render a Container with a width of 300dpi on a small screen, a Container with a width of 700dpi on a medium sized screen and a Container with a width of 900dpi on a large screen.
Screen-size buckets
AdaptiveLayout supports three screen-size buckets: small, medium, and large.
The AdaptiveLayout constructor accepts any Widget for each screen-size bucket and at least one Widget must be passed to the constructor. The constructor will throw an AssertionError if no layouts are provided.
For example:
// Bad. Calling the constructor with no arguments will throw an error.
AdaptiveLayout()
// Good. Calling the constructor with only one argument will not throw an error.
AdaptiveLayout(smallLayout: Container(width: 300))
Order of precedence
As stated, it isn't necessary to provide a widget for each screen-size bucket. On large screens the order of precedence is largeLayout, mediumLayout, smallLayout. On medium screens the order of precedence is mediumLayout, largeLayout, smallLayout. On small screens the order of precedence is smallLayout, mediumLayout, largeLayout.
Breakpoints
The default definitions are:
- large screens are at least 1200dpi wide
- medium screens are at least 720dpi wide
- small screens are less than 720dpi wide
The breakpoints can be easily configured by calling the static method AdaptiveLayout.setBreakpoints like:
void main() {
AdaptiveLayout.setBreakpoints(
mediumScreenMinWidth: 640,
largeScreenMinWidth: 960,
);
runApp(MyApp());
}