In my flutter app I have a RaisedButton widget on the first page of my BottomNavigationBar. This page contains a button that should take the user to the fourth and final page of app that also happens to be the fourth page on the BottomNavigationBar (I know this is silly but customer requirements are what they are). This is my RaisedButton:
Padding(
padding: const EdgeInsets.only(top: 20),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.6,
height: MediaQuery.of(context).size.width * 0.15,
child: RaisedButton(
textColor: Colors.white,
color: Constants.secondaryYellow,
child: new AlignText(
alignmentDirection: Alignment.center,
fontSize: 22,
fontWeight: FontWeight.normal,
text: 'Go to Settings',
textColour: Constants.primaryWhite,
),
onPressed: () {
navigationBar.onTap(3);
},
splashColor: Constants.secondaryLightBlue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0))),
),
)
The BottomNavigationBar key is instantiated in the stateful widget just above the build function like so
final BottomNavigationBar navigationBar = navBarGlobalKey.currentWidget;
If I navigate to a different screen, come back to the home page and then press the button, the button works as intended. However, if the button is the first press I make in the app then the onTap function returns the following error in the console
The getter 'onTap' was called on null.
Receiver: null
Tried calling: onTap
Here is my BottomNavigationBar:
BottomNavigationBar(
key: navBarGlobalKey,
onTap: onTapped,
currentIndex: currentIndex,
fixedColor: Constants.secondaryLightBlue,
backgroundColor: Colors.white,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.dashboard),
title: new Text('Page 1'),
activeIcon: new Icon(
Icons.dashboard,
color: Constants.secondaryLightBlue,
)),
BottomNavigationBarItem(
icon: new Icon(Icons.apps),
title: new Text('Page 2'),
activeIcon: new Icon(
Icons.apps,
color: Constants.secondaryLightBlue,
)),
BottomNavigationBarItem(
icon: new Icon(Icons.people),
title: new Text('Page 3'),
activeIcon: new Icon(
Icons.people,
color: Constants.secondaryLightBlue,
)),
BottomNavigationBarItem(
icon: new Icon(Icons.question_answer),
title: new Text('Page 4'),
activeIcon: new Icon(
Icons.question_answer,
color: Constants.secondaryLightBlue,
)),
],
)
The variable navigationBar being called in the onTap is a global variable in main.dart and attached as the key of the BottomNavigationBar
GlobalKey navBarGlobalKey = GlobalKey(debugLabel: 'bottomAppBar');
void main() {
runApp(
MaterialApp(
theme: ThemeData(primaryColor: Color.fromRGBO(35, 40, 55, 1)),
home: SampleApp(),
),
);
}
Related
I need to change color of selected BottomNavigationBarItem to yellow, but it doesn't work.
It seems because i set BottomNavigationBarItem default colors as black, but otherwise they will be set as white, cause i created more than 3 items, and i don't know hot to fix them either
If you know how to fix this or white color bug, please inform me
body: Center(
child: _widgetopt.elementAt(_selind),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedItemColor: Colors.redAccent,
backgroundColor: Colors.white,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.add_box_outlined,
color: Colors.black,
),
label: ''),
BottomNavigationBarItem(
icon: Icon(
Icons.location_on_outlined,
color: Colors.black,
),
label: ''),
BottomNavigationBarItem(
icon: Icon(
Icons.heart_broken_outlined,
color: Colors.black,
),
label: ''),
BottomNavigationBarItem(
icon: Icon(
Icons.person_outline_outlined,
color: Colors.black,
),
label: ''),
],
currentIndex: _selind,
onTap: OnBeingTapped,
),
),
title: 'Stadium',
);
}
}
Rest of code:
class _HomePageState extends State<HomePage> {
int _selind = 0;
List<Widget> _widgetopt = <Widget>[
Text('Index 1'),
Text('Index 2'),
Text('Index 3'),
Text('Index 4'),
];
void OnBeingTapped(int index) {
setState(() {
_selind = index;
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(
'Стадионы',
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.white,
toolbarHeight: 100,
actions: [
IconButton(
onPressed: () {},
icon: Icon(
Icons.menu_outlined,
color: Colors.black,
)),
IconButton(
onPressed: () {},
icon: Icon(
Icons.text_rotation_down_outlined,
color: Colors.black,
)),
],
),
You forgot to add selectedItemColor property of BottomNavigationBarItem widget. Just add below line in your code and you'll be able to see selected item color yellow from black.
currentIndex: _selind,
selectedItemColor: Colors.yellow, // Add this line :)
onTap: OnBeingTapped,
I have a convex bottom bar and the last tab is a Menu that opens a drawer when clicked. But I'm having troubles when the drawer is closed. As the tab Menu only opens a drawer I wish it could return to previous tab when drawer closes, but the Menu tab keeps active. The tab only changes when it is clicked. So how can I call the onTab property of convex_tab_bar when the drawer is closed?
...
return Scaffold(
key: _scaffoldKey,
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Drawer Header'),
),
ListTile(
title: const Text('Item 1'),
onTap: () {},
),
],
),
),
onDrawerChanged: (isOpen) {
if (!isOpen) {
setState(() {
_currentOption = _previousOption;
});
changeTab(context, _previousOption);
}
},
body: Container(
child: _currentPage,
),
bottomNavigationBar: StyleProvider(
style: Style(),
child: ConvexAppBar(
style: TabStyle.fixedCircle,
backgroundColor: Colors.white,
color: Colors.grey,
activeColor: _currentOption == 1
? const Color(0xffa98e47)
: const Color(0xff00c9ff),
items: [
TabItem(
icon: const Icon(
ReceivedIcon.receivedIcon,
color: Colors.grey,
size: 12,
),
title: AppLocalizations.of(context)!.received,
activeIcon: const Icon(
ReceivedIcon.receivedIcon,
color: Color(0xff00c9ff),
size: 12,
),
),
TabItem(
icon: const Icon(SentIcon.sentIcon, color: Colors.grey),
title: AppLocalizations.of(context)!.sent,
activeIcon: const Icon(SentIcon.sentIcon, color: Color(0xffa98e47)),
),
const TabItem(
icon: Icon(
Icons.add_rounded,
size: 48,
color: Colors.white,
)
),
TabItem(
icon: Icons.notifications,
title: AppLocalizations.of(context)!.notifications
),
TabItem(
icon: Icons.menu,
title: AppLocalizations.of(context)!.menu
),
],
onTap: (int i) {
changeTab(context, i);
},
),
),
);
try this https://github.com/hacktons/convex_bottom_bar/blob/master/doc/issue-change-active-tab-index.md (Change active tab index programmaticlly)
create a function onTapHandler in your class ... put the referece on your ConvexAppBar(onTap:onTapHandler ...) and now you are able to call the onTapHandler in your onDrawerChanged handler
i have tried so many different ways und looked for solutions online, but could not find any. can someone please help me with this problem? i want my button right in the middle of the bottom navigation bar like in picture 1
the button is right in the middle which is what i want
this is a floating action button, however i cannot put it to the place i want
What I would do is remove/replace the FAB (Floating action button) with a BottomNavigationBarItem and put it in the center of the BottomNavigationBar and create styling for it
Here is an example:
bottomNavigationBar: BottomNavigationBar(
onTap: _selectTab,
showSelectedLabels: false,
showUnselectedLabels: false,
backgroundColor: Theme.of(context).primaryColor,
selectedItemColor: Theme.of(context).accentColor,
unselectedItemColor: Colors.black,
currentIndex: _selectedScreenIndex,
//type: BottomNavigationBarType.shifting,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.category,
),
label: 'Categories',
),
BottomNavigationBarItem(
icon: Container(
decoration: BoxDecoration(
color: Colors.yellow,
shape: BoxShape.circle,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.add,
),
iconSize: 40,
)
// Icon(
// Icons.add,
// ),
),
),
label: 'Add',
),
BottomNavigationBarItem(
icon: Icon(
Icons.star,
),
label: 'Favorites',
),
],
),
Also there is this alternative option for the bottom navigation https://pub.dev/packages/convex_bottom_bar
flutter dart flutter-widget flutter-bottomnavigation
I am new to flutter , Please help me to get out of this issue,
Issue -> After click any of the menu icon , color is not changing
While staring app , icon colours are setting correctly , Home icon is default , if I click Scan or settings icon green color is not setting for icon as well as text ,
I have tried activeIcon of BottomNavigationBarItem still not working
Here is my code,
class TabNavigationState extends State<ScaffoldTest> {
int currentTabIndex = 1;
var tabs = [Home(), Camera(), Settings()];
onTabbed(index) => {
setState(() {
currentTabIndex = index;
})
};
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.teal,
leading: IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
onPressed: null),
centerTitle: false,
actions: <Widget>[
IconButton(
icon: Icon(
Icons.info_outline,
color: Colors.white,
),
color: Colors.white,
onPressed: () => debugPrint("Icon tabbed")),
IconButton(
icon: Icon(
Icons.save,
color: Colors.white,
),
color: Colors.white,
onPressed: () => debugPrint("Icon tabbed")),
],
title: Text(
"Test",
style: TextStyle(color: Colors.white),
),
),
backgroundColor: Colors.white,
body: tabs[currentTabIndex],
floatingActionButton: FloatingActionButton(
onPressed: null,
child: IconButton(
icon: Icon(
Icons.camera,
color: Colors.white,
),
),
),
bottomNavigationBar: BottomNavigationBar(
// backgroundColor: Colors.blueAccent.shade100,
selectedItemColor: Colors.green,
unselectedItemColor: Colors.grey,
showSelectedLabels: true,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
"Home",
textDirection: TextDirection.ltr,
)),
BottomNavigationBarItem(
icon: Icon(Icons.camera),
title: Text(
"Scan",
textDirection: TextDirection.ltr,
)),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text(
"Settings",
textDirection: TextDirection.ltr,
))
],
onTap: onTabbed,
),
);
}
https://i.stack.imgur.com/aGJqG.png
BottomNavigationBar has attribute currentIndex to know which is current active tab. You need to set it in your onTabbed method like
int _selectedIndex = 0;
void onTabbed(int index) {
setState(() {
_selectedIndex = index;
...
});
....
}
// And use _selectedIndex in BottomNavigationBar
Widget build(BuildContext context) {
return Scaffold(
...
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
),
...
);
}
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