Flutter get bottom navigation bar height

by

Flutter Get Bottom Navigation Bar Height

In Flutter, the bottom navigation bar height can be obtained using the following steps:

  1. Wrap the bottom navigation bar inside a widget such as a MediaQuery.
  2. Use the MediaQuery to retrieve the size information and extract the height of the bottom navigation bar.

Example:

Assume we have a bottom navigation bar widget called MyBottomNavigationBar:


import 'package:flutter/material.dart';

class MyBottomNavigationBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          label: 'Business',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.school),
          label: 'School',
        ),
      ],
    );
  }
}

You can get the height of the bottom navigation bar by wrapping it inside a MediaQuery widget and accessing the size information:


import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(
              child: Placeholder(),
            ),
          ),
          MediaQuery.of(context).padding.bottom != 0
              ? Container(
                  height: MediaQuery.of(context).size.height *
                      0.07,
                  child: MyBottomNavigationBar(),
                )
              : Container(),
        ],
      ),
    );
  }
}

In this example, the MyHomePage widget contains a Column with two children:

  1. The first child is an Expanded container that represents the main content of the page.
  2. The second child checks if the bottom padding of the media query is not equal to zero (indicating the presence of a soft navigation bar), and if so, it includes the MyBottomNavigationBar widget wrapped inside a container with a height calculated based on a percentage of the screen height. If the bottom padding is zero, an empty container is shown.

By using MediaQuery.of(context).size.height with a percentage value such as 0.07, you can adjust the height of the bottom navigation bar to be relative to the screen height.

Leave a comment