Flutter – Creating Snackbar Using GetX Library

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: