How to Create Awesome SnackBar Notifications
SnackBar notifications are a popular way to display flash messages or alerts to users in Flutter applications. In this post, we will explore how to create awesome SnackBar notifications using a package. We will start by setting up a basic application that displays a normal SnackBar, then we will install the package and modify our code to use the features provided by the package. Finally, we will customize the appearance of our SnackBar notifications and explore the use of MaterialBanners for displaying messages at the top of the screen.
1. Creating our starting application
To begin, let us set up our main.dart file with a simple application that displays a SnackBar when a button is clicked. This will serve as the foundation of our application:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Awesome SnackBar Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Awesome SnackBar Demo'),
),
body: Center(
child: ElevatedButton(
child: const Text('Awesome SnackBar'),
onPressed: () => ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
backgroundColor: Colors.red,
behavior: SnackBarBehavior.floating,
content: Text('Normal SnackBar message'),
),
),
),
),
);
}
}
In this code snippet, we set up a basic Flutter application with a MyApp widget that serves as the entry point for the application. Inside the MyApp widget, we define a MyHomePage widget, which is the main screen of our application. The MyHomePage widget displays an AppBar and a centered ElevatedButton. When the button is pressed, the onPressed callback shows a SnackBar using the ScaffoldMessenger.of(context).showSnackBar function, passing a SnackBar widget as the content.
As you can see when we press the button we have a normal SnackBar with a red background color and floating behavior.
2. Using the package
To show awesome SnackBar widgets we will install the awesome_snackbar_content package. Execute the following command in your project directory to add the package: flutter pub add awesome_snackbar_content.
After executing the command, the dependencies in your pubspec.yaml file will be updated as follows:
dependencies:
awesome_snackbar_content: ^0.1.3
flutter:
sdk: flutter
To ensure that our project can access the package, run flutter pub get in the terminal.
Now that we have installed the package, let us import it into our main.dart file and update the content of the SnackBar:
import 'package:flutter/material.dart';
import 'package:awesome_snackbar_content/awesome_snackbar_content.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Awesome SnackBar Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Awesome SnackBar Demo'),
),
body: Center(
child: ElevatedButton(
child: const Text('Awesome SnackBar'),
onPressed: () => ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
elevation: 0,
backgroundColor: Colors.transparent,
behavior: SnackBarBehavior.floating,
content: AwesomeSnackbarContent(
title: 'Awesome SnackbBar!',
message:
'This message will be shown in the body of the snackbar',
contentType: ContentType.failure,
),
),
),
),
),
);
}
}
In this updated code, we import the awesome_snackbar_content package and replace the content property of the SnackBar widget with an AwesomeSnackbarContent widget from the package. We set the title and message properties of AwesomeSnackbarContent to customize the content of the SnackBar. Additionally, we set the contentType to ContentType.failure to apply the failure style.
Also, take note that we have changed the backgroundColor property to Colors.transparent and added the elevation property which is set to 0. These two properties with their set values and the behavior property which is set to SnackBarBehavior.floating are recommended by the package to get the best effects.
As you can see the visual appearance of our SnackBar message changed a lot. In my opinion, it looks very appealing and modern!
3. Customization
The awesome_snackbar_content package provides different styles for SnackBar notifications. In the previous example, we used the failure style. The other styles are success, help and warning.
We can also further customize our SnackBar by changing the properties of the SnackBar widget. For example, we can change the dismissDirection property to control how the SnackBar can be dismissed:
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.orange),
child: const Text('Awesome SnackBar'),
onPressed: () => ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
elevation: 0,
backgroundColor: Colors.transparent,
behavior: SnackBarBehavior.floating,
dismissDirection: DismissDirection.down,
content: AwesomeSnackbarContent(
title: 'Awesome SnackbBar!',
message:
'This message will be shown in the body of the snackbar',
contentType: ContentType.warning,
),
),
),
),
In this code snippet, we modify the ElevatedButton widget to have an orange background color using ElevatedButton.styleFrom. We also added the dismissDirection property of the SnackBar widget and set it to DismissDirection.down, allowing the SnackBar to be dismissed by swiping down. Additionally, we change the contentType of the AwesomeSnackbarContent widget to ContentType.warning, applying the warning style to the SnackBar.
In the GIF below I created two additional buttons to also show the other styles.
Like the failure style the other styles are amazing as well! And now you know how easy it is to change between the different styles. Other than that the package also supports MaterialBanners which makes our flash messages appear on top, let me show you how to use them.
4. Display the messages on top using MaterialBanner
In addition to SnackBar notifications, Flutter provides the MaterialBanner widget, which is used to display important messages at the top of the screen. The cool thing is that awesome_snackbar_content package also supports them. Let us make some changes to our code to useMaterialBanner:
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.cyan),
child: const Text('Awesome SnackBar'),
onPressed: () => ScaffoldMessenger.of(context).showMaterialBanner(
MaterialBanner(
actions: const [SizedBox.shrink()],
elevation: 0,
backgroundColor: Colors.transparent,
forceActionsBelow: true,
content: AwesomeSnackbarContent(
title: 'Awesome SnackbBar!',
color: Colors.cyan,
message:
'This message will be shown in the body of the snackbar',
contentType: ContentType.warning,
inMaterialBanner: true,
),
),
),
),
We replace the showSnackBar function with the showMaterialBanner function to display a MaterialBanner instead of a SnackBar. Inside the MaterialBanner widget, we specify the actions property and set it to [SizedBox.shrink()]. The forceActionsBelow property is set to true to ensure that actions, if any, are placed below the content.
Additionally, we set the inMaterialBanner property of the AwesomeSnackbarContent widget to true, ensuring the content is styled specifically for the MaterialBanner. Furthermore, I have added the color property to the AwesomeSnackbarContent widget to showcase the ability to customize the color of the styles.
As you can see, we are now displaying a flash message at the top of our screen using the MaterialBanner widget. With the awesome_snackbar_content package, there is no visual difference between using a MaterialBanner and a SnackBar. However, there are some functional differences to consider.
Firstly, the MaterialBanner does not have a duration property like the SnackBar. This means that the MaterialBanner will remain visible until the user manually dismisses it by clicking the close icon.
Secondly, in the GIF above, you can observe that the widgets below the MaterialBanner (in this case, just a single widget) are being pushed down. To avoid this behavior, we can modify the properties of the MaterialBanner as follows:
MaterialBanner(
actions: const [SizedBox.shrink()],
elevation: 1,
backgroundColor: Colors.transparent,
shadowColor: Colors.transparent,
forceActionsBelow: true,
content: AwesomeSnackbarContent(
title: 'Awesome SnackbBar!',
color: Colors.cyan,
message:
'This message will be shown in the body of the snackbar',
contentType: ContentType.warning,
inMaterialBanner: true,
),
),
In this code snippet, we set the elevation property to 1 and set shadowColor to Colors.transparent to remove the shadow that will be visible because we changed the recommended elevation of 0 to 1.
By making these changes, we can ensure that the widgets below the MaterialBanner do not get pushed down, providing a better user experience.
5. Conclusion
In this post, we learned how to create awesome SnackBar notifications in Flutter using the awesome_snackbar_content package. We started with a basic application, installed the package, and then customized the appearance of the SnackBar notifications. We also explored the use of MaterialBanner to display messages at the top of the screen. By using these techniques, you can enhance the user experience of your Flutter applications with visually appealing and informative notifications.
