Overlaying a button on the BottomBar without it clipping

[dugganl1]

Hi there - would it be possible to add support for the below please?

I'm trying to create a floating button over the bar, but it appears to be clipping the content and Clip.none is not resolving it.

This is what I'm trying to achieve (Figma design):

But at the moment it's clipping the button like below. The clipBehavior: Clip.none, attribute doesn't seem to be taking effect.

Please advise on how best to tackle this? Added code below.

body: Stack(
              alignment: Alignment.bottomCenter,
              clipBehavior:
                  Clip.none, //! this doesn't seem to be doing anything
              children: [
                BottomBar(
                  child: Stack(
                    alignment: Alignment.topCenter,
                    clipBehavior: Clip.none,
                    children: [
                      TabBar(
                        indicatorPadding:
                            const EdgeInsets.fromLTRB(6.0, 0.0, 6.0, 0.0),
                        controller: tabController,
                        indicator: UnderlineTabIndicator(
                          borderSide: BorderSide(
                            color: Colors.orange,
                            width: 4,
                          ),
                          insets: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 8.0),
                        ),
                        tabs: [
                          SizedBox(
                            height: 62,
                            child: Center(
                              child: Container(
                                padding:
                                    EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
                                child: Column(
                                  children: [
                                    Icon(
                                      Icons.explore,
                                      color: currentPage == 0
                                          ? Colors.indigo[900]
                                          : unselectedColor,
                                    ),
                                    Text(
                                      'Discover',
                                      style: TextStyle(
                                        fontSize: 12.0,
                                        color: currentPage == 0
                                            ? Colors.indigo[900]
                                            : unselectedColor,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                          SizedBox(
                            height: 62,
                            child: Center(
                              child: Container(
                                padding:
                                    EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 10.0),
                                child: Column(
                                  children: [
                                    Icon(
                                      Icons.person,
                                      color: currentPage == 1
                                          ? Colors.indigo[900]
                                          : unselectedColor,
                                    ),
                                    Text(
                                      'Profile',
                                      style: TextStyle(
                                        fontSize: 12.0,
                                        color: currentPage == 1
                                            ? Colors.indigo[900]
                                            : unselectedColor,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      Positioned(
                        top: -20,
                        child: Container(
                          alignment: Alignment.topCenter,
                          child: ElevatedButton(
                            onPressed: () {},
                            child: Icon(
                              Icons.add,
                              color: Colors.white,
                              size: 35.0,
                            ),
                            style: ElevatedButton.styleFrom(
                              shape: CircleBorder(),
                              padding: EdgeInsets.all(10.0),
                              primary: Colors.orange,
                              elevation: 1.0,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  fit: StackFit.expand,
                  icon: Center(
                    child: IconButton(
                        padding: EdgeInsets.zero,
                        onPressed: null,
                        icon: Icon(
                          Icons.arrow_upward_rounded,
                          color: unselectedColor,
                        )),
                  ),
                  borderRadius: BorderRadius.circular(500),
                  duration: Duration(seconds: 1),
                  curve: Curves.decelerate,
                  showIcon: true,
                  width: MediaQuery.of(context).size.width * 0.8,
                  barColor: Colors.white,
                  start: 1,
                  end: 0,
                  bottom: 15, //This seems a bit dodgy... Keep an eye
                  alignment: Alignment.bottomCenter,
                  iconHeight: 45.0,
                  iconWidth: 45.0,
                  reverse: false,
                  scrollOpposite: false,
                  onBottomBarHidden: () {},
                  onBottomBarShown: () {},
                  body: (context, controller) => TabBarView(
                    controller: tabController,
                    dragStartBehavior: DragStartBehavior.down,
                    physics: const BouncingScrollPhysics(),
                    children: [
                      // ! The number of children here must equal the number of tabs specified above
                      Discover(),
                      Profile(),
                    ],
                  ),
                ),
                // Container(
                //   margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 45.0),
                //   child: ElevatedButton(
                //     onPressed: () {},
                //     child: Icon(
                //       Icons.add,
                //       color: Colors.white,
                //       size: 35.0,
                //     ),
                //     style: ElevatedButton.styleFrom(
                //       shape: CircleBorder(),
                //       padding: EdgeInsets.all(10.0),
                //       primary: Colors.orange,
                //       elevation: 1.0,
                //     ),
                //   ),
                // ),
              ],
            ),

[codenameakshay]

Have fixed this. Now please add the following property to your BottomBar widget along with the code you write. Also, update to the latest v1.1.0, for this property to be visible.

 BottomBar(
          clip: Clip.none,
 ...