Flutter Widget | 05 | How to Display a SnackBar in Flutter | Global, ReUsable

Here is the video tutorial

Code

 main.dart

import 'package:flutter/material.dart';

import 'snackbar.dart';

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

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

title: 'Flutter Demo',

theme: ThemeData(

primaryColor: Color(0xFF832685),

primaryColorLight: Color(0xFFC81379),

accentColor: Colors.black,

),

home: MyHomePage(),

);

}

}

class MyHomePage extends StatefulWidget {

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

String title = 'SnackBar';

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(title),

centerTitle: true,

),

body: Builder(

builder: (context) => Center(

child: RaisedButton(

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(18.0),

side: BorderSide(color: Colors.purple),

),

color: Colors.purple,

textColor: Colors.white,

onPressed: () {

GlobalSnackBar.show(context, 'Your Message');

},

child: Text(

'Show SnackBar',

style: TextStyle(fontSize: 18),

),

),

),

));

}

}

 snackbar.dart

import 'package:flutter/material.dart';

class GlobalSnackBar {

final String msg;

const GlobalSnackBar({

@required this.msg,

});

static show(

BuildContext context,

String msg,

) {

Scaffold.of(context).showSnackBar(SnackBar(

elevation: 0.0,

behavior: SnackBarBehavior.fixed,

content: Text(msg),

duration: Duration(seconds: 50),

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.only(

topLeft: Radius.circular(16.0), topRight: Radius.circular(16.0))),

action: SnackBarAction(

textColor: Colors.white,

label: 'OK',

onPressed: () {},

),

));

}

}