adaptive_layout 0.1.0

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 our live example app.

Table of contents

• Installing
  • 1. Depend on it
  • 2. Import it
• Usage
  • Screen-size buckets
  • Breakpoints
• Maintainers

Installing

1. Depend on it

Depend on this package as a dependency by running flutter pub add adaptive_layout.

This will install the package and add an entry to your package's pubspec.yaml file:

dependencies:
  adaptive_layout: ^0.1.0

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 screen-size bucket must have its layout defined by a widget. The constructor will throw an AssertionError if no layouts are defined.

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))

Breakpoints

The default definitions are:

• large screens are at least 1200dpi wide
• medium screens are at least 720dpi wide
• small screens are less thatn 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());
}

Maintainers

• Touré Holder