super_layout_builder 0.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 58

Super Layout Builder #

Check it out at Pub.Dev

The best way to create responsive layouts for dynamic screen sizes.

*Note: This library was designed for the web version of the flutter, since web pages, unlike cell phone applications, can be resized several times in a row by the user.

SuperLayoutBuilder #

ezgif com-video-to-gif

LayoutBuilder #

ezgif com-video-to-gif (1)

Getting Started #

The implementation is very simple, just call the widget passing your other widget as a child.

  triggerWidth: [ // Pass list of sizes to compare
  triggerHeight: [
  builder: (c, MediaQueryData m) => MyWidget(),

Triggers #

When passing values ​​to the list of triggers, when the screen is resized, it will be checked if the new screen size is smaller or larger than one of the list sizes, thus only redoing the screen when it hits a specific point, preventing the screen be redone for each modified px. From the return of MediaQueryData, you can for example compare if the current screen size is already feasible to use a drawer as in the example at the beginning.

Help Maintenance #

I've been maintaining quite many repos these days and burning out slowly. If you could help me cheer up, buying me a cup of coffee will make my life really happy and get much energy out of it.

Buy Me A Coffee

[0.1.0] - TODO: Add release date. #


import 'package:flutter/material.dart';
import 'package:super_layout_builder/super_layout_builder.dart';

// ignore: must_be_immutable
class Home extends StatelessWidget {
  int built = 0;

  Widget customDrawer() {
    return Flexible(
      flex: 1,
      child: Container(
        child: ListView(
          children: [
                color: Colors.blueAccent,
                child: ListTile(
                  leading: Icon(Icons.home),
                  selected: true,
                  title: Text('Home', style: TextStyle(color: Colors.white)),
                  onTap: () {},

  Widget build(BuildContext context) {
    return SuperLayoutBuilder(
      triggerWidth: [850],
      triggerHeight: [500],
      builder: (c, m) => Scaffold(
        drawer: m.size.width <= 850 ? customDrawer() : null,
        appBar: AppBar(
          elevation: 0,
          title: Text('Home'),
        body: Column(
          children: <Widget>[
              child: Row(
                children: <Widget>[
                  m.size.width <= 850 ? Container() : customDrawer(),
                    flex: 4,
                    child: Container(
                      child: Text('Times built: $built',
                          style: TextStyle(fontSize: 32)),

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  super_layout_builder: ^0.1.0

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:super_layout_builder/super_layout_builder.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jul 11, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart


  • super_layout_builder that is a package requiring null.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
bloc_pattern ^2.5.1 2.5.1
flutter 0.0.0
rxdart ^0.24.0 0.24.1
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies