Create BottomNavigationBar with FAB in the middle

Question

In Flutter, I can only show or hide labels depending on selecting the item or unselecting it. Previously in Flutter, label used to be a widget taking Text so I could change text size using style parameter in text widget. Now label is just a string so I cannot change text size.

I want to always show all the labels with a FloatingActionButton in the middle with no label at all as previewed in the image.

PS. This is not a preview this is a picture taken from UI made by a designer

Answer 1

Use a Stack widget to overlap the FloatingActionButton on the BottomNavigationBar.

Preview:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
      bottomNavigationBar: Stack(
        children: [
          BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            currentIndex: _currentIndex,
            onTap: _onItemTapped,
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.search),
                label: 'Search',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.add_box_outlined),
                label: '',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.favorite),
                label: 'Favorites',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: 'Profile',
              ),
            ],
          ),
          Positioned(
            bottom: 4,
            // Adjust this value to position the FAB vertically
            left: MediaQuery.of(context).size.width / 2 - 50,
            // Adjust this value to position the FAB horizontally
            child: Material(
              elevation: 6.0,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(24.0)),
              clipBehavior: Clip.antiAlias,
              child: InkWell(
                onTap: () {
                  // Add your FAB action here
                },
                child: Container(
                  width: 80, // Adjust the width of the rectangular FAB
                  height: 48, // Adjust the height of the rectangular FAB
                  color: Color.fromARGB(255, 241, 164, 48),
                  child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text('Add'),
                        Icon(Icons.add, size: 32),
                      ]),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}