作为一名长期web前端开发，这次涉及app开发，我自我感觉确实有点膨胀。本篇我主要是以web开发者在flutter开发摸索中碰到的一些问题，进行记录。
百度“flutter”赫然出现flutter中文，点击去链接也是可以看到快速开始的引导按钮：
image.png
主页向下也是介绍了fluttter的相关内容。大致意思就是flutter是解决UI层面快速开发ios跟android应用的利器。回到主题点击快速开始。出现不同操作平台的安装介绍
image.png
具体配置就不去赘述，配置了两种系统，本人踩坑之处有以下几点：
mac环境下：1.配置path，久久不能找到正确的路径，后来发现，直接解压开flutter目录，然后打开终端编写export PATH=之后拖动文件夹bin到终端窗口运行就ok。
两种环境：1.安卓studio在模拟器调试hello,world程序依赖包装载失败问题（一定记住要“科-学上网”)
其实写到这里，我要吐槽一句，这个地址：https://flutter.cn/docs
很明显写的比中文官网要很多嘛~建议收藏。
作为一个web开发者我主要是从以下几点切入flutter学习的。1.画UI 2.数据请求 3.用户数据存储（既数据持久化）4.页面状态管理。
首先说下UI，flutter推崇思想是万物皆是Widget，很好，这跟我们web当前流行框架设计思想雷同。再来看看其内部组件。
Text(
"我是文本组件",
style: TextStyle(fontSize: 30.0),
)
乍一看，有点像JSX语法又有点像ActionScript(这是一个已经没人学的语言)甚至还有点想js的fuction调用。例子中是一个典型的文本组件，其接受了两个参数，第一个参数是文字内容，第二个参数是文本组件的样式。借助安卓studio或者vsCode咱们可以看到各个组件所有的属性。写多了也就习惯了。
在我学习了一周之后我就可以拿平时小程序项目的界面练手了，主要用到的组件有Column,Row,Expanded,listView,Container,Text等等等。至于什么时候可以对绘制界面有信息呢，等你能抛开书本、教程把这个界面画出来就可以了。
image.png
推荐flutter适配方案：https://github.com/OpenFlutter/flutter_screenutil
下面聊一聊数据请求，官方给出的请求组件有几种，我选择了Dio，因为他跟我之前玩的axios很像，有头部定制，有请求拦截器，也支持promise风格的调用。注意版本很关键！！为什么这么说呢，因为flutter当前在快速发展期，和当年的react一样，同样是Dio版本不一样写法也不一样。在摸索中我封装出来了一个自己的Dio请求小库。
import 'dart:io';
import 'package:dio/dio.dart';
import 'dart:convert' as Convert;
import 'package:shared_preferences/shared_preferences.dart';
import '../models/auth.dart';
class Request {
Request _instance;
Dio dio = new Dio();
getInstance(){
if(null == _instance){
_instance = new Request();
initial();
}
return _instance;
}
initial()async{
dio.options.baseUrl="你的请求前缀";
dio.options.connectTimeout=10000;
dio.options.receiveTimeout=10000;
dio.options.responseType=ResponseType.JSON;
}
postFormData(String url, data) async{
dio.options.contentType = ContentType.parse("application/x-www-form-urlencoded");
var response = await post(url,data);
return response;
}
get(String url) async{
var response = await request('get',url,null);
return response;
}
post(String url, data) async{
var response = await request('post',url,data);
return response;
}
request(String type,String url, data) async{
SharedPreferences prefs = await SharedPreferences.getInstance();
var authInfo = prefs.getString('authInfo');
if(authInfo.isNotEmpty){
print(authInfo);
Auth auth = Auth.fromJson( Convert.jsonDecode(authInfo) );
dio.options.headers = {
//这里看你自己仙姑需要
};
}
Response response;
try{
if(type == 'get'){
response = await dio.get(url);
}else{
response = await dio.post(url,data: data??{});
}
return response;
}on DioError catch(error){
print(error);
}
}
}
你以为封装完了请求方法就可以自由使用api数据了？太天真了。在这个问题上我是彻底跪了。跪在两点：1.请求回来的用户数据怎么持久化 2.存下来的用户数据怎么用。
关于持久化，我用了这个辅助工具:shared_preferences,关于数据使用，我使用了https://javiercbk.github.io/json_to_dart/。请求数据拿到是不能直接用的，比如有特殊字符。所以必须要转成dart model类。关于数据转换，推荐使用：
import 'dart:convert' as Convert;
好像一不小心在数据请求方案那里把数据持久化问题带过了。那就不说了。
关于状态管理，强烈推荐Provider，亲儿子，注意是亲儿子。具体参照地址：https://flutter.cn/docs/development/data-and-backend/state-mgmt/intro
搞懂这三项：
ChangeNotifier
ChangeNotifierProvider
Consumer
就完事儿了。
这是我的学习思路，后面还会更新，写出来，怕自己忘记，也希望可以帮到别人。
网友评论