The Diffrence Betwen MaterialApp and GetMaterialApp
Flutter – Creating Snackbar Using GetX Library
GetMaterialApp is Provided By Getx Library It is
actually a widget that uses MaterialApp as Its Child, since Getx is not only State management we can perform Route Management, and Dependency Injection using Getx. In your Project, if you want to do only State Management, you are not required to Return GetMaterialApp instead of MaterialApp you can use only MaterialApp But in your project if you want to perform Route Management, means if you want to display the SnakBar, Dialog, or Bottomshhet without using the Context then you need to use GetMaterialApp,
Generally, when we create a snack bar, then it uses context for creating a 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.
here I will display SnackBar without Context, and also I want to perform route management and Dependency injection using Getx, that is why I am Using GetMaterialApp instead of MatarialApp in the Build method.
Generally, when we create a snack bar, then it uses context for creating a 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.
here I will display SnackBar without Context, and also I want to perform route management and Dependency injection using Getx, that is why I am Using GetMaterialApp instead of MatarialApp in the Build method.
import 'package: flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_navigation/get_navigation.dart';
void main() {
runApp(
SnackBar(),
);
}
class SnackBar extends StatefulWidget {
SnackBar({Key? key}) : super(key: key);
@override
State<SnackBar> createState() => _SnackBarState();
}
class _SnackBarState extends State<SnackBar> {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: "GetX Tutorials",
home: Scaffold(
appBar: AppBar(
title: Text("Getx"),
),
body: Column(
children: [
ElevatedButton(
onPressed: () {
Get.snackbar(
"this is snackbar",
"Snackbar Using Getx Librery",
);
},
child: const Text("showsnackBar"),
)
],
),
),
);
}
}
We Created a simple Snackbar
using Getx in the above code now let us create a Snackbar with all their
properties using Getz Follow the below steps to create Snackbar using GetX:
1; Add get the package to pubspec.yaml file:
1; Add get the package to pubspec.yaml file:
For
creating an app using Getx, use GetMaterialApp instead of MaterialApp because
we are using the GetX library for not only State management we are using it for
route management and dependency injection. you can
perform State management without using GetMaterialApp (by using MaterialApp) but route management
is not possible
- After the creation of the app, create a button in the center. with On pressed functionality in which pressing the Button Displays our Getx Snakbar
- 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.
Here
is a list of all Snackbar properties,
1 snackPosition: SnackPosition.Boootm- This
Property uses to change The Position of Snackbar, like snackPosition:
SnackPosition.Boootm, or snackPosition: SnackPosition.Top,
Get.snackbar(
"this is snackbar", //this is The Defult Snacbar title
"Snackbar Using Getx Librery",
snackPosition: SnackPosition.BOTTOM, //you can use snackPostion.Bottom or snackpostion.Top
// snackPosition: SnackPosition.TOP,
);
2, titleText: this property is used to
Specify the title of the Snackbar and it overrides The default Snackbar title text,
Get.snackbar(
"this is snackbar", //this is The Defult Snacbar title
"Snackbar Using Getx Librery",
snackPosition: SnackPosition.BOTTOM,
titleText: const Text( //this title text overide the Default Text Above
"this is snackbar title",
style: TextStyle(color: Colors.blue, fontSize: 20),
)
);
3 messageText: This property is
used to specify the message text of the Snackbar this property overrides the
default message text property of the Snackbar.
Get.snackbar(
"this is snackbar", //this is The Defult Snacbar title
"Snackbar Using Getx Librery",
snackPosition: SnackPosition.BOTTOM,
titleText: const Text( //this title text overide the Default Text Above
"this is snackbar title",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
messageText: const Text( //this message overides the
//defaukt message text above
"this is message text",
style: TextStyle(color: Colors.blue, fontSize: 20),
)
);
4: colorText: use this property to specify or change the color of the title text and message text
Get.snackbar(
"this is snackbar", //this is The Defult Snacbar title
"Snackbar Using Getx Librery",
snackPosition: SnackPosition.BOTTOM,
titleText: const Text(
//this title text overide the Default Text Above
"this is snackbar title",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
messageText: const Text(
//this message overides the
//defaukt message text above
"this is message text",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
colorText: Colors.red, //used to chnage color of text
);
5: backgroundColor: use this property to change
the background color of the Snackbar
Get.snackbar(
"this is snackbar", //this is The Defult Snacbar title
"Snackbar Using Getx Librery",
snackPosition: SnackPosition.BOTTOM,
titleText: const Text(
//this title text overide the Default Text Above
"this is snackbar title",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
messageText: const Text(
//this message overides the
//defaukt message text above
"this is message text",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
colorText: Colors.red, //used to chnage color of text
backgroundColor: Colors.black,
);
6: borderRadius: Use this property to add border-radius to Snackbar
Get.snackbar(
"this is snackbar", //this is The Defult Snacbar title
"Snackbar Using Getx Librery",
snackPosition: SnackPosition.BOTTOM,
titleText: const Text(
//this title text overide the Default Text Above
"this is snackbar title",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
messageText: const Text(
//this message overides the
//defaukt message text above
"this is message text",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
colorText: Colors.red, //used to chnage color of text
backgroundColor: Colors.black,
borderRadius: 30,
);
7:Margin: use this property to add margin to our Snackbar
Get.snackbar(
"this is snackbar", //this is The Defult Snacbar title
"Snackbar Using Getx Librery",
snackPosition: SnackPosition.BOTTOM,
titleText: const Text(
//this title text overide the Default Text Above
"this is snackbar title",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
messageText: const Text(
//this message overides the
//defaukt message text above
"this is message text",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
colorText: Colors.red, //used to chnage color of text
backgroundColor: Colors.black,
borderRadius: 30,
margin: EdgeInsets.all(10),
);
8: Maxwidth: use Maxwidth- property to add Maximum width to Snackbar
Get.snackbar(
"this is snackbar", //this is The Defult Snacbar title
"Snackbar Using Getx Librery",
snackPosition: SnackPosition.BOTTOM,
titleText: const Text(
//this title text overide the Default Text Above
"this is snackbar title",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
messageText: const Text(
//this message overides the
//defaukt message text above
"this is message text",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
colorText: Colors.red, //used to chnage color of text
backgroundColor: Colors.black,
borderRadius: 30,
margin: EdgeInsets.all(10),
maxWidth: 100,
);
9: animation-duration: use this property to add the Duration to Snackbar.
Get.snackbar(
"this is snackbar", //this is The Defult Snacbar title
"Snackbar Using Getx Librery",
snackPosition: SnackPosition.BOTTOM,
titleText: const Text(
//this title text overide the Default Text Above
"this is snackbar title",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
messageText: const Text(
//this message overides the
//defaukt message text above
"this is message text",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
colorText: Colors.red, //used to chnage color of text
backgroundColor: Colors.black,
borderRadius: 30,
margin: EdgeInsets.all(10),
maxWidth: 100,
animationDuration: Duration(microseconds: 200),
);
10: background gradient: you can use Linear
Gradient as a background gradient of Snackbar. if you specify background
Gradient BackgroundColors do not have any effect. which means background
gradient overrides Background Color Properties
Get.snackbar(
"this is snackbar", //this is The Defult Snacbar title
"Snackbar Using Getx Librery",
snackPosition: SnackPosition.BOTTOM,
titleText: const Text(
//this title text overide the Default Text Above
"this is snackbar title",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
messageText: const Text(
//this message overides the
//defaukt message text above
"this is message text",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
colorText: Colors.red, //used to chnage color of text
backgroundColor: Colors.black,
borderRadius: 30,
margin: EdgeInsets.all(10),
maxWidth: 100,
animationDuration: Duration(microseconds: 200),
backgroundGradient: LinearGradient(colors: [Colors.red,Colors.black]),
);
11: border-color and Border width: whenEver you use
borderColor you must specify the Border width also otherwise you got an
error
borderColor: Colors.green,
borderWidth: 12,
12: BoxShadow- This property is used to create a shadow for our Snackbar.
Get.snackbar(
"this is snackbar", //this is The Defult Snacbar title
"Snackbar Using Getx Librery",
snackPosition: SnackPosition.BOTTOM,
titleText: const Text(
//this title text overide the Default Text Above
"this is snackbar title",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
messageText: const Text(
//this message overides the
//defaukt message text above
"this is message text",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
colorText: Colors.red, //used to chnage color of text
backgroundColor: Colors.black,
borderRadius: 30,
margin: EdgeInsets.all(10),
maxWidth: 100,
animationDuration: Duration(microseconds: 200),
backgroundGradient: LinearGradient(colors: [Colors.red,Colors.black]),
borderColor: Colors.green,
borderWidth: 12,
boxShadows: [
const BoxShadow(
color: Colors.pink,
offset: Offset(30,30),
blurRadius: 10,
spreadRadius: 8,
)
]
);
13: is dismissable and DismissDirection: You can
add Dismiss properties to Snackbar, in order to make it dismissable to the
specified Directions, like this isDismissible: true, dismissDirection: DismissDirection.horizontal
Get.snackbar(
"this is snackbar", //this is The Defult Snacbar title
"Snackbar Using Getx Librery",
snackPosition: SnackPosition.BOTTOM,
titleText: const Text(
//this title text overide the Default Text Above
"this is snackbar title",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
messageText: const Text(
//this message overides the
//defaukt message text above
"this is message text",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
colorText: Colors.red, //used to chnage color of text
backgroundColor: Colors.black,
borderRadius: 30,
margin: EdgeInsets.all(10),
maxWidth: 100,
animationDuration: Duration(microseconds: 200),
backgroundGradient: LinearGradient(colors: [Colors.red,Colors.black]),
borderColor: Colors.green,
borderWidth: 12,
boxShadows: [
const BoxShadow(
color: Colors.pink,
offset: Offset(30,30),
blurRadius: 10,
spreadRadius: 8,
)
],
isDismissible: true,
dismissDirection: DismissDirection.horizontal
);
14: forwardAnimationCurve: you can add animation
to Snackbar using forwardAnimationCurve and add Duration to decide how much
second Snackbar waits.
Get.snackbar(
"this is snackbar", //this is The Defult Snacbar title
"Snackbar Using Getx Librery",
snackPosition: SnackPosition.BOTTOM,
titleText: const Text(
//this title text overide the Default Text Above
"this is snackbar title",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
messageText: const Text(
//this message overides the
//defaukt message text above
"this is message text",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
colorText: Colors.red, //used to chnage color of text
backgroundColor: Colors.black,
borderRadius: 30,
margin: EdgeInsets.all(10),
maxWidth: 100,
animationDuration: Duration(microseconds: 200),
backgroundGradient: LinearGradient(colors: [Colors.red,Colors.black]),
borderColor: Colors.green,
borderWidth: 12,
boxShadows: [
const BoxShadow(
color: Colors.pink,
offset: Offset(30,30),
blurRadius: 10,
spreadRadius: 8,
)
],
isDismissible: true,
dismissDirection: DismissDirection.horizontal,
forwardAnimationCurve: Curves.bounceIn,
duration: Duration(microseconds: 100),
);
15: Icon and Mian Button: you can add Icon and
TextButton as a leading and trailing of Snackbar;
Get.snackbar(
"this is snackbar", //this is The Defult Snacbar title
"Snackbar Using Getx Librery",
snackPosition: SnackPosition.BOTTOM,
titleText: const Text(
//this title text overide the Default Text Above
"this is snackbar title",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
messageText: const Text(
//this message overides the
//defaukt message text above
"this is message text",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
colorText: Colors.red, //used to chnage color of text
backgroundColor: Colors.black,
borderRadius: 30,
margin: EdgeInsets.all(10),
maxWidth: 100,
animationDuration: Duration(microseconds: 200),
backgroundGradient: LinearGradient(colors: [Colors.red,Colors.black]),
borderColor: Colors.green,
borderWidth: 12,
boxShadows: [
const BoxShadow(
color: Colors.pink,
offset: Offset(30,30),
blurRadius: 10,
spreadRadius: 8,
)
],
isDismissible: true,
dismissDirection: DismissDirection.horizontal,
forwardAnimationCurve: Curves.bounceIn,
duration: Duration(microseconds: 100),
icon: const Icon(
Icons.send, color: Colors.white, ),
shouldIconPulse: false,
mainButton: TextButton(onPressed: (){}, child: const Text("data")),
//icon and mainButton is used to add icob and Button to snack Bar
);
16: onTab: Snackbar has onTab properties that we can use to handle when we pressed the Snackbar.
Get.snackbar(
"this is snackbar", //this is The Defult Snacbar title
"Snackbar Using Getx Librery",
snackPosition: SnackPosition.BOTTOM,
titleText: const Text(
//this title text overide the Default Text Above
"this is snackbar title",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
messageText: const Text(
//this message overides the
//defaukt message text above
"this is message text",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
colorText: Colors.red, //used to chnage color of text
backgroundColor: Colors.black,
borderRadius: 30,
margin: EdgeInsets.all(10),
maxWidth: 100,
animationDuration: Duration(microseconds: 200),
backgroundGradient: LinearGradient(colors: [Colors.red,Colors.black]),
borderColor: Colors.green,
borderWidth: 12,
boxShadows: [
const BoxShadow(
color: Colors.pink,
offset: Offset(30,30),
blurRadius: 10,
spreadRadius: 8,
)
],
isDismissible: true,
dismissDirection: DismissDirection.horizontal,
forwardAnimationCurve: Curves.bounceIn,
duration: Duration(microseconds: 100),
icon: const Icon(
Icons.send, color: Colors.white, ),
shouldIconPulse: false,
mainButton: TextButton(onPressed: (){}, child: const Text("data")),
onTap: (Value){
print("Snackbar is Tabbed");
}
);
Here is a full source code of Snackbar Using Getx Library, or watch the video Here
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_navigation/get_navigation.dart';
void main() {
runApp(
SnackBar(),
);
}
class SnackBar extends StatefulWidget {
SnackBar({Key? key}) : super(key: key);
@override
State<SnackBar> createState() => _SnackBarState();
}
class _SnackBarState extends State<SnackBar> {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: "GetX Tutorials",
home: Scaffold(
appBar: AppBar(
title: Text("Getx"),
),
body: Column(
children: [
ElevatedButton(
onPressed: () {
Get.snackbar(
"this is snackbar", //this is The Defult Snacbar title
"Snackbar Using Getx Librery",
snackPosition: SnackPosition.BOTTOM,
titleText: const Text(
//this title text overide the Default Text Above
"this is snackbar title",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
messageText: const Text(
//this message overides the
//defaukt message text above
"this is message text",
style: TextStyle(color: Colors.blue, fontSize: 20),
),
colorText: Colors.red, //used to chnage color of text
backgroundColor: Colors.black,
borderRadius: 30,
margin: EdgeInsets.all(10),
maxWidth: 100,
animationDuration: Duration(microseconds: 200),
backgroundGradient:
LinearGradient(colors: [Colors.red, Colors.black]),
borderColor: Colors.green,
borderWidth: 12,
boxShadows: [
const BoxShadow(
color: Colors.pink,
offset: Offset(30, 30),
blurRadius: 10,
spreadRadius: 8,
)
],
isDismissible: true,
dismissDirection: DismissDirection.horizontal,
forwardAnimationCurve: Curves.bounceIn,
duration: Duration(microseconds: 100),
icon: const Icon(
Icons.send,
color: Colors.white,
),
shouldIconPulse: false,
mainButton:
TextButton(onPressed: () {}, child: const Text("data")),
onTap: (Value) {
print("Snackbar is Tabbed");
});
},
child: const Text("showsnackBar"),
)
],
),
),
);
}
}
Leave a Comment