Flutter - Creating Snackbar Using GetX Library - GeeksforGeeks

14 May, 2021
Sometimes, it’s very useful to show the message when a certain action takes place in our app. Let’s suppose, we have a list of items and we want to delete any item from the list then after deleting those items, some message should be displayed to inform the user that the item has been deleted. If we want to undo the action then we can simply do and show the snackbar with some message. Generally, when we create snackbar, then it uses context for creating snackbar, and also syntax is not so easy. To overcome this problem, we can create Snackbar using GetX with just simple code without using any context. 
Follow the below steps to create snackbar using GetX:
Create a new flutter application with the below command:
flutter create APP_NAME
Add get package to pubspec.yaml file:
Import get package in main.dart file:
import 'package:get/get.dart';
For creating an app, use GetMaterialApp instead of MaterialApp because we are using GetX library.
After the creation of the app, create a button in the center.
After that, create Snackbar using Get.snackbar(title, message);
Provide the title and message to the snackbar.
We can add some extra beauty to this snackbar like background color, text color, snackbar duration, snackbarPosition, onTap() property, etc.
main.dart file:
Dart
import 'package:flutter/material.dart';import 'package:get/get.dart';  void main() {  runApp(MyApp());}  class MyApp extends StatelessWidget {      // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return GetMaterialApp(      title: 'Scaffold demo',      theme: ThemeData(                  primarySwatch: Colors.blue,      ),      home: MyHomePage(),      debugShowCheckedModeBanner: false,    );  }}  class MyHomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('GeeksforGeeks Scaffold'),        centerTitle: true,        backgroundColor: Colors.green,      ),      body: Center(        child: ElevatedButton(          child: Text('Open Snackbar'),          onPressed: (){            Get.snackbar(              "GeeksforGeeks",               "Hello everyone",               icon: Icon(Icons.person, color: Colors.white),               snackPosition: SnackPosition.BOTTOM,                                );          },        ),      ),    );  }}
Output:
Get.snackbar(
              "GeeksforGeeks",
               "Hello everyone",
               icon: Icon(Icons.person, color: Colors.white),
               snackPosition: SnackPosition.BOTTOM,
               backgroundColor: Colors.green,
               );
If we run our app with the above properties then the output will be:
Get.snackbar(
              "GeeksforGeeks",
               "Hello everyone",
               icon: Icon(Icons.person, color: Colors.white),
               snackPosition: SnackPosition.BOTTOM,
               backgroundColor: Colors.green,
               borderRadius: 20,
               margin: EdgeInsets.all(15),
               colorText: Colors.white,
               duration: Duration(seconds: 4),
               isDismissible: true,
               dismissDirection: SnackDismissDirection.HORIZONTAL,
               forwardAnimationCurve: Curves.easeOutBack,

               );
If we run with the above properties, the output will be:
Flutter UI-components
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - Dialogs
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - Dialogs