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;
  }

其中使用了path_provider库获取了路径,作为cookie保存的路径,使用了cookie_jar库作为保存、加载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

三方库

参考

关注我的技术公众号,不定期会有技术文章推送,不敢说优质,但至少是我自己的学习心得。微信扫一扫下方二维码即可关注:
二维码

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页