零Flutter基础，四天搞定Flutter玩Android客户端攻略

原做者： 有女票的程序狗
连接： https://www.jianshu.com/p/e8d...

身为android开发者，在这几天深深感到flutter容易上手的特性，尤为是dart，稍微了解下基本语法，就能直接写，爽的一批~

废话少说，先当作果

0  Day0 环境搭建

环境搭建很简单，就是下个 Flutter SDK，而后设置设置环境变量什么的就差很少了，我这里是按照 Flutter 中文网教程搭建，没遇到问题。

附上地址：

https://flutterchina.club/get...

1 Day1 dart语法学习 + Flutter基本开发了解

dart 基本语法学习，看这里便可

 https://book.flutterchina.clu...

有 Java 开发基础，花半小时了解 dart 语言特型就能上手开发了。

Flutter 基础开发须要了解的一些知识点

• Widget 概念
• 路由管理
• 包引用
• Widget 状态更新
• 网络请求 + 数据解析
• 异步操做

小 Tip： 阿里某个团队开源了一个『Flutter Go』项目，遇到不会的原生组件在上面直接搜名字便可看到使用方法，属性说明什么的，很是之方便！（开源万岁）

• “阿里为你们学习Flutter操碎了心”

项目地址：

https://github.com/alibaba/fl...

能够仔细作一下 Flutter 中文网的这个教程

https://flutterchina.club/get... 

初步了解Flutter，作完这个教程，基本就能够上手开发咱们的简版『玩Android』客户端了。

2 Day2 基本框架搭建

最外层用 Scaffold 包裹，Scaffold 直接支持底部导航栏这种布局，咱们只要实现 body 和 bottomNavigationBar 就能够。

页面容器咱们用 PageView 实现， 底部导航栏用 BottomNavigationBar 实现。

Scaffold(
    body: PageView(
      controller: _pageCtr,
      physics: NeverScrollableScrollPhysics(),
      children: <Widget>[
        HomePage(),
        ProjectPracticePage(),
        WechatArticlePage(),
      ],
    ),
    bottomNavigationBar: BottomNavigationBar(
        currentIndex: _tabIndex,
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.deepPurpleAccent,
        onTap: (index) => _click(index),
        items: [
          BottomNavigationBarItem(
              title: Text('推荐'), icon: Icon(Icons.home)),
          BottomNavigationBarItem(
              title: Text('项目'), icon: Icon(Icons.map)),
          BottomNavigationBarItem(
              title: Text('公众号'), icon: Icon(Icons.contact_mail)),
        ]),
  )

三个界面都是有状态的，因此都继承 StatefulWidget， 这样就能简单实现一个底部导航栏切换页面的功能。

3 Day3 列表建立+网络数据获取

文章和项目模块，用的都是顶部导航栏+列表的形式展现信息

• 顶部导航栏选择flutter自带的 TabBar
• 列表仍是选择flutter自带的 ListView

关于如何使用，Flutter Go 中一查便知

须要注意的是，因为切换到这个模块就须要网络请求，而且有数据后才开始绘制界面，因此咱们这里在构建Widget的时候须要 FutureBuilder，FutureBuilder使用方法能够在文末的项目中找到。

主要就是能够拿到数据回调的状态，而后根据这个状态再构建相应的widght。

网络操做我选择的是 Dio 2.0，因为刚出来不久，而且和1.0仍是有些不一样，网上大部分文章都是基于1.0的，因此建议直接看官方文档学习，地址： 

https://github.com/flutterchi...

个人项目中用单例封装了一下网络请求操做，每一个api请求封装成一个方法，使用起来也很方便，具体在文末项目中能够找到。大概就是长这个样子：

我先调试的是网络请求，获取到正确的数据后，测试 TabBar，顶部导航栏没有问题，再建立ListView页，条目的话就用随便展现一个标题什么的就能够。

4 Day4 跳WebView + ListView完善

为何我把 ListView 条目完善放到最后，由于我以为在代码中写视图是在是太麻烦了，那么多层，确定是一个难啃的硬骨头，结果上手以后发现，其实也就是看起来很麻烦，真正写的时候，虽然不如android中XML文件方便，可是确实有一种行云流水的感受QAQ。

好话说在前头，写起来虽然问题不大，可是真的不符合主流好吗，写完看的我头大，随便放张图感觉下：

后期维护成本也是问题，但愿谷歌在这方面作一些改变，让 Flutter 能够更好的发展下去。

在设计好一个视图后，能够横向纵向一层一层定义结构，行就用 Row，列就用 Colunm，使用方法就在 Flutter Go 上去查。在 Flutter 中，万物皆为 Widght，能够在图中看到，即便是一个边距之类的，都会用一个 Widget 实现。

点击事件也是一个 Widght， 用 GestureDetector 实现。有两个参数，一个是 onTap(), 也就是点击的回调，一个是 child，也就是咱们须要点击事件的 widght。

这个项目中，点击事件都是跳 WebView 页，而后看下 WebView 页怎么建立。若是不须要状态管理，那么就能够正常建立一个界面，而后child用 WebviewScaffold 实现，便可实现 WebView 的功能。

总结

大佬都说大前端是趋势，身为客户端开发者，了解一些大前端开发技术绝对不亏，甚至真香哈哈。

贴了那么多地址，最后也把这个项目的地址贴上来吧 ：

https://github.com/chinahaoza...