I was designing a music app, and for the bottom navigation bar, I wanted it to look like in the image. It is a linear gradient blur, but I don’t know how to achieve this. Is this possible using Flutter?
Example of what I want to do
(I tried searching in Google, but I found nothing)
Emilio Yael Ruiz Sánchez is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I would suggest taking a look at the docs. I know I know, the answer everyone always gives. But, here is the nav bar that I would use for a flutter project, and you could modify it with CSS so that the gradient is transparent and looks similar.
Try below code for blur background
body:Stack(
children: [
Container(
// Background Gradient
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.red, Colors.red],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
),
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0),
child: Container(
color: Colors.black
.withOpacity(0.5), // optional
),
),
],
),
bottomNavigationBar: Container(
color: Colors.transparent, // Make the container transparent
child: BottomNavigationBar(//your bottomNavigationBar code)
)