Material Design RESPONSIVE SCAFFOLD for Flutter 1

responsive scaffold

on mobile it shows a list and pushes to details and on tablet it shows the list and the selected item.

getting started

3 column layout

example

responsive layout

follows material design layout docs.

here is a demo on various sizes.

example

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

class layoutexample extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return responsivescaffold(
      title: text('responsive layout example'),
      drawer: listview(
        children: <widget>[
          listtile(
            leading: icon(icons.settings),
            title: text('settings page'),
          ),
          listtile(
            leading: icon(icons.info),
            title: text('info page'),
          ),
          listtile(
            leading: icon(icons.library_books),
            title: text('library page'),
          ),
          listtile(
            leading: icon(icons.help),
            title: text('help page'),
          ),
        ],
      ),
      endicon: icons.filter_list,
      enddrawer: listview(
        children: <widget>[
          listtile(
            leading: icon(icons.filter_list),
            title: text('filter list'),
            subtitle: text('hide and show items'),
            trailing: switch(
              value: true,
              onchanged: (val) {},
            ),
          ),
          listtile(
            leading: icon(icons.image_aspect_ratio),
            title: text('size settings'),
            subtitle: text('change size of images'),
          ),
          listtile(
            title: slider(
              value: 0.5,
              onchanged: (val) {},
            ),
          ),
          listtile(
            leading: icon(icons.sort_by_alpha),
            title: text('sort list'),
            subtitle: text('change layout behavior'),
            trailing: switch(
              value: false,
              onchanged: (val) {},
            ),
          ),
        ],
      ),
      trailing: iconbutton(
        icon: icon(icons.search),
        onpressed: () {},
      ),
      body: center(
        child: raisedbutton(
          child: text('close'),
          onpressed: () {
            navigator.pop(context);
          },
        ),
      ),
      floatingactionbutton: floatingactionbutton(
        child: icon(icons.add),
        backgroundcolor: theme.of(context).accentcolor,
        onpressed: () {},
      ),
    );
  }
}

responsive list

• you can use this in two modes responsivelistscaffold and responsivelistscaffold.builder.
• on mobile the listview will push to the details screen

• on tablet it will show a master detail view.
• you can add additional slivers to the scrollview and the appbar is optional.

example

import 'package:flutter/material.dart';

import 'package:responsive_scaffold/responsive_scaffold.dart';

void main() => runapp(myapp());

class myapp extends statefulwidget {
  @override
  _myappstate createstate() => _myappstate();
}

class _myappstate extends state<myapp> {
  var _scaffoldkey = new globalkey<scaffoldstate>();

  @override
  widget build(buildcontext context) {
    return materialapp(
      home: responsivelistscaffold.builder(
        scaffoldkey: _scaffoldkey,
        detailbuilder: (buildcontext context, int index, bool tablet) {
          return detailsscreen(
            // appbar: appbar(
            //   elevation: 0.0,
            //   title: text("details"),
            //   actions: [
            //     iconbutton(
            //       icon: icon(icons.share),
            //       onpressed: () {},
            //     ),
            //     iconbutton(
            //       icon: icon(icons.delete),
            //       onpressed: () {
            //         if (!tablet) navigator.of(context).pop();
            //       },
            //     ),
            //   ],
            // ),
            body: scaffold(
              appbar: appbar(
                elevation: 0.0,
                title: text("details"),
                automaticallyimplyleading: !tablet,
                actions: [
                  iconbutton(
                    icon: icon(icons.share),
                    onpressed: () {},
                  ),
                  iconbutton(
                    icon: icon(icons.delete),
                    onpressed: () {
                      if (!tablet) navigator.of(context).pop();
                    },
                  ),
                ],
              ),
              bottomnavigationbar: bottomappbar(
                elevation: 0.0,
                child: container(
                  child: iconbutton(
                    icon: icon(icons.share),
                    onpressed: () {},
                  ),
                ),
              ),
              body: container(
                child: center(
                  child: text("item: $index"),
                ),
              ),
            ),
          );
        },
        nullitems: center(child: circularprogressindicator()),
        emptyitems: center(child: text("no items found")),
        slivers: <widget>[
          sliverappbar(
            title: text("app bar"),
          ),
        ],
        itemcount: 100,
        itembuilder: (buildcontext context, int index) {
          return listtile(
            leading: text(index.tostring()),
          );
        },
        bottomnavigationbar: bottomappbar(
          elevation: 0.0,
          child: container(
            child: iconbutton(
              icon: icon(icons.share),
              onpressed: () {},
            ),
          ),
        ),
        floatingactionbutton: floatingactionbutton(
          child: icon(icons.add),
          onpressed: () {
            _scaffoldkey.currentstate.showsnackbar(snackbar(
              content: text("snackbar!"),
            ));
          },
        ),
      ),
    );
  }
}