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';

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

• Creating adaptive layouts with Flutter

Maintainers

• Touré Holder