0

I want my floatingActionButton to stay like this when using persistentFooterButtons

enter image description here

If I add persistentFooterButtons, it becomes like this, but I want it lower and docked

enter image description here

This is the stateful widget with the bottom bar:

class Main extends StatefulWidget {
  const Main({Key? key}) : super(key: key);

  @override
  State<Main> createState() => _MainState();
}

class _MainState extends State<Main> {
  int selectedIndex = 0;
  static User user = FirebaseAuth.instance.currentUser!;
  final screens = [
    const Home(),
    const Search(),
    const Library(),
    Account(user: user),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      persistentFooterButtons: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: const [
            IconButton(
              iconSize: 35,
              icon: Icon(Icons.play_arrow),
              onPressed: null,
            ),
            Text("Some data over hereSome data "),
            IconButton(
              icon: Icon(Icons.favorite),
              onPressed: null,
            )
          ],
        )
      ],
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const FittedBox(child: PlayButton()),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      resizeToAvoidBottomInset: false,
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        notchMargin: 5,
        color: Colors.red,
        child: BottomNavigationBar(
          backgroundColor: Colors.transparent,
          type: BottomNavigationBarType.fixed,
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(
                IconlyLight.home,
                color: Colors.white,
              ),
              activeIcon: Icon(
                IconlyBold.home,
                color: Colors.white,
                shadows: [
                  BoxShadow(
                    blurRadius: 30,
                    color: Colors.white,
                  ),
                ],
              ),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(
                IconlyLight.search,
                color: Colors.white,
              ),
              activeIcon: Icon(
                IconlyBold.search,
                color: Colors.white,
                shadows: [
                  BoxShadow(
                    blurRadius: 30,
                    color: Colors.white,
                  ),
                ],
              ),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Iconsax.music_library_2,
                color: Colors.white,
              ),
              activeIcon: Icon(
                Iconsax.music_library_25,
                color: Colors.white,
                shadows: [
                  BoxShadow(
                    blurRadius: 30,
                    color: Colors.white,
                  ),
                ],
              ),
              label: 'Library',
            ),
            BottomNavigationBarItem(
              icon: Icon(
                IconlyLight.profile,
                color: Colors.white,
              ),
              activeIcon: Icon(
                IconlyBold.profile,
                color: Colors.white,
                shadows: [
                  BoxShadow(
                    blurRadius: 30,
                    color: Colors.white,
                  ),
                ],
              ),
              label: 'Account',
            ),
          ],
          currentIndex: selectedIndex,
          unselectedItemColor: Colors.white,
          selectedItemColor: Colors.white,
          onTap: (index) => setState(() => selectedIndex = index),
        ),
      ),
      body: IndexedStack(
        index: selectedIndex,
        children: screens,
      ),
    );
  }
}

The key elements are

persistentFooterButtons: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: const [
            IconButton(
              iconSize: 35,
              icon: Icon(Icons.play_arrow),
              onPressed: null,
            ),
            Text("Some data over hereSome data "),
            IconButton(
              icon: Icon(Icons.favorite),
              onPressed: null,
            )
          ],
        )
      ],
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const FittedBox(child: PlayButton()),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
anon
  • 43
  • 1
  • 7

1 Answers1

1

I ended up pushing the FAB down using a Stack with Positioned

floatingActionButton: Stack(
  alignment: Alignment.bottomCenter,
  clipBehavior: Clip.none,
  children: [
    Positioned(
      bottom: 5,
      child: FloatingActionButton(
        onPressed: () {},
      ),
    ),
  ],
),
anon
  • 43
  • 1
  • 7