两个半月的业余时间用Flutter做了个app-技术篇
技术背景: 做了几年前端,会用node
写这篇文章是自己对这段时间做个技术总结,记录一些开发过程中比较难以解决的问题和经验,同时希望对Flutter感兴趣但还在观望的同学加入Flutter开发,简单易上手
学习资料
Flutter 实战, 入门可以看这本电子书,很多flutter知识都是从这里学习到的,在此感谢下作者
一些小结
1. 路由跳转
- 注册路由
main.dart
MaterialApp(
routes:{
'my_page': (context) => MyPage(),
...
}
)
- 点击跳转
xxx.dart
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来控制大小:
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证书设置指南
极光推送文档, 比腾讯信鸽的详细且新
奇怪的问题
- 连接真机失败
Error connecting to the service protocol: HttpException
刚开始切换wifi还好使,后来渐渐这招失败次数也多了;意外发现重新连接下手机就可以了,不过最近发现这招也有不行的时候了,虽然失败次数少。
Check failed: vm. Must be able to initialize the VM
忘了改了什么,用vscode运行和xcode运行都不行,用android studio试了下居然可以了,也是很奇怪
- 安卓真机运行不了
先运行安卓模拟器,再运行真机
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名为小鱼干,主要功能是提供上门喂猫服务,欢迎下载使用