【Flutter】- 撸个登录页

简介

距离上一篇【Flutter】- 启动篇文章，已经有一段时间了。中间学习了有关socket实现Im聊天相关的知识，后面也会出一系列的专题出来。公司也在用socket实现IM聊天。最近在学习网页相关的知识，目的就是往大前端发展。目标就是在学好Android原生的基础上纵向发展。所以最近是网页，RN，Flutter在交替学习。个人觉得，通过实战是学习的最好方式。

效果图

jjj.gif

知识点

• 常用布局使用
• 网络请求
• 计时器
• 自定义flutter插件
• 等等

实现

本文只讲解用到的知识点，不会贴出具体的布局和实现细节。
第一：这些都是比较基础的，我告诉学习的地方，自己去查看。
第二：太多代码，不方便贴。
第三：自己也是初学者，很多代码可能写得并不是很好。

1. 布局实现
   大体的布局代码我就不贴了，这里说几个注意的地方。

   • 键盘弹起来时，提示布局超出屏幕高度。
     这里可以用SingleChildScrollView或者ListView套在布局的外层。用法参考：可滚动组件

   • 输入框的样式定义
     刚开始使用的时候，总是发现不能达到自己想要的效果，经过一番折腾，实现了和公司应用登录输入框一样的效果。

     账户和密码输入框实现如下

     Widget createTextField(BuildContext context, String hintText, int type,autovalidate,TextEditingController _controller) {
     return Theme(
     data: new ThemeData(primaryColor: Colors.red, hintColor: Color(0xffa8afc3)),
     child: new ConstrainedBox(
       constraints: BoxConstraints(
         minHeight: 54,
       ),
       child: new Padding(
         padding: EdgeInsets.only(left: 19, top: 15),
         child: new TextFormField(
           obscureText: 2 == type,
           controller: _controller,
           // 使用maxLength在有最大长度和当前输入长度的提示
           // maxLength: 1 == type ? 11 : 18,
           inputFormatters: [
             LengthLimitingTextInputFormatter(1 == type ? 11 : 18)
           ],
           // 是否开启自动验证
           autovalidate: autovalidate,
           validator: (value) {
             return value.length < 4 && value.length > 0 ? "密码长度不够4位" : null;
           },
           decoration: new InputDecoration(
               contentPadding: EdgeInsets.all(10.0),
               hintText: hintText,
               hintStyle: TextStyle(
                 color: Color(0xffa8afc3),
               ),
               focusedBorder: UnderlineInputBorder(
                   borderSide: BorderSide(color: Colors.blue)),
               border: UnderlineInputBorder()),
         ),
       ),
     ),
     );
     }
     

2. 计算器

   void _startTimer() {
    bool isActive = null == _timer ? false : _timer.isActive;
    if (isActive) {
      return;
    }
    // 计时器（`Timer`）组件的定期（`periodic`）构造函数，创建一个新的重复计时器。
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
    if (_seconds == 0) {
        _cancelTimer();
        _seconds = widget.countdown;
        inkWellStyle = _availableStyle;
        setState(() {});
        return;
      }
      _seconds--;
      _verifyStr = '${_seconds}s';
      setState(() {});
      if (_seconds == 0) {
      _verifyStr = '重新发送';
      }      
    });
   }
   

• 图形验证
  使用Flutter提供的Dialog组件，然后加入自己的图形验证布局，监听手势，做边界判断来实现。
  参考：对话框详解和手势识别
• 网络请求
  通过HttpClient发起HTTP请求和Http请求-Dio http库

Flutter插件开发

有些时候，我们需要使用Android（IOS）原生里面有些东西，而Flutter又没有提供相关的支持，这时候就需要我们自己实现从Flutter调用原生方法获取信息。

• 新建Flutter插件modle
  这个和建modle差不多，只是选flutter插件类型的modle就可以了。创建好了，即可以在Flutter插件工程下面添加原生代码了。
• 引用本地Flutter插件库
  参考：包管理。
  引用后，执行"Packages get",工程会自动完成使用插件的后续工作，比如插件的注册等。

如果想知道为什么可以从Flutter执行native方法，可以去跟踪一下插件注册和Flutter调用的地方。

• 举例
  原生端

  class NativeBridgePlugin: MethodCallHandler {
      ...
      override fun onMethodCall(call: MethodCall, result: Result) {
        when(call.method){
          "getBuildType" ->{
            result.success(BuildConfig.BUILD_TYPE)
          }
          "getPlatformVersion" -> {
            result.success("Android ${android.os.Build.VERSION.RELEASE}")
          }
          else -> {
              result.notImplemented()
          }
        }
      }
  }
  

  Flutter端

  class AppBuildInfo{
    static const MethodChannel _channel = const MethodChannel('native_bridge');
  
    static Future buildType() async{
      String res = await _channel.invokeMethod('getBuildType');
      return res;
    }
  }
  

源码地址

flutter_app