如何在flutter中更改snackbar的不透明度？

Question

I wish to change the opacity of the SnackBar. It has only the background property. Can it be customized or I have to create the custom widget for snack bar?

Answer 1

Try using the color property of snack bar like this,

  backgroundColor: Colors.black.withOpacity(0.5)

This should work as you expected.

Answer 2

You can adjust the opactiy 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(...)

• or by using Color.fromRGBO(...) .

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

Now, you face the following problem : Your content is not yet translucent.

This is easily adjustable using the Opcacity Widget.

In your Snackbar just surround your actual content with an Opacity Widget:

SnackBar(backgroundColor: Color(0x66bbbbbb),
  content: Opacity(opacity: .7,
                    child: Container(), // your content
  ),
)

Answer 3

If you are planning to make the background transparent, this may help you. Mostly you get a black background because of elevation.

SnackBar(
  elevation: 0,
  backgroundColor: Colors.transparent,
  /....... 
),