Flutter29.Opensource China底部导航栏和ViewPager效果(01)

main.dart主界面设置主题色，填充内容是HomePage

import 'package:flutter/material.dart';
import 'package:flutterapp2/constants/Constants.dart';

import 'HomePage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OpenSource China',
      theme: ThemeData(
        primaryColor: Color(AppColors.APP_THEME), //主题色
      ),
      home: HomePage(),
    );
  }
}

HomePage.dart主界面内容的布局分为titleBar， body和底部的NavagationBar

import 'package:flutter/material.dart';
import 'package:flutterapp2/widgets/navigation_icon_view.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  //底部导航栏的四个title
  final _appBarTitle = ['News', 'Updates', 'Find', 'My'];
  //底部四个导航栏的view
  List<NavigationIconView> _navigationIconView;
  //当前条目
  var _currentIndex = 0;
  //底部导航栏对应的四个page
  List<Widget> _pages;
  PageController _pageController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //初始化底部导航栏
    _navigationIconView = [
      NavigationIconView(
          title: 'News',
          iconPath: 'assets/images/ic_nav_news_normal.png',
          activeIconPath: 'assets/images/ic_nav_news_actived.png'),
      NavigationIconView(
          title: 'Updates',
          iconPath: 'assets/images/ic_nav_tweet_normal.png',
          activeIconPath: 'assets/images/ic_nav_tweet_actived.png'),
      NavigationIconView(
          title: 'Find',
          iconPath: 'assets/images/ic_nav_discover_normal.png',
          activeIconPath: 'assets/images/ic_nav_discover_actived.png'),
      NavigationIconView(
          title: 'My',
          iconPath: 'assets/images/ic_nav_my_normal.png',
          activeIconPath: 'assets/images/ic_nav_my_pressed.png'),
    ];

    _pages = [
      Container(color: Colors.red,),
      Container(color: Colors.blue,),
      Container(color: Colors.yellow,),
      Container(color: Colors.green,),
    ];

    _pageController = PageController(initialPage: _currentIndex);
  }

  @override
  Widget build(BuildContext context) {

    //SafeArea 适配刘海屏等
    return Scaffold(
      /**
       * appBar
       */
      appBar: AppBar(
        title: Text('OpenSource China'),
      ),
      /**
       *body
       */
      //body的pager的滑动PageView来协助实现
      body: PageView.builder(
        itemBuilder: (BuildContext context, int index){
          return _pages[index];
        },
        controller: _pageController,
        //控制可以滑动的数目
        itemCount: _pages.length,
        //与底部导航栏交互
        onPageChanged: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
      /**
       * 底部导航栏
       */
      bottomNavigationBar: BottomNavigationBar(
        //更新当前的条目
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        items: _navigationIconView.map((e) => e.item).toList(),
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
          //底部导航栏的滑动
          _pageController.animateToPage(
              index, duration: Duration(microseconds: 10), curve: Curves.ease);
        },
      ),
    );
  }
}

navigation_icon_view.dart底部导航栏的对象，包含title以及icon的路径，使用构造函数来实现

import 'package:flutter/material.dart';

/// 自定义底部导航栏的四个View

class NavigationIconView{

  //条目
  final BottomNavigationBarItem item;
  //title
  final String title;
  //icon path
  final String iconPath;
  //actived icon path
  final String activeIconPath;

  //构造函数，使用命名构造函数的形式进行赋值
  NavigationIconView({
    @required this.title, @required this.iconPath, @required this.activeIconPath})
      :item = BottomNavigationBarItem(
    icon: Image.asset(iconPath,
      width: 20.0,
      height: 20.0,),
    activeIcon: Image.asset(activeIconPath,
      width: 20.0,
      height: 20.0,),
    title: Text(title)
  );
}

Constants.dart常量统一处理

abstract class AppColors{
  //应用主题色
  static const APP_THEME = 0xff63ca6c;
}

pubspec.yaml初始化一些图片等资源

name: flutterapp2
description: A new Flutter application.


publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter



  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true
  assets:
    - assets/images/ic_nav_news_normal.png
    - assets/images/ic_nav_news_actived.png
    - assets/images/ic_nav_tweet_normal.png
    - assets/images/ic_nav_tweet_actived.png
    - assets/images/ic_nav_discover_normal.png
    - assets/images/ic_nav_discover_actived.png
    - assets/images/ic_nav_my_normal.png
    - assets/images/ic_nav_my_pressed.png

效果如下：