'BottomNavigationBar overflowing in flutter
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),
),
),
),
),
],
),
),
);
}
}
Solution 1:[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.
Solution 2:[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
heightsin your widget tree usingMediaQuery.of(context)size.height * <some multiple>.e.g.height: MediaQuery.of(context).size.height * 0.2 - Wrap your
ColumnwithSingleChildScrollView
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
Solution 3:[3]
just warp your BottomNavigationBar with a Wrap Widget.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Akshar Patel |
| Solution 2 | Hamza |
| Solution 3 | Ha jong myeong |