BottomNavigationBar overflowing in flutter

Question

This is my code. Bottom navigation Bar overflowing by 12 and 26 pixels to be precise. Any Solutions?** Tried Every way. I also created my custom Bottom Navigation Bar widget and placed it below the Expanded widget. I'm getting the same error(Overflowing value is different). Now, I'm using a flutter package called ScrollBottomNavigationBar.

import 'package:flutter/material.dart';
import 'package:justchat/components/bottom_navigation_bar.dart';
import 'package:justchat/components/input_box.dart';
import 'package:justchat/constants.dart';
import 'package:justchat/screens/login_screen.dart';
import 'package:scroll_bottom_navigation_bar/scroll_bottom_navigation_bar.dart';

class HomeScreen extends StatelessWidget {
  final controller = ScrollController();
  final items = <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(
        Icons.home,
        size: 10,
      ),
      label: ("Home"),
    ),
    BottomNavigationBarItem(
      icon: Icon(
        Icons.settings,
      ),
      label: ("Settings"),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: ClipRRect(
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(30),
          topLeft: Radius.circular(30),
        ),
        child: Wrap(
          children: [
            ScrollBottomNavigationBar(
              controller: controller,
              items: items,
            ),
          ],
        ),
      ),
      body: SafeArea(
        // bottom: false,
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Padding(
                  padding: const EdgeInsets.only(
                    top: 20.0,
                    left: 30.0,
                  ),
                  child: Container(
                    child: Text(
                      "Message",
                      style: kLargeTextStyle,
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(
                    top: 20,
                    right: 22,
                  ),
                  child: Container(
                    height: 50,
                    width: 50,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100),
                      color: kActiveSecondaryColor,
                    ),
                    child: Icon(
                      Icons.person,
                      color: kTabsColor,
                    ),
                  ),
                ),
              ],
            ),
            Stack(
              children: [
                InputBox(
                  padding: EdgeInsets.only(
                    left: 25,
                    right: 25,
                    top: 30,
                  ),
                  hintText: "Find your friends?",
                ),
                Padding(
                  padding: EdgeInsets.only(
                    top: 40.0,
                    right: 30.0,
                  ),
                  child: GestureDetector(
                    onTap: () {
                      print("Search button Pressed");
                    }, //Functionality
                    child: Container(
                      alignment: Alignment.centerRight,
                      child: Icon(
                        Icons.search,
                        size: 40,
                        color: kChatscreenSecondaryColor,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 50,
            ),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  color: kTabsColor,
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(40),
                    topLeft: Radius.circular(40),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

This seems like an issue with ScrollBottomNavigationBar. If you apply a smaller Font Size and Icon Size, it will work.

ScrollBottomNavigationBar(
              controller: controller,
              items: items,
              iconSize: 8,// ADD THIS
              selectedFontSize: 4,// ADD THIS
            )

So this is an issue with ScrollBottomNavigationBar implementation.

Answer 2

I think there is something wrong with the ScrollBottomNavigationBar package that you are using. Because I copied your code and turned it into simple BottomNavigationBar and it is working fine.

Two things which you can try:

• Try giving heights in your widget tree using MediaQuery.of(context)size.height * <some multiple>.e.g. height: MediaQuery.of(context).size.height * 0.2
• Wrap your Column with SingleChildScrollView

Below is the code & Screen which I edited from yours:

class HomeScreen extends StatelessWidget {
  final controller = ScrollController();
  final items = <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(
        Icons.home,
        // size: 10,
      ),
      label: ("Home"),
    ),
    BottomNavigationBarItem(
      icon: Icon(
        Icons.settings,
      ),
      label: ("Settings"),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: items,
      ),
      body: SafeArea(
        // bottom: false,
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Padding(
                  padding: const EdgeInsets.only(
                    top: 20.0,
                    left: 30.0,
                  ),
                  child: Container(
                    child: Text(
                      "Message",
                      style: TextStyle(fontSize: 32),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(
                    top: 20,
                    right: 22,
                  ),
                  child: Container(
                    height: 50,
                    width: 50,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100),
                      // color: kActiveSecondaryColor,
                    ),
                    child: Icon(
                      Icons.person,
                      color: Colors.purple,
                      size: 50,
                    ),
                  ),
                ),
              ],
            ),
            Stack(
              children: [
                Padding(
                  padding: EdgeInsets.fromLTRB(10, 25, 0, 0),
                  child: Container(
                    padding: EdgeInsets.all(10.0),
                    width: 380,
                    height: 70,
                    color: Colors.grey[200],
                    child: Text(
                      "Find you Friends?",
                      style: TextStyle(fontSize: 30),
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(
                    top: 40.0,
                    right: 30.0,
                  ),
                  child: GestureDetector(
                    onTap: () {
                      print("Search button Pressed");
                    }, //Functionality
                    child: Container(
                      alignment: Alignment.centerRight,
                      child: Icon(
                        Icons.search,
                        size: 40,
                        // color: kChatscreenSecondaryColor,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 50,
            ),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(40),
                    topLeft: Radius.circular(40),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Image

Answer 3

just warp your BottomNavigationBar with a Wrap Widget.

Answer 4

Just wrap Scaffold with SafeArea, it will solve your issue...