enter image description here
BottomNavigationBar(
elevation: 10,
type: BottomNavigationBarType.fixed,
backgroundColor: Color(0xFFFBFBFB),
showSelectedLabels: false,
showUnselectedLabels: false,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Column(
children: [
Text(
AppLocalizations.of(context)!.redeem,
style: Styles.grey13Medium,
)
],
),
activeIcon: Column(
children: [
Text(
AppLocalizations.of(context)!.redeem,
style: Styles.blue13Medium,
)
],
),
label: 'Redeem',
),
],
currentIndex: _currentTab,
onTap: _onItemTapped,
)
we try to change in overlay but I didn't find overlay property in BottomNavigationBar and BottomNavigationBarItem
Make your code more readable
If you want to remove splash on bottom Nav bar, you can set it's color to transparent,
Theme(
data: Theme.of(context).copyWith(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: ChildWidget(),
);
Related
I have tried different methods but nothing seems working, Please help to achieve itenter image description here
backgroundColor: Colors.transparent, //not working
is there any other method to achieve transparent bottom nav bar?
here is the code
bottomNavigationBar: BottomNavigationBar(
showSelectedLabels: false,
showUnselectedLabels: false,
backgroundColor: Colors.transparent, //it is not working
items: [
BottomNavigationBarItem(
label: ('home'),
icon: FaIcon(FontAwesomeIcons.home),
),
BottomNavigationBarItem(
label: ('home'),
icon: FaIcon(FontAwesomeIcons.fileAlt),
backgroundColor: Colors.black,
),
BottomNavigationBarItem(
label: ('home'),
icon: FaIcon(FontAwesomeIcons.user),
),
BottomNavigationBarItem(
label: ('home'),
icon: FaIcon(
FontAwesomeIcons.bell,
),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.red,
),
screenshot ..
You can set background color of the scaffold and then set transparent background color and zero elevation to the BottomNavigationBar
Scaffold(
backgroundColor: Colors.grey,
bottomNavigationBar: BottomNavigationBar(
elevation: 0,
showSelectedLabels: false,
showUnselectedLabels: false,
backgroundColor: Colors.transparent,
items: [
BottomNavigationBarItem(
label: ('home'),
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
label: ('home'),
icon: Icon(Icons.home),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.red,
),
appBar: AppBar(),
body: Container()
)
can someone help me with this problem. The only solution i have currently found, is to set both showSelectedLabels and showUnselecedLabels to false. However this will remove all the labels, but i only want to remove the label of the add button. If I just use a placeholder "" for label, my add button is off centred horizontally...
button off centered horizontally
the result i want
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: tabs[_selectedIndex],
),
bottomNavigationBar: BottomNavigationBar(
elevation: 10,
backgroundColor: Colors.white,
type: BottomNavigationBarType.fixed,
selectedIconTheme: IconThemeData(color: kPrimaryMagentaColor),
selectedLabelStyle: TextStyle(fontWeight: FontWeight.w500),
selectedItemColor: Colors.black,
showSelectedLabels: true,
showUnselectedLabels: true,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Container(
padding: kBottomNavIconLabelSpace,
child: Icon(
FeatherIcons.map,
size: 26.5,
),
),
label: 'Map',
),
BottomNavigationBarItem(
icon: Container(
padding: kBottomNavIconLabelSpace,
child: Icon(
FeatherIcons.compass,
size: 28,
),
),
label: 'Discover',
),
BottomNavigationBarItem(
icon: Container(
decoration: BoxDecoration(
color: kPrimaryMagentaColor,
shape: BoxShape.circle,
),
padding: EdgeInsets.all(10),
child: Icon(
FeatherIcons.plus,
color: Colors.white,
),
),
label: "",
),
BottomNavigationBarItem(
icon: Container(
padding: kBottomNavIconLabelSpace,
child: Transform(
alignment: Alignment.center,
transform: Matrix4.rotationY(math.pi),
child: Icon(
FeatherIcons.messageSquare,
size: 28,
),
),
),
label: 'Inbox',
),
BottomNavigationBarItem(
icon: Container(
padding: kBottomNavIconLabelSpace,
child: Icon(
FeatherIcons.calendar,
size: 28,
),
),
label: 'My Activity',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
);
Add this to the BottomNavigationBar properties
showSelectedLabels: false,
showUnselectedLabels: false,
You need add in BottomNavigationBar():
BottomNavigationBar(iconSize: 40,
showSelectedLabels: false, //selected item
showUnselectedLabels: false, //unselected item
...
);
Ok, so this is kinda possible by manipulating the Text's fontSize.
First, change all the labels you have used for each of the BottomNavigationBarItem to use title parameter. Like this,
Change label: 'Map' to title: Text('Map'). Similarly change it with all your BottomNavigationBarItem. Since this is not possible using label parameter.
Now, for your center BottomNavigationBarItem use it like this,
BottomNavigationBarItem(
icon: Align(
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(color: Colors.deepPurple, shape: BoxShape.circle),
padding: EdgeInsets.all(14),
child: Icon(Icons.add, color: Colors.white),
),
),
title: Text("", style: TextStyle(fontSize: 0)),
),
So, you are changing two things.
Increase padding of your Container to EdgeInsets.all(14) to make the button look bigger.
Change fontSize using style: TextStyle(fontSize: 0), this make the view invisible.
Now, you have something like this, change the color to whatever you want.
If you use 2 params with
showSelectedLabels: false, showUnselectedLabels: false,
with label != ""
You can get this issue.
If you are using showSelectedLabels:true on BottomNavigationBar the icons doesnot be on center so try to avoid showSelectedLabels:true
so remove showSelectedLabels:true
I hope the my title is enough to understand my problem, How to put a list item in bottomnavigation using flutter? if not please refer in the picture below and code i provided.
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
backgroundColor: Colors.orangeAccent,
selectedItemColor: Colors.white,
unselectedItemColor: colorScheme.onSurface.withOpacity(.40),
selectedLabelStyle: textTheme.caption,
unselectedLabelStyle: textTheme.caption,
onTap: (value) {
// Respond to item press.
setState(() => _currentIndex = value);
},
items: [
BottomNavigationBarItem(
title: Text('Clothes'),
icon: Icon(Icons.design_services_rounded),
),
BottomNavigationBarItem(
title: Text('Colors'),
icon: Icon(Icons.colorize_rounded),
),
BottomNavigationBarItem(
title: Text('Ideas'),
icon: Icon(Icons.lightbulb_outline_rounded),
),
BottomNavigationBarItem(
title: Text('Profile'),
icon: Icon(Icons.face_rounded),
),
],
),
);
}
}
if i clicked the Clothes , this will happen.
Edit 1:
How this is done is as follows:
// Keep this outside your Widget as it is a constant.
final List<Widget> _widgets = <Widget>[
ClothesPage(),
ColorsPage(),
IdeasPage(),
ProfilePage(),
];
return Scaffold(
// This body is new.
body: _widgets[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
backgroundColor: Colors.orangeAccent,
selectedItemColor: Colors.white,
unselectedItemColor: colorScheme.onSurface.withOpacity(.40),
selectedLabelStyle: textTheme.caption,
unselectedLabelStyle: textTheme.caption,
onTap: (value) {
_currentIndex = value;
showDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
_widgets[_currentIndex],
SizedBox(
// Use whatever height you desire.
height: 90,
),
],
);
},
);
},
items: [
BottomNavigationBarItem(
title: Text('Clothes'),
icon: Icon(Icons.design_services_rounded),
),
BottomNavigationBarItem(
title: Text('Colors'),
icon: Icon(Icons.colorize_rounded),
),
BottomNavigationBarItem(
title: Text('Ideas'),
icon: Icon(Icons.lightbulb_outline_rounded),
),
BottomNavigationBarItem(
title: Text('Profile'),
icon: Icon(Icons.face_rounded),
),
],
),
);
// I have put a card here, you can put any other Widget for the same.
// Do the same for others.
class ProfilePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Card(
color: Colors.white,
child: Padding(
padding: EdgeInsets.all(10),
child: Text(
"Profile",
),
),
);
}
}
Now, I hope this is what you expect to do via the Bottom Navigation Bar.
I created FloatingNavbar in bottomnavigation. I want to add badge on top cart of cart icon in FloatingNavbar. When i tried with normal bottomnavigation it is working but when i tried with FloatingNavbar not wokring. Because normal bottomnavigation icon is widgets but In FloatingNavbar it's icondata. That's why it is not working. Can anyone help me with this?
Code :
return new WillPopScope(
onWillPop: _onWillPop,
child: Scaffold(
backgroundColor: Colors.grey[300],
// appBar: HomeAppBar(),
extendBody: false,
body: _tabs[_selectedIndex],
bottomNavigationBar: FloatingNavbar(
currentIndex: _selectedIndex,
items: itemsFloating,
backgroundColor: Colors.white,
unselectedItemColor: Colors.grey[500],
fontSize: 8,
selectedItemColor: Colors.orange[300],
onTap: _onItemTapped,
),
),
);
List<FloatingNavbarItem> itemsFloating =[
FloatingNavbarItem(icon: Icons.home
, title: 'Home'),
FloatingNavbarItem(icon: Icons.search, title: 'Search'),
FloatingNavbarItem(icon: Icons.shopping_cart, title: 'Cart'),
FloatingNavbarItem(icon: Icons.people, title: 'Membership'),
FloatingNavbarItem(icon: Icons.person_outline, title: 'Profile'),
];
Badge :
icon: Badge(
showBadge: true,
badgeContent: Text(
badgeData,
style: TextStyle(color: Colors.white),
),
child: Icon(Icons.shopping_cart)),
I've a bottomnavigation bar that has a color. When I clicked on the last button, the color change to white ...
The last button show some card i can swipe.
For that i use the code here : https://github.com/devefy/Flutter-Story-App-UI
i've tried to change return container() whith something else, but nothing was heplful.
here is my code
void _onItemTapped(int index) {
setState(() {
if (edifice != null) _selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.unEdifice.vocable),
backgroundColor: color_edifices,
),
body: Center(
child: edifice == null
? CircularProgressIndicator()
: _selectedIndex == 5
? SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
CardScrollWidget(currentPage),
Positioned.fill(
child: PageView.builder(
itemCount: edifice.commentaires.length,
controller: controller,
reverse: true,
itemBuilder: (context, index) {
return Container(
);
},
),
)
],
),
],
),
)
: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
backgroundColor: color_edifices,
icon: Icon(GaeoIcons.church, color: Colors.white),
title: Text('Edifice', style: buttonTextStyle),
),
BottomNavigationBarItem(
icon: Icon(GaeoIcons.location_on, color: Colors.white),
title: Text('Adresses', style: buttonTextStyle),
),
BottomNavigationBarItem(
icon: Icon(GaeoIcons.group, color: Colors.white),
title: Text('Responsables', style: buttonTextStyle),
),
BottomNavigationBarItem(
icon: Icon(GaeoIcons.truck, color: Colors.white),
title: Text('Distributions', style: buttonTextStyle),
),
BottomNavigationBarItem(
icon: Icon(GaeoIcons.group, color: Colors.white),
title: Text('Contacts', style: buttonTextStyle),
),
BottomNavigationBarItem(
icon: Icon(GaeoIcons.comment, color: Colors.white),
title: Text('Commentaires', style: buttonTextStyle),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}`
You can see what i mean with the pictures included
Thanks for your help
I have tried to simulate your case with Story App UI
please try to
1. add BottomNavigationBar 's backgroundColor
2. test with BottomNavigationBarType.fixed and fixedColor
also reference Flutter BottomNavigationBar Colors
code snippet
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.brown,
type: BottomNavigationBarType.fixed,
fixedColor: Colors.white,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
backgroundColor: Colors.white,
icon: Icon(Icons.access_time, color: Colors.white),
title: Text('Edifice', ),
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm, color: Colors.white),
title: Text('Adresses', ),
),
],
)
Test result of Story App UI with BottomNavigationBar