How To Easily Change Flutter Snackbar Color – Flutter Widget Guide

flutter snackbar color

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'),
          ));
Let’s use this code in Flutter raised button onPressed function. So whenever we click that button, a snackbar would appear at the bottom. See below code:
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),
        ),
      )
flutter snackbar widget default background color
We’ve clicked the raised button and snackbar appears on the screen. So this is the default background color of Flutter snackbar widget. Let’s now see how to customize it.

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'),
          ));
flutter snackbar color
As you can see in the above image that the background color of snackbar is now changed to blue. So this is how you can easily customize Flutter snackbar color in your own code as well.
Click here if you want to learn more about Flutter snackbar widget.
The complete source code of snackbar with custom background color is available in the next section.

Custom Flutter Snackbar Color Source Code

flutter snackbar color

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.

Leave a Comment

Your email address will not be published.