我的第二天 开始制作底部导航和flutter_swiper 的使

最近比较忙，从flutter 环境搭建好之后，就没有在去编写与Flutter 相关的项目。不过今天终于有时间了，今天周末抽出了1个小时的时间来完成代码的编写和吸收。
今天主要为大家带来了flutter 底部导航和Swiper 的使用。
先来看看代码

import 'package:flutter/material.dart';
import 'package:meishuang_dart/ui/mine/UserMain.dart';
import 'package:meishuang_dart/ui/dropin/DropIn.dart';
import 'package:meishuang_dart/ui/order/OrderList.dart';
import 'package:meishuang_dart/ui/store/StoreMain.dart';
import 'package:meishuang_dart/ui/menu/HomePage.dart';

#程序主入口
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,//定义主题颜色
      ),
      home: MyHomePage(),//我的首页面
    );
  }
}

///我的首页面详细代码
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 5,
//Scaffold 可以很轻松的完成带有侧边栏且带有底部导航的容器布局
      child: Scaffold(
          appBar: AppBar(
            title: Text('首页'),
            centerTitle: true,
          ),
//因为今天主要来完成底部导航的代码故此使用了bottomNavigationBar。
          bottomNavigationBar: Container(
            decoration: BoxDecoration(color: Colors.deepOrange),
            height: 50,
            child: TabBar(
              labelStyle: TextStyle(fontSize: 10),
              tabs: <Widget>[ //定义底部菜单
                Tab(
                    text: '首页',
                    icon: Icon(
                      Icons.account_balance,
                    )),
                Tab(
                    text: '上门',
                    icon: Icon(
                      Icons.account_balance,
                    )),
                Tab(
                    text: '到店',
                    icon: Icon(
                      Icons.clear_all,
                    )),
                Tab(
                    text: '订单',
                    icon: Icon(
                      Icons.access_time,
                    )),
                Tab(
                    text: '我的',
                    icon: Icon(
                      Icons.account_circle,
                    ))
              ],
            ),
          ),
          body: TabBarView( //底部菜单对应的试图
            children: <Widget>[HomePage(), DropIn(),StoreMain(),OrderList(), UserMain()],
          )),
    );
  }
}

完成后的效果：

Screenshot_1572689066.png

这时候可能有人要说了，上面还有个轮播图呢，别忘记了。哈哈哈哈~~~~~
先别着急，我这边马上来说明那个轮播图的实现：
首先引入此包：

  flutter_swiper: ^1.1.6

如果不知道去哪个文件添加引入的文件，我这里也给出了文件名称

pubspec.yaml

通过此文件可以来完成第三方包的引用。
接下来咱们看下轮播图的代码：

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

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(child: Column(
      children: <Widget>[
        SwiperTop()
      ],
    ),);
  }

}

class SwiperTop extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return SwipePageState();
  }

}

class SwipePageState extends State<SwiperTop>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 200,
      child: Swiper(
        itemCount: 3,
      itemBuilder: _SwiperBuilder,
      pagination: new SwiperPagination(
        builder: DotSwiperPaginationBuilder(
          color: Colors.deepOrange,
          activeColor: Colors.white
        )
      ),
        controller: SwiperController(),
        scrollDirection: Axis.horizontal,//设置轮播方向
        autoplay: true,
        onTap: (index) =>print('点击了${index}个'),
      ),

    );
  }


  Widget _SwiperBuilder(BuildContext context,int index){
    return Image.network('https://picsum.photos/450/220?random=2',
      fit: BoxFit.fill,);
}

}