How to Change the Opacity of the SnackBar In Flutter?

· 4 min read
How to Change the Opacity of the SnackBar In Flutter
How to Change the Opacity of the SnackBar In Flutter

SnackBar Widget is a Flutter widget to show a lightweight simple message at the bottom of the device screen. It can also contain an optional action. So in this article, We will go through how to change the Opacity of the Snackbar In Flutter?

What is Opacity Widgets?

The Opacity widgets are generally used to make their child partially transparent. So how its work? This widget colors the class into intermedia buffer, and the scene is partially transparent with the merger of child back. The class needs to intermediate buffer the coloring child; therefore, it consumes a little more time. The syntax for the constructor is as follows.

Syntax:
Opacity({Key key,
@required double opacity, 
bool alwaysIncludeSemantics: false, 
Widget child})

Change the Opacity of the Snackbar In Flutter?

To change the Opacity Widget of the SnackBar Widget in Flutter, users can try using the color property of the snack bar like this.

backgroundColor: Colors.black.withOpacity(0.5)

You can adjust the opacity of your backgroundColor with

color.withAlpha(..)
color.withOpacity(..)
using a hexadecimal integer 0x33ffffff (the first pair of digits after the x represents the alpha value),
creating a Color using Color.fromARGB(...)

You can find information about this on this documentation page about the Color class.

  • This is easily adjustable using the Opacity Widget.
  • In your Snackbar just surround your actual content with an Opacity Widget:
    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(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: const MyHomePage(title: 'Flutter Agency - Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      const MyHomePage({Key? key, required this.title}) : super(key: key);
      final String title;
    
      @override
      State createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State {
      int _counter = 0;
    
      void _incrementCounter() {
        setState(
          () {
            _counter++;
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('SnakeBar Output= $_counter'),
                backgroundColor: Colors.black.withOpacity(0.5),
                duration: const Duration(seconds: 1),
              ),
            );
          },
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        );
      }
    }

Output

SnackBar Widget in Flutter
SnackBar Widget in Flutter

Conclusion:

In this article, We have been through How to Change the Opacity of the SnackBar In Flutter?

Keep Learning !!! Keep Fluttering !!!

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

Leave a Reply