Flutter - Vertically Center Both Icons and Labels in Bottom NavigationBar

Question

I want to vertically align bottom navigation bar icons and also labels to center unlike default BottomNavigationBarItem where the label is vertically under the Icon. Here is my effort so far:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {

  const MyHomePage({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
      bottomNavigationBar: Container(
        margin: const EdgeInsets.only(
          bottom: 15.0,
          left: 10.0,
          right: 10.0,
        ),
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(30),
            topLeft: Radius.circular(30),
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.black38,
              spreadRadius: 0,
              blurRadius: 10,
            ),
          ],
        ),
        child: ClipRRect(
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(30.0),
            topRight: Radius.circular(30.0),
            bottomLeft: Radius.circular(30.0),
            bottomRight: Radius.circular(30.0),
          ),
          child: BottomNavigationBar(
            backgroundColor: Colors.black,
            fixedColor: Colors.white,
            unselectedItemColor: Colors.white,
            unselectedFontSize: 14,
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.home_outlined,
                  color: Colors.white,
                  size: 28.0,
                ),
                label: 'Home',
              ),
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.shopping_bag_outlined,
                  color: Colors.white,
                  size: 28.0,
                ),
                label: 'Cart',
              ),
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.person_outline,
                  color: Colors.white,
                  size: 28.0,
                ),
                label: 'Profile',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Yeah. The intention is a bit unclear. As far as the reproducible code concerns, the `NavigationItem` is already centered nicely. Maybe he wants the labels to be also vertically centered, side-by-side with `Icon`, not under. — saw, Nov 19 '22 at 05:50

score 0 · Answer 1 · answered Nov 19 '22 at 06:20

As saw mentioned , you might want this format, Use Row and follow the structure for others item.

showSelectedLabels: false,
showUnselectedLabels: false,
items: <BottomNavigationBarItem>[
  BottomNavigationBarItem(
    icon: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(
          Icons.home_outlined,
          color: Colors.white,
          size: 28.0,
        ),
        Text(
          "Home",
          style: TextStyle(color: Colors.white),
        )
      ],
    ),
    label: 'Home',
  ),

Flutter - Vertically Center Both Icons and Labels in Bottom NavigationBar

1 Answers1