How to add floating action button and center and add animated sub menu in floating action button

Question

1. Here is two image on left side is OUTPUT from this package and bottom navigation bar

2. On Right side is my expected Output

Here is full Source Code

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

Main Code

class _HomeScreenState extends State<HomeScreen> {
  HomeCubit homeCubit = HomeCubit();
  int currentTab = 0;
  bool _isShowDial = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: const Text("Tewxt")
      ),
      body: Container(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: _getFloatingActionButton(),
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        notchMargin: 100,
        child: SizedBox(
          height: 60,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Material(
                child: Center(
                  child: InkWell(
                    focusColor: Colors.transparent,
                    hoverColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    onTap: () => setState(() => currentTab = 0),
                    child: const Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [Icon(Icons.home), Text("Home")],
                    ),
                  ),
                ),
              ),
              Material(
                child: Center(
                  child: InkWell(
                    focusColor: Colors.transparent,
                    hoverColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    onTap: () => setState(() => currentTab = 1),
                    child: const Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [Icon(Icons.group), Text("Groups")],
                    ),
                  ),
                ),
              ),
              SizedBox(width: MediaQuery.of(context).size.width / 5),
              Material(
                child: Center(
                  child: InkWell(
                    focusColor: Colors.transparent,
                    hoverColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    onTap: () => setState(() => currentTab = 2),
                    child: const Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [Icon(Icons.person), Text("Profile")],
                    ),
                  ),
                ),
              ),
              Material(
                child: Center(
                  child: InkWell(
                    focusColor: Colors.transparent,
                    hoverColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    onTap: () => setState(() => currentTab = 3),
                    child: const Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [Icon(Icons.person), Text("Perfil")],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

Here is the Floating Action Widget Code

  Widget _getFloatingActionButton() {
    return SpeedDialMenuButton(
      isShowSpeedDial: _isShowDial,
      updateSpeedDialStatus: (isShow) => _isShowDial = isShow,
      isMainFABMini: false,
      mainFABPosX: MediaQuery.of(context).size.width / 2 - 30,
      isEnableAnimation: true,
      isSpeedDialFABsMini: true,
      paddingBtwSpeedDialButton: 100.0,
      mainMenuFloatingActionButton: MainMenuFloatingActionButton(
        mini: false,
        child: const Icon(Icons.add),
        onPressed: () {},
        closeMenuChild: const Icon(Icons.close),
        closeMenuForegroundColor: Colors.white,
        closeMenuBackgroundColor: Colors.red,
      ),
      floatingActionButtonWidgetChildren: <FloatingActionButton>[
        FloatingActionButton(
          mini: true,
          onPressed: () {
            _isShowDial = false;
            setState(() {});
          },
          backgroundColor: Colors.pink,
          child: const Icon(Icons.volume_off),
        ),
        FloatingActionButton(
          mini: true,
          onPressed: () {
            _isShowDial = false;
            setState(() {});
          },
          backgroundColor: Colors.pink,
          child: const Icon(Icons.volume_off),
        ),
        FloatingActionButton(
          mini: true,
          onPressed: () {
            _isShowDial = false;
            setState(() {});
          },
          backgroundColor: Colors.pink,
          child: const Icon(Icons.volume_off),
        ),
        FloatingActionButton(
          mini: true,
          onPressed: () {
            _isShowDial = !_isShowDial;
            setState(() {});
          },
          backgroundColor: Colors.orange,
          child: const Icon(Icons.volume_down),
        ),
        FloatingActionButton(
          mini: true,
          onPressed: () {},
          backgroundColor: Colors.deepPurple,
          child: const Icon(Icons.volume_up),
        ),
      ],
    );
  }
}

i need right side image output and to implement this i use (this flutter arc package) can any one help for this ?