flutter实战

本篇会用小示例的方式，更全面的使用flutter，进一步的强化如何在项目中开发。

一，列表显示

加载一个列表如下效果

1，准备数据
在项目lib下创建一个person.dart实例用于存放数据

class Person{
  const Person({
    this.name,
    this.address,
    this.imageUrl,
});
  final String name;
  final String address;
  final String imageUrl;
}
final List<Person> persons=[
  Person(
    name: "小明",
    address: "北京市第五中学",
    imageUrl: "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"
  ),
  Person(
      name: "小红",
      address: "北京市第五中学",
      imageUrl: "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"
  ),
  Person(
      name: "小张",
      address: "北京市第五中学",
      imageUrl: "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"
  ),
];

2，创建列表Widget
导入实例person.dart

import 'package:flutter/material.dart';
import 'person.dart';
class PersonWidget extends StatelessWidget {
  Widget _listItemBuilder(BuildContext context, int index) {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.all(8.0),
      child: Column(
        children: <Widget>[
          Image.network(
            persons[index].imageUrl,
            width: 100.0,
            height: 100.0,
          ),
          SizedBox(height: 16.0,),
          Text(persons[index].name,
            style: TextStyle(
                fontSize: 20.0,
                color: Colors.black
            ),),
          SizedBox(height: 16.0,),
          Text(persons[index].address,
            style: TextStyle(
                fontSize: 16.0,
                color: Colors.black
            ),)
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      itemCount: persons.length,
      itemBuilder: _listItemBuilder,
    );
  }
}

3，导入自己的PersonWidget组件

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey[100],
        appBar: AppBar(
          title: Text("flutter"),
          elevation: 30.0,
        ),
        body: PersonWidget(),//引用列表Widget
      ),
      theme: new ThemeData(primarySwatch: Colors.yellow),
    );
  }
}

二，导航栏和Tab选项卡

实现一个支持手势滑动的Tab选项卡功能

第一步，先指定主题样式

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: TabDemo(),//这里是要引入的导航栏和选项卡代码
      theme: new ThemeData(
          primarySwatch: Colors.yellow,
          highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70),
    );
  }
}

theme是应用主题样式，有关更多样式可以查看 Theme

第二步，编写导航栏和选项卡代码

class TabDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        backgroundColor: Colors.white70,
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'menu',
            onPressed: ()=>debugPrint('点击更多'),
          ),
          title: Text('导航栏'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              tooltip: "search",
              onPressed: () => debugPrint('点击搜索'),
            )
          ],
          elevation: 5.0,
          bottom: TabBar(
            tabs: <Widget>[
              Tab(icon: Icon(Icons.account_box)),
              Tab(icon: Icon(Icons.account_circle)),
              Tab(icon: Icon(Icons.access_time)),
            ],
          ),
        ),
        body: TabBarView(
            children: <Widget>[
             Text('第一个',style:TextStyle(fontSize: 40.0)),
             Text('第二个',style:TextStyle(fontSize: 40.0)),
             Text('第三个',style:TextStyle(fontSize: 40.0)),
            ]),
         //侧滑抽屉部分 下边介绍
         drawer: DrawerDemo(),
         //底部导航栏   下边介绍
         bottomNavigationBar: BottomBarDemo()),
      ),
    );
  }
}

DefaultTabController，默认的选项卡。 length就是选项卡的数量，这里指定的是3。Scaffold是纸墨设计布局结构，有关介绍可以看Scaffold。Scaffold中使用了appBar，appBar就是导航栏和Android中的ActionBar类似，更多介绍可以查看AppBar。在bottom中使用了TabBar，TabBar就是选项卡，这里指定了三个图标，如上图所示。接着看body中的TabBarView，这是TabBar的内容，在这指定了三个文本，更多介绍可以查看TabBar。

三，侧滑抽屉内容

侧滑抽屉效果图，支持侧滑和点击menu图标。

代码实现部分

class DrawerDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          UserAccountsDrawerHeader(
            accountName: Text('我是传奇'),
            accountEmail: Text('1135320759@qq.com'),
            currentAccountPicture: CircleAvatar(
              backgroundImage: NetworkImage('https://avatars2.githubusercontent.com/u/20411648?s=460&v=4'),
            ),
          ),
          ListTile(
            title: Text('内容',textAlign: TextAlign.right,),
            trailing: Icon(Icons.access_time),
            onTap: ()=>Navigator.pop(context),
          )
        ],
      ),
    );
  }

}

上文中用到了drawer，DrawerDemo就是drawer实现的内容。

drawer: DrawerDemo(),//侧滑抽屉部分

DrawerDemo中使用了ListView，其中包含UserAccountsDrawerHeader和ListTile。ListTile中添加了一个文本和一个图标，而且指定了点击事件，点击后让drawer消失。如果想通过点击menu显示drawer，可以把menu按钮去掉，因为默认实现了这种效果，只要有drawer就会有menu按钮。

四，做一个PageView