Description:

adaptive layout

Adaptive Layout
A flutter package that facilitates implementing layouts that adapt to different screen widths.

Try out the live example app.











Table of contents #

Table of contents
Live demos
Installing

1. Depend on it
2. Import it


Usage

Screen-size buckets
Order of precedence
Breakpoints


Tutorials
Maintainers

Live demos #
See the package in action:

pub.dev example app
Adaptive layout tutorial app
Another example app

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';
copied to clipboard
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),
)
copied to clipboard
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()
copied to clipboard
// Good. Calling the constructor with only one argument will not throw an error.
AdaptiveLayout(smallLayout: Container(width: 300))
copied to clipboard
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());
}
copied to clipboard
Tutorials #

Creating adaptive layouts with Flutter

Maintainers #

Touré Holder

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter