How to create Snackbar using the GetX?

Snackbar is a widget that shows a message informing the user when actions happen. So, in this article, we will see how to create Snackbar using the GetX library.

How to create Snackbar using the GetX library?

It can be very useful to display a message when a particular action occurs in your app. Suppose you have a list of items and you want to remove or add items from the list. When you delete or add these items, you will see a message. The message will inform the user that the item has been deleted or added.

If you want to undo the action, just show the snack bar with the message. In general, when creating a snack bar, the context for creating the snack bar is used and the syntax is not very simple. To solve this problem, you can use simple code to create a snack bar with GetX without using context. To implement a snack bar, follow these steps:

• First, you have to create a new flutter appl with the command given below:

flutter create APP_NAME

• After that, you need to add get package to pubspec.yaml file.
• Import get package in main.dart file:

import 'package:get/get.dart';

• To create an app, you can use GetMaterialApp instead of MaterialApp. We did this because we will be using GetX library in the app.
• After you create the app, you will have to create a button in the center.
• Later, you have to create Snackbar using Get.snackbar(title, message);
• After creating Snackbar Provide you have to provide the title and message to the snackbar.

Example:

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('Flutter Agency'),
        centerTitle: true,
        backgroundColor: Colors.red,
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Open Snackbar'),
          onPressed: () {
            Get.snackbar(
              "Welcome to Flutter Agency",
              "We are expert in FLutter App Development",
              icon: Icon(Icons.person, color: Colors.white),
              snackPosition: SnackPosition.BOTTOM,
            );
          },
        ),
      ),
    );
  }
}