Snackbar Demo with Delete using Flutter

May 07, 2022 . Admin



Hi friends,

This tutorial shows you Snackba Demo with Delete using Flutter. This article goes in detailed on How to dismiss previous snackbar flutter Code Example.This tutorial will give you simple example of Flutter: Remove all SnackBars.

we will help you to give example of dismiss previous snackbar flutter Code Example.you can see flutter button in snackbar Code Example. Display a snackbar.

I will give you simple Example of how to add textfield in alert dialog in flutter.

So, let's see bellow solution:

Step 1 : Create Flutter Project

Follow along with the setup, you will be creating an Flutter app.

$flutter create flutter_snack_bar_example   

Navigate to the project directory:

$cd flutter_snack_bar_example   
Step 2 : Main File

Create a main.dart file in the lib directory


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: MyHomePage(),
        );
    }
}

class MyHomePage extends StatefulWidget {
    @override
    _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
    var lists = List.generate(10, (index) => "List No : $index");
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Flutter Snack Bar Demo With Delete'),
        ),
        body: ListView.builder(
            itemCount: lists.length,
            itemBuilder: (context, index) {
                return ListTile(
                    title: Text(lists[index]),
                    trailing: Container(
                        width: 60,
                        child: FlatButton(
                            child: Icon(
                                Icons.delete,
                                color: Colors.grey,
                            ),
                            onPressed: () {
                                showSnackBar(context, index);
                            },
                        ),
                    ),
                );
            },
        ),
    );
}

void showSnackBar(BuildContext context, int index) {
    var deletedRecord = lists[index];
    setState (() {
        lists.removeAt(index);
    });
    SnackBar snackBar = SnackBar(
        content: Text('Deleted $deletedRecord'),
        action: SnackBarAction(
            label: "UNDO",
            onPressed: () {
                setState (() {
                    lists.insert(index, deletedRecord);
                });
            },
        ),
    );
    Scaffold.of(context).showSnackBar(snackBar);
    }
}
Step 3 : Run this Debug App Output
I hope it will help you....
#Flutter