Flutter30.Opensource China左侧抽屉内容搭建和主界面pager搭建(02)

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(
      //关闭右上角的debug符号
      debugShowCheckedModeBanner: false,
      title: 'OpenSource China',
      theme: ThemeData(
        primaryColor: Color(AppColors.APP_THEME), //主题色
      ),
      home: HomePage(),
    );
  }
}

HomePage.dart主界面内容的布局分为titleBar， body和底部的NavagationBar，body部分使用pager填充，增加了MyDrawer自定义Drawer的交互

import 'package:flutter/material.dart';
import 'package:flutterapp2/constants/Constants.dart';
import 'package:flutterapp2/pages/discovery_page.dart';
import 'package:flutterapp2/pages/news_list_page.dart';
import 'package:flutterapp2/pages/profile_page.dart';
import 'package:flutterapp2/pages/tweet_page.dart';
import 'package:flutterapp2/widgets/my_drawer.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,),
      NewsListPage(),
      TweetPage(),
      DiscoveryPage(),
      ProfilePage(),
    ];

    _pageController = PageController(initialPage: _currentIndex);
  }

  @override
  Widget build(BuildContext context) {

    //SafeArea 适配刘海屏等
    return Scaffold(
      /**
       * appBar
       */
      appBar: AppBar(
        title: Text(
          _appBarTitle[_currentIndex],
          style: TextStyle(color: Color(AppColors.APPBAR)),),
      ),
      /**
       *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);
        },
      ),
      drawer: MyDrawer(
        headImgPath: 'assets/images/cover_img.jpg',
        menuIcons: [Icons.send, Icons.home, Icons.error, Icons.settings],
        menuTitles: ['send', 'motivation', 'about', 'settings'],
      ),
    );
  }
}

my_drawer.dart自定义的Drawer，有构造函数和初始化的赋值

import 'package:flutter/material.dart';
import 'file:///D:/Code/Flutter/FlutterHello/flutter_app2/flutter_app2/lib/pages/drawer/about_page.dart';
import 'file:///D:/Code/Flutter/FlutterHello/flutter_app2/flutter_app2/lib/pages/drawer/publish_tweet_page.dart';
import 'file:///D:/Code/Flutter/FlutterHello/flutter_app2/flutter_app2/lib/pages/drawer/tweet_black_house.dart';
import 'package:flutterapp2/pages/drawer/settings_page.dart';

/**
 * 自定义drawer
 */
class MyDrawer extends StatelessWidget {
  final String headImgPath;
  final List menuTitles;
  final List menuIcons;

  MyDrawer({Key key,
    @required this.headImgPath,
    @required this.menuTitles,
    @required this.menuIcons})
    : assert(headImgPath != null),
      assert(menuTitles != null),
      assert(menuIcons != null),
      super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      elevation: 0.0,//去掉Drawer旁边的阴影
      child: ListView.separated(
        padding: const EdgeInsets.all(0.0),//去掉上面的状态栏
        itemCount: menuTitles.length + 1,
        itemBuilder: (context, index) {
          if(index == 0) {
            return Image.asset(headImgPath, fit: BoxFit.cover, );
          }
          index -= 1;//去掉最上面的背景条目
          return ListTile(
            leading: Icon(menuIcons[index]),
            title: Text(menuTitles[index]),
            trailing: Icon(Icons.arrow_forward_ios),//尾巴
            //点击事件
            onTap: () {
              switch (index) {
                case 0:
                //PublishTweetPage
                  _navPush(context, PublishTweetPage());
                  break;
                case 1:
                //TweetBlackHousePage
                  _navPush(context, TweetBlackHousePage());
                  break;
                //AboutPage
                case 2:
                  _navPush(context, AboutPage());
                  break;
                //SettingsPage
                case 3:
                  _navPush(context, SettingsPage());
                  break;
              }
            },
          );
        },
        separatorBuilder: (context, index) {
          //后面的条目才会有分割线
          if(index == 0){
            return Divider(
              height: 0.0,
            );
          }else{
            return Divider(
              height: 1.0,
            );
          }
        },
      ),
    );
  }

  //条目跳转
  _navPush(BuildContext context, Widget page) {
    //路由跳转
    Navigator.push(context, MaterialPageRoute(builder: (context) => page));
  }
}

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)
  );
}

about_page.dart左侧滑栏的about条目

import 'package:flutter/material.dart';

/**
 * 左侧抽屉 about
 */
class AboutPage extends StatefulWidget {
  @override
  _AboutPageState createState() => _AboutPageState();
}

class _AboutPageState extends State<AboutPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('about'),
      ),
    );
  }
}

publish_tweet_page.dart

import 'package:flutter/material.dart';

/**
 * 左侧抽屉 send
 */
class PublishTweetPage extends StatefulWidget {
  @override
  _PublishTweetPageState createState() => _PublishTweetPageState();
}

class _PublishTweetPageState extends State<PublishTweetPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('send'),
      ),
    );
  }
}

settings_page.dart

import 'package:flutter/material.dart';

/**
 * 左侧抽屉 settings
 */
class SettingsPage extends StatefulWidget {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('settings'),
      ),
    );
  }
}

tweet_black_house.dart

import 'package:flutter/material.dart';

/**
 * 左侧抽屉 motivation
 */
class TweetBlackHousePage extends StatefulWidget {
  @override
  _TweetBlackHousePageState createState() => _TweetBlackHousePageState();
}

class _TweetBlackHousePageState extends State<TweetBlackHousePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('motivation'),
      ),
    );
  }
}

news_list_page.dart主界面的News

import 'package:flutter/material.dart';

/**
 * 主界面News
 */
class NewsListPage extends StatefulWidget {
  @override
  _NewsListPageState createState() => _NewsListPageState();
}

class _NewsListPageState extends State<NewsListPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('News'),
      ),
    );
  }
}

profile_page.dart主界面的My

import 'package:flutter/material.dart';

/**
 * 主界面My
 */
class ProfilePage extends StatefulWidget {
  @override
  _ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My'),
      ),
    );
  }
}

tweet_page.dart主界面的Updates

import 'package:flutter/material.dart';

/**
 * 主界面Updates
 */
class TweetPage extends StatefulWidget {
  @override
  _TweetPageState createState() => _TweetPageState();
}

class _TweetPageState extends State<TweetPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Updates'),
      ),
    );
  }
}

discovery_page.dart主界面的Find

import 'package:flutter/material.dart';

/**
 * 主界面find
 */
class DiscoveryPage extends StatefulWidget {
  @override
  _DiscoveryPageState createState() => _DiscoveryPageState();
}

class _DiscoveryPageState extends State<DiscoveryPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Find'),
      ),
    );
  }
}

Constants.dart

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

效果图如下：