In this tutorial, we’ll learn how to properly change/customize Flutter snackbar color by using a practical Flutter code example.
Introduction: Flutter Snackbar Color
It specifies the background color of Flutter snackbar widget. Snackbar pops in from the bottom of screen and its used to deliver a notification or perform some action.
Let’s first see the default Flutter snackbar color. After that, we’ll change it using practical example for better understanding.
Default Flutter Snackbar Background Color
Below code specifies the code to implement Flutter snackbar widget.
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('This is a snackbar'),
));RaisedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('This is a snackbar'),
));
},
color: Colors.blue,
child: Text(
'Click here to see a Snackbar',
style: TextStyle(color: Colors.white),
),
)
Change Flutter Snackbar Color
In order to do that, we’ve to use the background color constructor of Flutter snackbar widget class. This constructor takes a color so let’s pass a blue color to it for demonstration. See below code:
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
backgroundColor: Colors.blue,
content: Text('This is a snackbar'),
));
Custom Flutter Snackbar Color Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: RaisedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
backgroundColor: Colors.blue, // custom snackbar background color
content: Text('This is a snackbar'),
));
},
color: Colors.blue,
child: Text(
'Click here to see a Snackbar',
style: TextStyle(color: Colors.white),
),
),
)));
}
}Conclusion
To conclude this tutorial, now you’ve a detailed practical knowledge of how to customize Flutter snackbar color. I’ll be very glad to receive your feedback on this post.
I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this article.
