Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Flutter Widgets

How to use the Responsive Scaffold Package

June 25, 2020
in Flutter Widgets, Material Design
4 min read
responsive scaffold flutter

Here’s a powerful way of how you can use the Responsive Scaffold in Flutter. This package was designed by the flutter community team, as it allows Desktop, Tablet, and mobile view more flexible and responsive.

RELATED FLUTTER RESOURCES

A Contextual Action/App Bar Implementation for Flutter

A Flutter App for Tracking Funds/Money – Budget Tracker

How To Add a Backdrop in Flutter (Material Design)

How does Responsive Scaffold in Flutter work? On mobile, it simply shows the list and pushes to details, then on a tablet device it shows the List and the selected item, and for those who use the web app, It shows the full detail list both on the right and left. Here’s an example below.

ADVERTISEMENT

These Layouts follows the Material Design guideline.

You’ll notice that the red border line indicates the size of the scree, i.e Shows the Desktop mode, Tablet mode, and mobile mode. Isn’t that amazing? Yes, It is.

See Demo
View on GitHub

We’ll be showing the three types of example and ways you can use the ResponsiveScaffold to create a beautiful app that would look great on all platforms. Here are the list;

  • Responsive Layout
  • Responsive List
  • Multi-Column Layout

Responsive Layout

Here’s the code below, and usage.

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

void main() {
  runApp( new MaterialApp(
    debugShowCheckedModeBanner: false,
    home: 
    
    Homepage(),

  ));
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveScaffold(
      title: Text('Responsive Title'),
      //The left drawer
      drawer: ListView(
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.local_movies),
            title: Text('Movies'),
          ),
          ListTile(
            leading: Icon(Icons.dashboard),
            title: Text('Visit Dashboard'),
          ),
          ListTile(
            leading: Icon(Icons.refresh),
            title: Text('Refresh'),
          ),
          ListTile(
            leading: Icon(Icons.call),
            title: Text('Contact Us'),
          ),
        ],
      ),
      endIcon: Icons.filter_list,
      endDrawer: ListView(
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.email),
            title: Text('Our eMail'),
            subtitle: Text('See Us Here'),
            trailing: Switch(
              value: true,
              onChanged: (val) {},
            ),
          ),
          ListTile(
            leading: Icon(Icons.question_answer),
            title: Text('More Questions'),
            subtitle: Text('Ask Us anything you wants'),
          ),
          ListTile(
            title: Slider(
              value: 0.75,
              onChanged: (val) {},
            ),
          ),
          ListTile(
            leading: Icon(Icons.chrome_reader_mode),
            title: Text('Browse'),
            subtitle: Text('Visit us today'),
            trailing: Switch(
              value: false,
              onChanged: (val) {},
            ),
          ),
        ],
      ),
      trailing: IconButton(
        icon: Icon(Icons.search),
        onPressed: () {},
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        backgroundColor: Theme.of(context).accentColor,
        onPressed: () {}, label: Text("Responsive"),
      ),
    );
  }
}

Output/Result (Responsive Layout)

flutter responsive scaffold

Responsive List

  • On Tablet it will show a Master-Detail View.
  • You can add additional Slivers to the Scrollview and the AppBar is optional.
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(
            
            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!"),
            ));
          },
        ),
      ),
    );
  }
}

I hope you can use the ResponsiveScaffold package to create a better responsive application with Flutter.
I hope this helps you understand, and give a bit of knowledge about the Responsive Scaffold.

Have Any Flutter problem with no solution yet? Ask the FlutterFix community today.

Responsive Scaffold – On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item. Maintainer: @rodydavis
https://github.com/fluttercommunity/responsive_scaffold
23 forks.
222 stars.
19 open issues.
Recent commits:

  • Update README.md, Rody Davis
  • Update README.md, GitHub
  • Update main.yml, Rody Davis
  • Update README.md, Rody Davis
  • Update README.md, Rody Davis

RelatedFlutter Resource

A Contextual Action/App Bar Implementation for Flutter
App Bar

A Contextual Action/App Bar Implementation for Flutter

August 19, 2020
A Flutter App for Tracking Funds/Money – Budget Tracker
Finance App

A Flutter App for Tracking Funds/Money – Budget Tracker

August 17, 2020
backdrops flutter
Material Design

How To Add a Backdrop in Flutter (Material Design)

August 6, 2020
fLUTTER ListView builder seperated
Flutter Widgets

Understanding The Flutter ListView Widget

August 3, 2020
Code Editor Package Flutter
Dart

How To Build A Code Editor App In Flutter with code_editor Plugin

August 3, 2020
Flutter Form & FormField Widget - Implementation & Example
Flutter Packages

Flutter Form & FormField Widget – Implementation & Example

July 30, 2020
Next Post
flutter social share

Flutter Package to Share on Social Media

Different Ways to apply Gradient Colors In Flutter + App Bar

Different Ways to apply Gradient Colors In Flutter + App Bar

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

fLUTTER ListView builder seperated

Understanding The Flutter ListView Widget

August 3, 2020
An Analog & Digital Display World Clock App + Source Code

An Analog & Digital Display World Clock App + Source Code

August 8, 2020
Flutter Yutube Downloading App

A Cool YouTube Media Downloader App made with Flutter

August 16, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Form & FormField Widget – Implementation & Example

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In