Flutter版本玩Android客户端(6)——登录注册模块以及文章收藏与取消
Flutter版本玩Android客户端(6)——登录注册模块以及文章收藏与取消
本篇继上篇Flutter版本玩Android客户端(5)——微信公众号tab点击跳转后，完成了登录注册模块，以及文章收藏与取消。
但仍有部分没有完成，比如登录状态的同步，drawer的header中没有因登录状态而改变。
先看效果
登录注册
玩Android登录后，会返回一个cookie，需要将该cookie保存，然后在一些post接口上带上该cookie表示用户信息，比如收藏、取消收藏都隐含了cookie。
保存cookie的实现
这里是通过给Dio增加了一个拦截器来实现的，具体代码如下：
ApiClient._() {
dio = Dio();
dio.options.connectTimeout = TIMEOUT;
dio.options.receiveTimeout = TIMEOUT;
dio.options.responseType = ResponseType.json;
getCookiePath().then((val) {
dio.interceptors
.add(CookieManager(PersistCookieJar(dir: val, ignoreExpires: true)));
});
}
Future<String> getCookiePath() async {
Directory tempDir = await getTemporaryDirectory();
return tempDir.path;
}其中使用了pathprovider库获取了路径，作为cookie保存的路径，使用了cookiejar库作为保存、加载cookie。关于这两个库的使用可以参考后面的三方库链接。
登录注册模块
登录注册模块主要涉及表单Form这个Widget，其中TextFormField使用TextEditingController进行控制，可以通过该类来获取对应TextFormField的数据。一些基本的检查可以交给validate函数，比如注册时对确认密码的校验，第二次输入的密码得和第一次相同。
TextFormField(
controller: _repasswordController,
decoration: InputDecoration(
labelText: '确认密码',
hintText: '密码确认',
icon: Icon(Icons.lock)),
obscureText: true,
//校验
validator: (v) {
return v.trim().length > 0
? (v ==
//通过Controller可以得到文本
_passwordController.text ? null : '两次密码不相同')
: '密码不能为空';
},
),状态保存
目前只在登录成功后保存了用户名、密码、登录成功状态，这部分是通过shared_preference三方库实现的，和后面的Toast一样，后续会通过实现MethodChannel进行替换。
收藏、取消收藏
这里对ArticleListWidget做了一个重构，将其中的文章Item作为一个Widget抽出，会根据Article的collect这个字段进行是否收藏的图标的变化，因此这得是一个StatefulWidget，然后在图标点击时进行状态的切换，以收藏为例，代码如下：
/// 收藏
collectArticle(ArticleItem articleItem) {
ApiClient apiClient = ApiClient.getInstance();
//发送请求
apiClient
.postRequest(
'https://www.wanandroid.com/lg/collect/${articleItem.id}/json',
null)
.then((val) {
BaseModel baseModel = BaseModel.fromJson(val);
if (baseModel.errorCode == 0) {
//收藏成功，更新ui状态
setState(() {
articleItem.collect = true;
});
Fluttertoast.showToast(msg: '收藏成功');
} else {
Fluttertoast.showToast(msg: '收藏失败，${baseModel.errorMsg}');
}
});
}Toast
这里使用了fluttertoast库作为Toast的弹框，后面会通过自己使用MethodChannel通道来进行替换，敬请期待。
关于代码，参考https://github.com/wangli135/wan_android/tree/9a20c840c5ff9a885c3744e5d8af2a28306e1dc9
三方库
- shared_preferences
- fluttertoast
- path_provider
- CookieJar
参考
- Postman 模拟带 cookie 的请求