adaptive_layout 0.1.5
adaptive_layout: ^0.1.5 copied to clipboard

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

Adaptive Layout

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

Try out the live example app.


Build Status Coverage Status

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());
}

Tutorials #

Maintainers #

7
likes
130
pub points
46%
popularity

Publisher

toureholder.com

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

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD (LICENSE)

Dependencies

flutter

More

Packages that depend on adaptive_layout