responsive_scaffold 1.3.0+2

  • Readme
  • Changelog
  • Example
  • Installing
  • 93

Flutter Community: responsive_scaffold

Buy Me A Coffee Donate pub package

responsive_scaffold #

View the online demo here!

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

Online Demo: https://fluttercommunity.github.io/responsive_scaffold/

Getting Started #

3 Column Layout #

example

Responsive Layout #

Follows Material Design Layout Docs.

md-layout

Here is a demo on various sizes.

image image image image image image

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

tablet push mobile

  • 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!"),
            ));
          },
        ),
      ),
    );
  }
}

1.3.0 #

  • Thanks to @DenisBarzanov for the PR #6
  • Added app elevation as a field
  • Removed the restrictions on the scaffold FAB, because they were limiting useful functions like scaling. (Changed the type of the button to be Widget, instead of FloatingActionButton
  • Updated Screenshots
  • Updated Example
  • Added Demo

1.2.0 #

  • Fixes #6
  • Remove sckrim color

1.1.1 #

  • Bump Version
  • Updated Info

1.1.0 #

1.0.0 - (BREAKING CHANGE) - [05.22.2019] #

  • Changing ResponsiveScaffold to Layout
  • Moved Responsive List to seperate Widget
  • Updating Example

0.3.0 - 04.06.2019 #

  • Updating Example to be desktop

0.2.1 #

  • Updating Example
  • Fixing SetState for Tablet View

0.2.0 #

  • Adding Back emptyItems and nullItems
  • Fixing Bug and Adding .custom option to specifity SliverChildDelagate
  • Updated Example

0.1.0 #

  • Removing noItems and nullItems

0.0.5 #

  • Added Mobile Navigator BuildContext navigatorContext

0.0.4 #

  • Aded Use rootNavigator

0.0.3 #

  • Fixing Version
  • Updating UI
  • Removing extendBody till next update
  • FAB now showing up in right place
  • Adding Scaffold Key
  • Updated Example

0.0.2 #

  • Adding Customizable Flex
  • Conditional Building

0.0.1 #

  • Adding Widgets

example/lib/main.dart

import 'dart:io';

import 'package:flutter/material.dart';

import 'package:flutter/foundation.dart';
import 'examples/index.dart';

/// main is entry point of Flutter application
void main() {
  // Desktop platforms aren't a valid platform.
  if (!kIsWeb) _setTargetPlatformForDesktop();
  return runApp(MyApp());
}

/// If the current platform is desktop, override the default platform to
/// a supported platform (iOS for macOS, Android for Linux and Windows).
/// Otherwise, do nothing.
void _setTargetPlatformForDesktop() {
  TargetPlatform targetPlatform;
  if (Platform.isMacOS) {
    targetPlatform = TargetPlatform.iOS;
  } else if (Platform.isLinux || Platform.isWindows) {
    targetPlatform = TargetPlatform.android;
  }
  if (targetPlatform != null) {
    debugDefaultTargetPlatformOverride = targetPlatform;
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(accentColor: Colors.red),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive Examples'),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text('Responsive List'),
            onTap: () => _goToScreen(context, ListExample()),
          ),
          ListTile(
            title: Text('Responsive Layout'),
            onTap: () => _goToScreen(context, LayoutExample()),
          ),
          ListTile(
            title: Text('Multi Column Layout'),
            onTap: () => _goToScreen(context, MultiColumnNavigationExample()),
          ),
        ],
      ),
    );
  }

  void _goToScreen(BuildContext context, Widget child) =>
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (_) => child),
      );
}

Use this package as a library

1. Depend on it

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


dependencies:
  responsive_scaffold: ^1.3.0+2

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:responsive_scaffold/responsive_scaffold.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
87
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
93
Learn more about scoring.

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

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Fix lib/templates/3-column/three_column_navigation.dart. (-1 points)

Analysis of lib/templates/3-column/three_column_navigation.dart reported 2 hints:

line 8 col 7: This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: ThreeColumnNavigation.sections

line 267 col 34: The value of the field '_scaffoldKey' isn't used.

Fix lib/templates/3-column/common/details.dart. (-0.50 points)

Analysis of lib/templates/3-column/common/details.dart reported 1 hint:

line 21 col 13: The value of the field '_listIndex' isn't used.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
flutter 0.0.0
scroll_to_index ^1.0.5 1.0.6
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test