SnackBar using GetX in Flutter
Snackbars are UI elements that inform the user of an action that has been performed by an app or will perform in the future. They appear at the bottom of the screen temporarily. In this article, we will explore the SnackBar Using GetX in Flutter and will also implement and learn how to create Snackbar using the get package in your flutter applications.
Introduction:
When we need to show anything like instructions or messages after any event we can use Snackbar by using the GetX library in Flutter. We can easily create a snackbar using GetX without any need for context.
GetX is additional light and robust solution for Flutter. It joins elite performance state management, intelligent dependency injection, and route management rapidly and essentially.
To utilize Get.snackbar(), you need to call the constructor snackbar and for Get.showSnackbar(), you need to use GetSnackBar class.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec.yaml file.
dependencies:
flutter:
sdk: flutter
get: ^4.6.5Step 2: Import
import 'package:get/get.dart';Step 3: Install the dependencies
Run the below command in the root directory of your app to .
flutter pub getTo utilize GetX features in your flutter application, you have to replace the MaterialApp with GetMaterialApp. If you missed this then the GetX functionalities won’t work.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);@override
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
title: 'SnackBar Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const SnackBarDemo(title: 'SnackBar Using GetX'),
);
}
}
Let’s implements Get.snackbar() and Get.showSnackbar()
Now we are going to create a snackbar in snackbar_demo.dartand will implement both Get.snackbar() and Get.showSnackbar() in our flutter application. The class SnackBarDemowill contain two button to show Get.sncakbar() and Get.showSnackbar() respectively. For more understanding, I have first implemented both individually along with their most commonly used properties.
- Get.snackbar()
Properties that are mostly used for showing snackbar :
- title: used to show title to the user.
- message: used to display the message below the title.
- duration: decide the duration of the snackbar to show on screen, the default value is 3 seconds.
- backgroundColor: to give the background color to snackbar
- titleText: takes a widget and displays the title
- messageText: takes a widget and shows the message below the title.
Get.snackbar(
title,
"Display the message here",
colorText: Colors.white,
backgroundColor: Colors.lightBlue,
icon: const Icon(Icons.add_alert),
);
2. Get.showSnackbar()
This will use the GetSnackBar class to show snackbar
- title: used to show title to the user.
- message: used to display the message below the title.
- duration: decide the duration of the snackbar to show on screen and if not using this property the snackbar will be shown for an indefinite time.
- backgroundColor: to give the background color to snackbar
Get.showSnackbar(
GetSnackBar(
title: title,
message: 'User Registered Successfully',
icon: const Icon(Icons.refresh),
duration: const Duration(seconds: 3),
),
);
Source Code:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
title: 'SnackBar Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const SnackBarDemo(title: 'SnackBar Using GetX'),
);
}
}
class SnackBarDemo extends StatelessWidget {
const SnackBarDemo({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/dhiwise.png",
fit: BoxFit.fitHeight,
),
ElevatedButton(
child: const Text('Display SnackBar'),
style: ElevatedButton.styleFrom(
primary: Colors.blue,
onPrimary: Colors.white,
shadowColor: Colors.blueAccent,
textStyle: const TextStyle(
fontSize: 20,
),
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
),
onPressed: () {
Get.snackbar(
title,
"Display the message here",
colorText: Colors.white,
backgroundColor: Colors.lightBlue,
icon: const Icon(Icons.add_alert),
);
},
),
const SizedBox(
height: 20,
),
ElevatedButton(
child: const Text('Display showSnackBar'),
style: ElevatedButton.styleFrom(
primary: Colors.blue,
onPrimary: Colors.white,
shadowColor: Colors.blueAccent,
textStyle: const TextStyle(
fontSize: 20,
),
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
),
onPressed: () {
Get.showSnackbar(
GetSnackBar(
title: title,
message: 'User Registered Successfully',
icon: const Icon(Icons.refresh),
duration: const Duration(seconds: 3),
),
);
},
),
],
),
),
);
}
}Conclusion:
In this article, you have implemented and learned how to create Snackbar using the GetX library. Also had a look at some of the common properties, you can also use many other properties that are available to make your snackbar match your design.
Thanks for reading this article ❤.
Clap👏, If you liked the article. And mentions your views and suggestion for this topic in the comment. I would love to hear that. See you in the next one.
Read 📖 my other blogs:
About me:
I am a flutter developer at DhiWise — the World’s most intelligent platform to rapidly build enterprise-grade apps of Node.js, Kotlin, Flutter, iOS, and React code. You just have to integrate your design and set up additional actions and you are good to go with Production-Ready App. For building your application at DhiWise, jump in and try it for free.
