一、删除掉右上角debug标志

debugShowCheckedModeBanner: false,

二、显示图片

显示图片需要手动创建文件夹
1)在根目录创建images文件夹,在里面分别创建2.0x 3.0x文件用于屏幕适配
2)在pubspec.yaml文件中将ass注释打开
3)注意打开注释后整理代码不然会提示有空格错误
4)下列代码片段只是测试用味蕾屏幕效果将宽高写死

child: new Image.asset(
            "images/icon_welcome.png",
            fit: BoxFit.fitHeight,
            width: 450,
            height: 896,
          ),

三、添加画面背景图片

• 注意这里使用背景图片的时候return不要使用Column否则显示不全

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
          decoration: BoxDecoration(
              image: DecorationImage(
            image: AssetImage("images/icon_welcome.png"),
            fit: BoxFit.cover,
          )),
          child: Center(
            child: Text('Hello Wolrd', style: TextStyle(fontSize: 22.0, color: Colors.white),),
          ),
    );
  }
}

四、计时器功能

• 使用Timer之后要在dispose生命周期中销毁

class _MyHomePageState extends State<MyHomePage> {
  Timer _timer;
  var count = 0;
  String textContent() {
    if (count > 0) {
      return '${count} s';
    } else {
      print('应该跳转界面');
      return '0s';
    }
  }

  @override
  void initState() {
    //Flutter 生命周期 创建时在build之后调用
    print('开始倒计时');

    count = 5;
    final call = (timer) {
      // 预定时间小于1的时候结束计时器
      if (count < 1) {
        Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(
            builder: (BuildContext context) => new NavigationBarView()), (//跳转到主页
            Route route) => route == null);
        _timer.cancel();
      } else {
        setState(() {
          // 大于一的时候重新赋值
          count -= 1;
        });
      }
    };
    if (_timer == null) {
      _timer = Timer.periodic(Duration(seconds: 1), call);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("images/icon_welcome.png"),
            fit: BoxFit.cover,
          )),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          new Container(
            child: new Text(
              textContent(),
              style: TextStyle(
                  fontSize: 20,
                  color: Colors.black,
                  decoration: TextDecoration.none),
            ),
            margin: EdgeInsets.fromLTRB(0, 50, 20, 0),
          )
        ],
      ),
    );
  }

  @override
  void dispose() {
    // 界面销毁后将计时器取消
    _timer.cancel();
    super.dispose();
  }

五、底部导航栏

• 部分内容解释

class NavigationBarState extends State<NavigationBarPage> {
  int index = 0;
  List<Widget> pages = new List();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    pages
      ..add(HomeViwe())
      ..add(ObjectView())
      ..add(NavigationApp())
      ..add(IndividualView());
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        // 主动显示导航栏上标的文字
        // 选中时才显示标签上的文字 shifting
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
              icon: Image(
                image: AssetImage("images/icon_home.png"),
                width: 35,
                height: 35,
              ),
              title: Text(
                "首页",
                style: TextStyle(color: Colors.black),
              ),
              activeIcon: Image(
                image: AssetImage("images/icon_home_click.png"),
                width: 35,
                height: 35,
              )),
          BottomNavigationBarItem(
              icon: Image(
                image: AssetImage("images/icon_object.png"),
                width: 35,
                height: 35,
              ),
              title: Text(
                "项目",
                style: TextStyle(color: Colors.black),
              ),
              activeIcon: Image(
                image: AssetImage("images/icon_object_click.png"),
                width: 35,
                height: 35,
              )),
          BottomNavigationBarItem(
              icon: Image(
                image: AssetImage("images/icon_navigation.png"),
                width: 35,
                height: 35,
              ),
              title: Text(
                "导航",
                style: TextStyle(color: Colors.black),
              ),
              activeIcon: Image(
                image: AssetImage("images/icon_navigation_click.png"),
                width: 35,
                height: 35,
              )),
          BottomNavigationBarItem(
              icon: Image(
                image: AssetImage("images/icon_individual.png"),
                width: 35,
                height: 35,
              ),
              title: Text(
                "个人",
                style: TextStyle(color: Colors.black),
              ),
              activeIcon: Image(
                image: AssetImage("images/icon_individual_click.png"),
                width: 35,
                height: 35,
              ))
        ],
        currentIndex: index,
        onTap: (int i) {
          setState(() {
            index = i;
          });
        },
      ),
      body: pages[index],
    );
  }

六、首页上的轮播图

• 首先在pubspec.yaml文件中添加轮播图依赖(注意添加位置dependencies/flutter:下面添加)

flutter_swiper: ^1.0.6

class HomePageState extends State<HomePage> {
  List<String> list = new List();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    list
      ..add("http://sw-mirror.com/flutter%2Ftestpng.png")
      ..add("http://sw-mirror.com/flutter%2FThailand.png");
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text("首页"),
        ),
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: 200,
          child: Swiper(
            pagination: //添加标记码
                SwiperPagination(alignment: Alignment.bottomCenter),
            autoplay: true, //设置自动播放
            itemCount: list.length, //设置item的个数
            itemBuilder: (BuildContext context, int index) {
              //设置item的内容
              return Image.network(
                list[index],
                fit: BoxFit.fill,
              );
            },
          ),
        ));
  }
}

GitHub仓库地址

未完待续