DEV Community

Cover image for How to create Snackbar using the GetX?
Kuldeep Tarapara
Kuldeep Tarapara

Posted on • Originally published at flutteragency.com

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,
);
Enter fullscreen mode Exit fullscreen mode

}
}

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,
);
},
),
),
);
}
}
Output: Click On The Link And See The Output

https://i2.wp.com/flutteragency.com/wp-content/uploads/2021/12/Capture-3.png?w=342&ssl=1

Conclusion:
Hope you have enjoyed reading this article. So, in this article, we have been through how to create Snackbar using the GetX library. Do let us know your feedback/comments on the same.

We have highly talented Flutter App Developers who will help you in your project. Also, Flutter Agency is a portal full of excellent resources like Flutter Widget Guide, Flutter Projects, Code libs, etc. So, contact us for your next project.

Discussion (0)