What is the best way to lay custom made bottom nav bar over the pages in flutter?-CodePudding

I have background blurring bottom nav bar, and I want to overlay it on top of my pages(screens). If I keep it in bottomNavigationBar: the screen area gets reduced and I cant find a way to implement to have scrolling feature on my screens.

I have come with a 'not so pretty' way to do so. my code:

            ...
              //scaffold body
              body: Stack(
              alignment: Alignment.center,
              children: [
                Container(
                  color: Colors.transparent,
                  width: size.width,
                  height: size.height,
                ), 
                screens[...],

                // 2nd stack
                Stack(
                  children: [
                    Positioned(
                      bottom: 0,

                      // from here bottom nav bar code
                      child: Row(
                        children: [
                          SizedBox(
                            width: size.width,
                            height: size.height / 10,
                            child: Stack(
                              children: [
                                Container(
                                  alignment: Alignment.center,
                                  child: ClipRRect(
                                    child: BackdropFilter(
                                      filter: ImageFilter.blur(
                                          sigmaX: 15, sigmaY: 15),
                                      child: Container(
                                        decoration: BoxDecoration(
                                          color: Theme.of(context).brightness ==
                                                  Brightness.light
                                              ? const Color.fromRGBO(
                                                  184, 99, 99, 0.28)
                                              : const Color.fromRGBO(
                                                  255, 255, 255, 0.05),
                                          border: Border(
                                            top: BorderSide(
                                              width: 1,
                                              color: Theme.of(context)
                                                          .brightness !=
                                                      Brightness.light
                                                  ? Colors.white
                                                      .withOpacity(0.2)
                                                  : Colors.pink
                                                      .withOpacity(0.2),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),

Can anyone help me with a neater way, so that I get that glass blur effect on my nav bar?

and also about the scrolling?

CodePudding user response：

For the 'glass blur' effect, I'd go with the glassmorphism package. Although it will probably be a bit tricky to apply it to a bottom nav bar, this is likely your best bet.

The scrolling issue is likely due to your use of a ListView / CustomScrollView widget inside of the Stack. Take a look at this. You must place the scroll view in a Positioned.fill() widget.

Or, you can refactor your use of the bottom nav bar, place it in the Scaffold, & then remove the stack(s) entirely.