So i have this:

And i want to do this:

I Find out that i have 2 ways to do this.

• Cutting my circle widget on bottom by some pixels
• Hide circle widget behind bottomnavigationbar (preffered)

Well, i dont know how to implement code in any of these 2 ways.

CODE:

    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FittedBox(
          fit: BoxFit.scaleDown,
          child: Container(
              margin: const EdgeInsets.fromLTRB(0, 0, 0, 55),
              width: 80,
              height: 80,
              child: SizedBox(
                  height: 80,
                  child: SpeedDial(
                      foregroundColor: Colors.white,
                      overlayColor: Colors.white10,
                      elevation: 0,
                      backgroundColor: const Color.fromARGB(255, 105, 30, 0),
                      childrenButtonSize: (const Size.square(100)),
                      direction: SpeedDialDirection.left,
                      child: const Icon(
                        Icons.add,
                        size: 48,
                      ),
                      children: [
                        SpeedDialChild(
                            backgroundColor:
                                const Color.fromARGB(190, 105, 30, 1),
                            child: const Icon(
                              Icons.ac_unit_sharp,
                              size: 40,
                            ))
                      ])))),
      bottomNavigationBar: Container(
        decoration: const BoxDecoration(
            border: Border(top: BorderSide(color: Colors.white, width: 2))),
        child: BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: 'Znajomi',
                backgroundColor: Color.fromARGB(190, 105, 30, 1),
              ),
              BottomNavigationBarItem(
                icon: FaIcon(FontAwesomeIcons.map),
                label: 'Mapa',
                backgroundColor: Color.fromARGB(210, 105, 30, 1),
              ),
              BottomNavigationBarItem(
                icon: FaIcon(FontAwesomeIcons.crown),
                label: 'Ranking',
                backgroundColor: Color.fromARGB(190, 105, 30, 1),
              ),
            ],
            type: BottomNavigationBarType.shifting,
            currentIndex: _selectedIndex,
            selectedItemColor: Colors.black,
            unselectedItemColor: Colors.white,
            showSelectedLabels: false,
            iconSize: 38,
            onTap: _onItemTap,
            elevation: 0),
      ),
    );

CodePudding user response：

You can use the

CodePudding user response：

Simple Search about the Stack widget, that will help you.