前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter版本玩Android客户端(6)——登录注册模块以及文章收藏与取消

Flutter版本玩Android客户端(6)——登录注册模块以及文章收藏与取消

作者头像
用户1108631
发布2019-08-19 10:37:12
2.9K0
发布2019-08-19 10:37:12
举报
文章被收录于专栏:每天学点Android知识

本篇继上篇Flutter版本玩Android客户端(5)——微信公众号tab点击跳转后,完成了登录注册模块,以及文章收藏与取消。

但仍有部分没有完成,比如登录状态的同步,drawer的header中没有因登录状态而改变。

先看效果

登录注册

玩Android登录后,会返回一个cookie,需要将该cookie保存,然后在一些post接口上带上该cookie表示用户信息,比如收藏、取消收藏都隐含了cookie。

保存cookie的实现

这里是通过给Dio增加了一个拦截器来实现的,具体代码如下:

代码语言:javascript
复制
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函数,比如注册时对确认密码的校验,第二次输入的密码得和第一次相同。

代码语言:javascript
复制
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,然后在图标点击时进行状态的切换,以收藏为例,代码如下:

代码语言:javascript
复制
/// 收藏
  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 的请求
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-08-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 每天学点Android知识 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 登录注册
    • 保存cookie的实现
      • 登录注册模块
        • 状态保存
        • 收藏、取消收藏
          • Toast
          • 三方库
          • 参考
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档