How To Create Show Snackbar Using Flutter Android App

Posted By Bajarangi soft , Posted On 08-10-2020

SnackBar is a light weight message with Message Text and a Undo or Hide button shows at the bottom of screen. SnackBar is mainly used to notify the app user with some text executed on a particular task. SnackBar shows at the bottom of screen but we have to be sure that it cannot overlap the other widgets like Floating Action Button.

How To Create Show Snackbar Using Flutter Android App

Create Show Snackbar

Step 1: Create Show SnackBar Short Example

showSnackBar(BuildContext context){

  final snackBar = SnackBar(
    content: Text('Yay! Sending Message'),
    action: SnackBarAction(
      label: 'Undo',
      onPressed: () {
      },
    ),
  );
  Scaffold.of(context).showSnackBar(snackBar);
}
@override
Widget build(BuildContext context) {
  return Center(
    child: Container(
      padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
      child: RaisedButton(
        color: Colors.lightGreen,
        onPressed: () {showSnackBar(context);},
        child: Text('Onclick Of Show SnackBar'),
      ),
    ),
  );
}

Complete Code FOr Show Snackbar In Flutter
Main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.menu),
          centerTitle: true,
          backgroundColor: Colors.lightGreen,
          title: Text('SnackBar'),
          actions: [
            Padding(
              padding: const EdgeInsets.only(right:8.0),
              child: Icon(Icons.notifications_none),
            )
          ],
        ),
        body: SnackBarWidget(),
      ),
    );
  }
}

class SnackBarWidget extends StatelessWidget {

  showSnackBar(BuildContext context){

    final snackBar = SnackBar(
      content: Text('Yay! Sending Message'),
      action: SnackBarAction(
        label: 'Undo',
        onPressed: () {
        },
      ),
    );
    Scaffold.of(context).showSnackBar(snackBar);
  }
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
        child: RaisedButton(
          color: Colors.lightGreen,
          onPressed: () {showSnackBar(context);},
          child: Text('Onclick Of Show SnackBar'),
        ),
      ),
    );
  }
}