First, control introduction
A navigation bar at the bottom of the control, used to switch from the different views, at the bottom of the navigation bar can be made up of text, ICONS, or a combination of these two forms, the navigation bar at the bottom of the combined as a whole with the Scaffold, it usually as Scaffold. Provide bottomNavigationBar parameters.
Two, use method
BottomNavigationBar ({Key Key, @required List < BottomNavigationBarItem > items, ValueChanged < int > onTap, int currentIndex: 0 when clicking navigation bar sub item, // Currently active BottomNavigationBarItem item index. Double Elevation: 8.0, // Set the z coordinates, set the BottomNavigationBarType and there is no effecttype// The bottom navigation bar type is fixed and fixed. // The bottom navigation bar type is fixed and fixed. BackgroundColor can't be used with selectedItemColor, // navigation bar backgroundColor double iconSize: // unselectedItemColor is not used with fixedColor. // Unchecked the font size of the BottomNavigationBarItem tag IconThemeData selectedIconTheme: Const IconThemeData (), // The style of the subitem when checked. This cannot be used with the colors of BottomNavigationBarItem Icon, otherwise the colors of the Icon will take effect. IconThemeData unselectedIconTheme: Const IconThemeData (), / / selected BottomNavigationBarItem. The size of the icon's center mark size, opacity and color double selectedFontSize: 14.0, // Select TAB font size double unselectedFontSize: 12.0, // Unselected font size of BottomNavigationBarItem tag TextStyle selectedLabelStyle, TextStyle unselectedLabelStyle, // Unselected font style, bool showSelectedLabels, BottomNavigationBarItem bool showUnselectedLabels, BottomNavigationBarItem}) BottomNavigationBarItem({@required Widget icon,// Set the icon Widget title,// Set the label control Widget activeIcon,// Set the label control Color when selected BackgroundColor, / / BottomNavigationBarType for shifting the background color of the})Copy the code2. Common attributes
1. Set the sub-item control of the navigation bar. The length of the control item list must be at least two items, and the icon and title of each item must not be empty
BottomNavigationBarItem: <BottomNavigationBarItem>[// The control item list length must be at least 2 items, and the icon and title of each item must not be empty BottomNavigationBarItem(icon: Icon(Icons. Ac_unit, // color: color.black, size: 20,), // Set what Icon to use.'hot'), // Set what text control to use // activeIcon: getTabIcon(0), // The icon control to display when selected backgroundColor: Colors. Red), / / BottomNavigationBarType for shifting the background color of the BottomNavigationBarItem (icon: getTabIcon (1), / / set the use what icon controls the title: GetTabTitle (1), // Set what text control to use activeIcon: getTabIcon(1), // the icon control to display when selected backgroundColor: Color.blue), BottomNavigationBarItem(icon: getTabIcon(2), // Set what icon control title to use: GetTabTitle (2), // Set what text control to use activeIcon: getTabIcon(2), // The icon control to display when selected backgroundColor: color.green)],Copy the code2. Callback of navigation sub-item click
OnTap: (index) {// When the navigation sub-item is clickedsetState(() {
_tabIndex = index;
});
},
Copy the code3. There are fixed and shifting types in the bottom navigation bar, and different types have different display effects
type: BottomNavigationBarType fixed, / / at the bottom of the navigation bar type, there are fixed and shifting two types, different types of display effect is not the sameCopy the code4. The selected font color cannot be used with selectedItemColor
FixedColor: color.black, // The selected font color, cannot be used with selectedItemColorCopy the code5. Set the icon size
IconSize: 200.0, // Size of iconCopy the code6. The item index of the currently active BottomNavigationBarItem.
currentIndex: _tabIndex
Copy the code7. The font size of the selected TAB
SelectedFontSize: 30, // The font size of the selected TABCopy the code8. Navigation background color
BackgroundColor: Colors. LightBlueAccent, // navigation bar backgroundColorCopy the codeThis cannot be used with the colors of BottomNavigationBarItem Icon, otherwise, the colors of Icon will prevail. The theme setting will not take effect, and the Icon must be the official Icon, otherwise, it will not take effect
selectedIconTheme: IconThemeData(// The style of the subitem at the time of the check, this cannot be used with the colors of BottomNavigationBarItem Icon, otherwise the colors of the Icon will be taken, and the theme setting will not take effect. Also, the main icon must be the official icon, otherwise, it will not work.Copy the code10. The selected font color cannot be used with fixedColor
SelectedItemColor: color. yellow, // The selected font color cannot be used with fixedColorCopy the code11. The selected font style does not take effect
SelectedLabelStyle: TextStyle(color: color. yellow, fontSize: 20), // The selected font style does not take effectCopy the codeIs the tag displayed for BottomNavigationBarItem that is not selected
showUnselectedLabels:
true, // Is the tag displayed for BottomNavigationBarItem that is not selectedCopy the code13. Uncheck the font size of the BottomNavigationBarItem tag
UnselectedFontSize: 25, // The font size of the BottomNavigationBarItem tag is uncheckedCopy the code14. Not selected BottomNavigationBarItem. Icon s center mark size, opacity and color
UnselectedIconTheme: IconThemeData (. / / not selected BottomNavigationBarItem icon s center mark size, opacity and color color: Colors, pink, opacity: 0.7,),Copy the code15. The current for the selected BottomNavigationBarItem. The color of the labels
UnselectedItemColor: Colors. Pink, / / the current for the selected BottomNavigationBarItem. The color of the labelsCopy the code16. If the font style is not selected, it does not take effect
UnselectedLabelStyle: TextStyle(color: colors. green, fontSize: 15), // Unselected font style, set does not take effectCopy the code17. The selected font style does not take effect
showSelectedLabels: true// The selected font style is set and does not take effectCopy the codeThird, summary
1. A basic bottom navigation bar control, selectedIconTheme, selectedLabelStyle, selectedFontSize, ShowUnselectedLabels is set to BottomNavigationBarItem without setting the associated colors, attributes, styles, etc. Otherwise, the property inside the BottomNavigationBarItem will be set primarily. Pay special attention to the selectedIconTheme. The unselectedIconTheme must be set using the Icon control of the flutter. You cannot set these properties for your own images.
2. Generally, when selected or unselected, the font and the corresponding icon should be switched to a certain color. Here, we can use selectedIconTheme, unselectedIconTheme, but this is limited to the system icon. You can also use BottomNavigationBarItem to set the icon and font, which is recommended for your own icon.
/* * Initializes selected and unselected ICONS */ tabImages = [[getTabImage('images/tab_ic_home.png'),
getTabImage('images/tab_ic_home_sel.png')
],
[
getTabImage('images/tab_ic_follow.png'),
getTabImage('images/tab_ic_follow_sel.png')
],
[
getTabImage('images/tab_ic_profile.png'),
getTabImage('images/tab_ic_profile_sel.png')]]; /* * get the corresponding normal or press icon */ Image getTabIcon(int curIndex) {if (curIndex == _tabIndex) {
return tabImages[curIndex][1];
}
returntabImages[curIndex][0]; } /* * get bottomTab's color and Text */ Text getTabTitle(int curIndex) {if (curIndex == _tabIndex) {
return Text(appBarTitles[curIndex],
style: TextStyle(fontSize: 11.0, color: const Color(0xFFFE5823)));
} else {
returnText(appBarTitles[curIndex], Style: TextStyle(fontSize: 11.0, color: const color (0xFF999999)); }} /* * Get the image from the image path */ image getTabImage(path) {return Image.asset(path, width: 23.0, height: 23.0);
}
Copy the codeA complete example
import 'dart:ui';
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
title: 'BottomNavigationBar',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: BottomNavigationBarPage(),
));
// This app is a stateful, it tracks the user's current choice.
class BottomNavigationBarPage extends StatefulWidget {
BottomNavigationBarPage({Key key, this.uid}) : super(key: key);
final int uid;
@override
_BottomNavigationBarPageState createState() =>
_BottomNavigationBarPageState();
}
class _BottomNavigationBarPageState extends State<BottomNavigationBarPage>
with SingleTickerProviderStateMixin {
int _tabIndex = 0;
var tabImages;
var appBarTitles = ['home'.'found'.'I'];
/* * Stores three pages, just like fragmentList */
var _pageList;
/* * Get the corresponding icon of normal or press */ depending on the selection
Image getTabIcon(int curIndex) {
if (curIndex == _tabIndex) {
return tabImages[curIndex][1];
}
return tabImages[curIndex][0];
}
/* * Get the color and text of bottomTab */
Text getTabTitle(int curIndex) {
if (curIndex == _tabIndex) {
return Text(appBarTitles[curIndex],
style: TextStyle(fontSize: 11.0, color: const Color(0xFFFE5823)));
} else {
return Text(appBarTitles[curIndex],
style: TextStyle(fontSize: 11.0, color: const Color(0xFF999999))); }}/* * Get the image from the image path */
Image getTabImage(path) {
return Image.asset(path, width: 23.0, height: 23.0);
}
void initData() {
/* * Initializes selected and unselected ICONS */
tabImages = [
[
getTabImage('images/tab_ic_home.png'),
getTabImage('images/tab_ic_home_sel.png')
],
[
getTabImage('images/tab_ic_follow.png'),
getTabImage('images/tab_ic_follow_sel.png')
],
[
getTabImage('images/tab_ic_profile.png'),
getTabImage('images/tab_ic_profile_sel.png')]];/* * Three subinterfaces */
_pageList = [
Center(
child: Text('Page one'),
),
Center(
child: Text('Page 2'),
),
Center(
child: Text('Page 3'),)]; }@override
Widget build(BuildContext context) {
// Initialize the data
initData();
return Scaffold(
body: _pageList[_tabIndex],
bottomNavigationBar: Container(
child: BottomNavigationBar(
items: <BottomNavigationBarItem>[
// The length of the control item list must be at least 2, and the icon and title of each item must not be empty
BottomNavigationBarItem(
icon: Icon(
Icons.ac_unit,
// color: Colors.black,
size: 20,),// Set what icon control to use
title: Text('hot'), // Set what text control to use
// activeIcon: getTabIcon(0), // The icon control to display when selected
backgroundColor:
Colors.red), / / BottomNavigationBarType for shifting the background color
BottomNavigationBarItem(
icon: getTabIcon(1), // Set what icon control to use
title: Text('control'), // Set what text control to use
// activeIcon: getTabIcon(1), // The icon control to display when selected
backgroundColor: Colors.blue),
BottomNavigationBarItem(
icon: getTabIcon(2), // Set what icon control to use
title: getTabTitle(2), // Set what text control to use
activeIcon: getTabIcon(2), // The icon control to display when selected
backgroundColor: Colors.green)
],
onTap: (index) {
// when you click the navigation sub-item
setState(() {
_tabIndex = index;
});
},
elevation: 150.// Set the z-axis coordinates
type: BottomNavigationBarType
.fixed, // There are fixed and shifting types in the bottom navigation bar
fixedColor: Colors.black, // The selected font color cannot be used with selectedItemColor
iconSize: 200.0.// Size of icon
currentIndex: _tabIndex, // The item index of the currently active BottomNavigationBarItem.
selectedFontSize: 30.// The font size of the selected TAB
// backgroundColor: Colors. LightBlueAccent, // navigation bar backgroundColor
selectedIconTheme: IconThemeData(
// This can not be used with the colors of BottomNavigationBarItem Icon, otherwise the colors of Icon will prevail, the theme setting will not take effect, and the Icon must be the official Icon, otherwise it will not take effect
color: Colors.yellow,
opacity: 0.7,),// selectedItemColor: color.yellow, // The selected font color cannot be used with fixedColor
selectedLabelStyle: TextStyle(
color: Colors.yellow, fontSize: 20), // The selected font style does not take effect
showUnselectedLabels:
true.BottomNavigationBarItem = BottomNavigationBarItem = BottomNavigationBarItem
unselectedFontSize: 25.// Leave the font size of the BottomNavigationBarItem tag unchecked
unselectedIconTheme: IconThemeData(
/ / not selected BottomNavigationBarItem icon s center mark size, opacity and color
color: Colors.pink,
opacity: 0.7,
),
unselectedItemColor:
Colors.pink, / / the current for the selected BottomNavigationBarItem. The color of the labels
unselectedLabelStyle: TextStyle(
color: Colors.green, fontSize: 15), // The font style that is not selected does not take effect
showSelectedLabels: true.// The selected font style does not take effect))); }}Copy the code