Shulou(Shulou.com)06/03 Report--

Flutter Bottom AppBar how to achieve irregular bottom navigation bar, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

There are three ways to achieve the bottom navigation bar and click on the switch page.

TabBar + TabBarView BottomNavigationBar + BottomNavigationBarItem Custom BottomAppBar

BottomAppBar is used here to implement

/ * * stateful StatefulWidget * inherits from StatefulWidget and uses the build method of State to build controls * / class BotomeMenumBarPage extends StatefulWidget {/ pass the value BotomeMenumBarPage () through the construction method; / / is mainly responsible for creating state @ override BotomeMenumBarPageState createState () = > BotomeMenumBarPageState ();} / * data can be changed dynamically in State * after setState, the changed data will trigger Widget to rebuild and refresh * / class BotomeMenumBarPageState extends State {BotomeMenumBarPageState () @ override void initState () {/ / initialization, this function calls super.initState () only once in the life cycle;} @ override Widget build (BuildContext context) {/ / build page return buildBottomTabScaffold ();} / / the int currentIndex of the currently displayed page = 0 / / Click the page where the navigation item is to be displayed final pages = [ChildItemView ("Home"), ChildItemView ("Discovery"), ChildItemView ("dynamic"), ChildItemView ("my")] Widget buildBottomTabScaffold () {return SizedBox (height: 100, child: Scaffold (/ / corresponding page body: pages [currentIndex], / / appBar: AppBar (title: const Text ('Bottom AppBar')), / / position of the hover button floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, / / hover button floatingActionButton: FloatingActionButton (child: const Icon (Icons.add), onPressed: () {print ("add press") },), / / other menu bars bottomNavigationBar: BottomAppBar (/ / combination of suspension buttons with other menu bars shape: CircularNotchedRectangle (), / / the gap between FloatingActionButton and BottomAppBar notchMargin: 6.0,color: Colors.white, child: Row (mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceAround, children: [buildBotomItem (currentIndex, 0, Icons.home, "Home"), buildBotomItem (currentIndex, 1, Icons.library_music, "Discovery"), buildBotomItem (currentIndex,-1, null) "Discovery"), buildBotomItem (currentIndex, 2, Icons.email, "message"), buildBotomItem (currentIndex, 3, Icons.person, "my"),],) } / / ignore: slash_for_doc_comments / * @ param selectIndex currently selected page * @ param index Corner label for each entry * @ param iconData Icon for each entry pair * @ param title title for each entry * / buildBotomItem (int selectIndex, int index, IconData iconData, String title) {/ / style for unselected state TextStyle textStyle = TextStyle (fontSize: 12.0 color: Colors.grey); MaterialColor iconColor = Colors.grey Double iconSize=20; EdgeInsetsGeometry padding = EdgeInsets.only (top: 8.0); if (selectIndex==index) {/ / selected text style textStyle = TextStyle (fontSize: 13.0 color: Colors.blue); / / selected button style iconColor = Colors.blue; iconSize=25; padding = EdgeInsets.only (top: 6.0);} Widget padItem = SizedBox () If (iconData! = null) {padItem = Padding (padding: padding, child: Container (color: Colors.white, child: Center (child: Column (children: [Icon (iconData, color: iconColor, size: iconSize,), Text (title, style: textStyle,)],);} Widget item = Expanded (flex: 1, child: new GestureDetector (onTap: () {if (index! = currentIndex) {setState (() {setState = setState})) }, child: SizedBox (height: 52, child: padItem,); return item;}}

/ / Sub-page class ChildItemView extends StatefulWidget {String _ title; ChildItemView (this._title); @ override _ ChildItemViewState createState () = > _ ChildItemViewState ();} class _ ChildItemViewState extends State {@ override Widget build (BuildContext context) {return Container (child: Center (child: Text (widget._title)),);}}

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.