Flutter Development (Day -08):

• All source code : Click Here. 
• In this post we are going to discuss more things which Flutter offers us to do in any app.
• This post will be taught about showing SnackBars , Material Drawer  , Card Widget, Swipe To Dismiss and finally how to write a concise code by using separate Functional Widgets and lot more will be soon...... 

 

Example here:

lib/main.dart:

 import 'package:flutter/material.dart';

class SwipeToDismissEx extends StatefulWidget {
  @override
  _SwipeToDismissExState createState() => _SwipeToDismissExState();
}

class _SwipeToDismissExState extends State<SwipeToDismissEx> {
// Automatically generate a list of 50 items.
  List _items = List.generate(50, (i) => i + 1);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
// Showing the Material Drawer
      drawer: _showDrawer(),
      appBar: AppBar(
        title: Text("UI Elements"),
        centerTitle: true,
        backgroundColor: Colors.teal,
      ),
      body: Center(
// Building the listview
        child: ListView.builder(
          itemCount: _items.length,
          itemBuilder: (context, int i) {
            return Padding(
              padding: const EdgeInsets.all(2.0),
// Wrap the content in the Dismissible widget for swiping to dismiss.
              child: Dismissible(
// prividing a key which is the index of the items.
                key: Key(_items[i].toString()),
// background is used to show what will happen when the user dismisses the item in the background.Here we are showing a red color in the background of the card.
                background: Container(
                  color: Colors.redAccent,
                ),
// Here the item will be removed at the index of the item and refreshes the screen by using setState()
                onDismissed: (dir) {
                  setState(() {
                    _items.removeAt(i);
                  });
// Displaying the snackbar when the items is dismissed from the list.
                  Scaffold.of(context).showSnackBar(
                    SnackBar(
                      content: Text("Item ${_items[i] - 1} is removed."),
                      backgroundColor: Colors.teal,
                    ),
                  );
                },
                resizeDuration: Duration(milliseconds: 800),
                child: Card(
                  elevation: 10.0,
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: ListTile(
                      leading: CircleAvatar(
                        child: Text("${_items[i]}"),
                      ),
                      title: Text(
                        "ITEM NUMBER - ${_items[i]}",
                        style: Theme.of(context).textTheme.title,
                      ),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

// MaterialDrawer funtion.
  Widget _showDrawer() {
    return Drawer(
      child: ListView(
        children: <Widget>[
// Used to show the name,useremail ,photo and the password in the header section.
          UserAccountsDrawerHeader(
            decoration: BoxDecoration(color: Colors.teal),
            accountEmail: Text("useremail@gmail.com"),
            accountName: Text("username"),
            currentAccountPicture: CircleAvatar(
              child: Text("U"),
            ),
          ),
// Shows the list items below the header.
          ListTile(
            title: Text("ITEM 1"),
            leading: Icon(Icons.inbox),
          ),
          ListTile(
            title: Text("ITEM 2"),
            leading: Icon(Icons.email),
          ),
          ListTile(
            title: Text("ITEM 3"),
            leading: Icon(Icons.pages),
          ),
        ],
      ),
    );
  }
}

Explanation:

• In Flutter, use the Drawer widget in combination with a Scaffold to create a layout with a Material Design drawer. This recipe uses the following steps:
• To add a drawer to the app, wrap it in a Scaffold widget.
• SnackBar are essential to get the user attention.
• The “swipe to dismiss” pattern is common in many mobile apps. For example, when writing an email app, you might want to allow a user to swipe away email messages to delete them from a list.
• Flutter makes this task easy by providing the Dismissible widget.
• For more info about Flutter and its Widgets Please visit here.    

Follow me on:

 Twitter  Github   LinkedIn