两个半月的业余时间用Flutter做了个app-技术篇「终于解决」

技术背景: 做了几年前端,会用node 写这篇文章是自己对这段时间做个技术总结,记录一些开发过程中比较难以解决的问题和经验,同时希望对Flutter感兴趣但还在观望的同学加入Flutter开发,简单易上手

学习资料

Flutter 实战, 入门可以看这本电子书,很多flutter知识都是从这里学习到的,在此感谢下作者

一些小结

1. 路由跳转

1. 注册路由 main.dart

MaterialApp(
  routes:{
    'my_page': (context) => MyPage(),
    ...
  }
)

IT知识分享网

2. 点击跳转 xxx.dart

IT知识分享网  FlatButton(
    onPressed: () {
      // 可通过arguments传递参数
      Navigator.pushNamed(context, 'my_page', arguments: {'data': data});
    }
  )

2. 循环widget

Row(children: strings.map((item) => Text(item)).toList());

3. 宽高设置

前端开发中html标签是可以自行设定宽高,颜色,但在flutter中只有几个widget可以(刚开始接触有点不习惯)

// 可设置宽高及颜色
Container(
  // 满屏
  width: MediaQuery.of(context).size.width,
  height: 200,
  color: Colors.blue
)
// 可设置宽高
SizedBox(
  width: 200,
  height: 200
)

• 如果要给按钮设置大小,便可通过在外包裹个Container来控制大小:

IT知识分享网Container(
  width: 80,
  height: 30,
  child: FlatButton()
)

• 也可以使用ButtonTheme来修改按钮大小:

ButtonTheme(
  minWidth: 65.0,
  height: 24.0,
  child: OutlineButton()
)

• 图片可自行设置宽高

4. 区分环境

把启动文件按环境分为main_local,main_dev.dart,main.dart,根据需要启动不同文件,详见 Flutter 实现根据环境加载不同配置

• android studio设置运行环境, 设置后可以很快切换环境

• vscode 设置launch.json文件的"program": "lib/main.dart"为不同的启动文件即可

不过带来的问题是涉及main.dart的修改都需要改三份文件

5. flutter封装的组件

flutter封装了一些组件,可以让开发者专注于业务,如TabBar, DatePicker等

6. dio增加配置信息

token,版本号,ip等信息需要由app传到服务端,不能每次请求都获取一遍这些信息,可以统一设置一次 dao_basis.dart

Dio dio = Dio()..interceptors.add(InterceptorsWrapper(
  // 请求时的处理
  onRequest: (RequestOptions options) async {
    String _platform = 'android';
    String _version = packageInfo.version;
    options.headers..addAll({
      'platform': _platform,
      'version': _version,
    })
  }
  // 相应时的处理
  onResponse: (Response options) async {
    // 对响应状态码如401的处理
    if (options.data['code'] == 401) {
      ...
    }
  }
  // 发生错误时的处理
  onError: (DioError err) {
    ...
  }
))

user_dao.dart

// 其他请求引用上个文件即可
import 'dao_basis.dart';
Response res = await dio.get('xxx); 

7. ios证书设置指南

极光推送文档, 比腾讯信鸽的详细且新

奇怪的问题

1. 连接真机失败 Error connecting to the service protocol: HttpException 刚开始切换wifi还好使,后来渐渐这招失败次数也多了;意外发现重新连接下手机就可以了,不过最近发现这招也有不行的时候了,虽然失败次数少。

2. Check failed: vm. Must be able to initialize the VM 忘了改了什么,用vscode运行和xcode运行都不行,用android studio试了下居然可以了,也是很奇怪

3. 安卓真机运行不了 先运行安卓模拟器,再运行真机

4. MissingPluginException(No implementation found for method startWork on channel xxx) 新安装的包,有时需要到ios目录pod install

使用的第三方包

罗列下用到的第三方包(常用的如dio,flutter_swiper等就不列了),省的大家再去寻找啦

弹窗

fluttertoast 使用很方便,不需要传context,引入后随意调用; 不过貌似取消不了,详见issue Fluttertoast.cancel() not work

loading

进行网络请求等操作时的loading状态 modal_progress_hud

网络图片处理

缓存网络图片,且带有loading的placeholder cached_network_image

下拉刷新

下拉刷新及上拉加载 flutter_easyrefresh

app名为小鱼干,主要功能是提供上门喂猫服务,欢迎下载使用

两个半月的业余时间用Flutter做了个app-项目篇暨年终总结 | 掘金年度征文