Skip to main content

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:

Comments

Post a Comment

Popular posts from this blog

Flutter Development (Day-00): This is the First Post from this Blog.This blog will tell you about Flutter.If you don't know about it then the upcoming posts will explain you everything.This is 30 day tutorial which explains about Flutter for absolute beginners. prerequsites:  If you are enthusiastic and Curious. All source code :  Click Here . If you are following this tutorial / blog please leave your opinion 👀 / say Hii ✋/ Your e-mail in the comment section that I can improve myself and it will gives boost for me to do more tutorials. If you have any doubts feel free to ask me in the comment section or email me ramubugudi4@gmail.com I can definetly give reply. Follow me on:   Twitter   Github     LinkedIn
5 comments
Read more
Flutter Development (Day-11): In the last post we have discussed about how to implement brand new Todo application. All source code :  Click Here . Building its User Interface. How to display the data. How to remove the items from the List by tapping the Delete Icon or by Swiping it. Showing which item is deleted in the form of SnackBar. And finally modify some UI stuff. If you want to copy the exact same code  click here . List _todos = []; First of all create a empty list which will be holding all of our Todo's. When we tap on the ADD button we have to perfom some operation see below.   _validateForm() {if (_key.currentState.validate()) {setState(() {_todos.add(_controller.text);});_controller.clear();Navigator.of(context).pop();}} Here we have used setState () in order to refresh every single time of changing the data in the TextField and then we add the text to _todos list. Then we clear the data in the TextField and go back to ho...
2 comments
Read more
Flutter Development (Day-13): In this post we are going to talk about basic animations in Flutter First we start the animation by creating two objects Animation animation, AnimationController animationController. Animation lets us deal with different types of animations like Tween. The tween is something in which you specify the input output range. Here begin is set to -1 and end is 0.0 which means the animation happens from out of the screen to the center of the screen. or rather, from the left most edge to the center of the app. We are also doing an ease in animation, so we specify the curve as fast out slow in. In the initState we provide the animation because the animation should occur when user launches the app.    void initState() {      super.initState();      animationController = AnimationController(        vsync: this,        duration: Duration(       ...
Post a Comment
Read more