03-Flutter mobile real business - the bottom navigation bar production

1, cupertino_IOS style presentation

In Flutter inside it is built in two styles:

• style material : Material Design by Google introduced a new design language, which is designed to provide a consistent language for mobile phones, tablets, desktops and other platforms, wider look and feel. I like to call it paper and ink design. Material Design Style is a very textured design, and will provide some default interactive animation.
• cupertino style : the style IOS component, it has to reproduce a lot of classic IOS features and interactive interface style, let people apply to IOS feel cordial and friendly.

Not select a style, we should have been using this style, the fact is that you can use together, taking into account the characteristics of two styles.

We use both style UI in index_page.dart page, just introduced cupertino.dart, material.dart in the first part. Note that this is regardless of the order of two introduced.

index_page.dart file:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

2 using a dynamic StatefulWidget

To test the article import documents, we use index_page.dart file a static component (that is inherited StatelessWidget).

Under normal circumstances, the bottom navigation bar to the user's manipulation constantly changing, so we switched to a dynamic component (StatefulWidget).

The modified code as follows:

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("百姓生活+"),),
      body: new Center(
        child: Text("我是居中的文本内容"),
      ),
    );
  }
}

Interface effect after the adaptation has not changed, no screenshot.

3, bottom bar

With dynamic components, then you can declare a variable in the State List section, variable name for the property boottomTabs, variable is BottomNavigationBarItem.

In fact, this variable is defined in the List icon at the bottom of the text and the use of navigation.

code show as below:

final List<BottomNavigationBarItem> bottomTabs = [
    BottomNavigationBarItem(
      icon:Icon(CupertinoIcons.home),
      title:Text('首页')
    ),
    BottomNavigationBarItem(
      icon:Icon(CupertinoIcons.search),
      title:Text('分类')
    ),
    BottomNavigationBarItem(
      icon:Icon(CupertinoIcons.shopping_cart),
      title:Text('购物车')
    ),
     BottomNavigationBarItem(
      icon:Icon(CupertinoIcons.profile_circled),
      title:Text('会员中心')
    ),
  ];

With the end of the column data, how to use it?

The revised index_page.dart file:

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {

  final List<BottomNavigationBarItem> bottomTabs = [
    BottomNavigationBarItem(
        icon:Icon(CupertinoIcons.home),
        title:Text('首页')
    ),
    BottomNavigationBarItem(
        icon:Icon(CupertinoIcons.search),
        title:Text('分类')
    ),
    BottomNavigationBarItem(
        icon:Icon(CupertinoIcons.shopping_cart),
        title:Text('购物车')
    ),
    BottomNavigationBarItem(
        icon:Icon(CupertinoIcons.profile_circled),
        title:Text('会员中心')
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("百姓生活+"),),
      body: new Center(
        child: Text("我是居中的文本内容"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type:BottomNavigationBarType.fixed,
        currentIndex: 0,
        items:bottomTabs,
        onTap: (index){

        },
      ),
    );
  }
}

Renderings:

下篇将打通4非底部导航栏，关于界面切换以及底栏的实现可参考之前写的一篇文章：
Flutter实 ViewPager、bottomNavigationBar界面切换