Flutter Question posted in
The official Flutter documentation can be found here.

Is this possible in Flutter (Android app)?

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)

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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)
    )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search