Flutter30，javasdk64位下载百度云

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 {

//底部导航栏的四个title

final _appBarTitle = [‘News’, ‘Updates’, ‘Find’, ‘My’];

//底部四个导航栏的view

List _navigationIconView;

//当前条目

var _currentIndex = 0;

//底部导航栏对应的四个page

List _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: Ima

【一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义】

浏览器打开：qq.cn.hn/FTf 免费领取

ge.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 {

@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 {

@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 {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(‘settings’),