Flutter学习第十五天:2021年最新版超详细Flutter2,层层深入

       ),
      Container(
        height: 40,
        child:OutlineButton(
          borderSide:new BorderSide(color: Theme.of(context).primaryColor),
          child: new Text('获取验证码',style: new TextStyle(color: Theme.of(context).primaryColor),),
          onPressed: (){
            _data();
          },
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(4.0),
        child: TextField(
          controller: myController1,
          decoration: InputDecoration(
            labelText: "请输入验证码",
            prefixIcon: Icon(Icons.lock),
            hintText: "请输入验证码",
          ),
        ),
      ),
      Container(
        height: 40,
        child:OutlineButton(
          borderSide:new BorderSide(color: Theme.of(context).primaryColor),
          child: new Text('登录',style: new TextStyle(color: Theme.of(context).primaryColor),),
          onPressed: (){
            _login();
          },
        ),
      ),
    ],
  ),
);

}

_data() {
setState(() {
ArsManager.telephone(myController.text);
});
}

_login() {
setState(() {
Map ages={};
ages[‘phone’]=myController.text;
ages[‘code’]=myController1.text;
ArsManager.correct(ages).then((result){
int code = result[“code”];
String message = result[“message”];
if(message==“提交验证码正确”) {
Navigator.of(context).push( MaterialPageRoute(builder: (context)=>Login()));
}else{
print(message);
}
});
});
}
}


这个页面用于我们验证码验证成功的时候跳转页面。 login.dart页面:

import ‘package:flutter/material.dart’;

class Login extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(‘登录成功’,style: TextStyle(decoration: TextDecoration.none,fontSize: 20,color:Color(0xFFFFFFFF)),),
);
}
}


2.配置flutter端的MethodChannel
--------------------------

这里我们主要设置了两个方法: `telephone方法:把手机号码传输给Android端,然后发送验证码的方法`。 传送的值是String类型,返回的值也是String类型 `correct方法:把手机号码和你输入的验证码传输给Android端,然后实现验证验证码输入是否正确`。 传送的值是Map类型,返回的值是dynamic类型 如果对于那个基础类型不是很懂,可以去看一下我的这篇文章[dart的基础类型]( )。

代码如下:

import ‘dart:async’;
import ‘package:flutter/services.dart’;

class ArsManager{
static const MethodChannel _channel=const MethodChannel(‘asr_plugin’);

static Future telephone(String phone) async{
return await _channel.invokeMethod(‘telephone’,phone);
}

static Future correct(Map map) async{
return await _channel.invokeMethod(‘correct’,map);
}
}


3.在Android端配置实现发送验证码和验证验证码需要的方法
-------------------------------

主要使用到三个方法: `send方法:输入值是phone;主要功能就是通过手机号码获取验证码` `submit方法:主要输入值是phone,code;主要功能就是通过手机号码和输入的验证码来验证验证码是否输入正确。` `verification方法:主要输入值是message;主要功能就是回调验证码的输入是否正确,然后把结果发送给flutter端`。

package com.example.mob_plugin;

import android.app.Activity;
import android.text.TextUtils;
import android.util.Log;
import com.mob.MobSDK;
import org.json.JSONException;
import org.json.JSONObject;

import java.util.HashMap;
import java.util.Map;

import cn.smssdk.EventHandler;
import cn.smssdk.SMSSDK;
import io.flutter.plugin.common.MethodChannel;

class ArsManger extends Activity {
EventHandler handler;
boolean f1=false;

public void submit(String phone, String code, Activity activity, MethodChannel.Result result) {
    SMSSDK.submitVerificationCode("86",phone,code);
    verification(activity,result);
}

//点击发送验证码
public void send(String phone) {
    //获取验证码
    SMSSDK.getVerificationCode("86",phone);
}

public void verification(Activity activity,MethodChannel.Result message){
    MobSDK.init(activity, "31d18b327d099","5e6a2e16f58f9c1e374acf77abb70b70");
    handler = new EventHandler(){
        @Override
        public void afterEvent(int event, int result, Object data) {
            if (result == SMSSDK.RESULT_COMPLETE){
                //回调完成
                if (event == SMSSDK.EVENT_SUBMIT_VERIFICATION_CODE) {
                    //提交验证码成功
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            Log.e("123","提交验证码正确");
                            Map<String, Object> resultMap = new HashMap<>();
                            resultMap.put("message", "提交验证码正确");
                            resultMap.put("code", 200);
                            //发消息至 Flutter
                            //此方法只能使用一次
                            message.success(resultMap);
                        }
                    });

                }else if (event == SMSSDK.EVENT_GET_VERIFICATION_CODE){
                    //获取验证码成功
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                           // Toast.makeText(MainActivity.this,"验证码已发送", Toast.LENGTH_SHORT).show();
                            Log.e("123","验证码已发送");
                            Map<String, Object> resultMap = new HashMap<>();
                            resultMap.put("message", "验证码已发送");
                            resultMap.put("code", 200);
                            //发消息至 Flutter
                            //此方法只能使用一次
                            message.success(resultMap);
                        }
                    });
                }else if (event == SMSSDK.EVENT_GET_SUPPORTED_COUNTRIES){
                }
            }else{
                ((Throwable)data).printStackTrace();
                Throwable throwable = (Throwable) data;
                try {
                    JSONObject obj = new JSONObject(throwable.getMessage());
                    final String des = obj.optString("detail");
                    if (!TextUtils.isEmpty(des)){
                        runOnUiThread(new Runnable() {
                            @Override
                            public void run() {
                                Log.e("123","提交错误信息");
                               // Toast.makeText(MainActivity.this,"提交错误信息", Toast.LENGTH_SHORT).show();
                                Map<String, Object> resultMap = new HashMap<>();
                                resultMap.put("message", "提交错误信息");
                                resultMap.put("code", 200);
                                //发消息至 Flutter
                                //此方法只能使用一次
                                message.success(resultMap);
                            }
                        });
                    }
                } catch (JSONException e) {
                    e.printStackTrace();
                }

            }
        }
    };

    SMSSDK.registerEventHandler(handler);
}

}


说一下上面代码中的一段代码: 代码如下: `主要用于把我们verification方法的回调结果返回给flutter,这里属于Android发送给flutter端的一段代码`。

Map<String, Object> resultMap = new HashMap<>();
resultMap.put(“message”, “验证码正确”);
resultMap.put(“code”, 200);
//发消息至 Flutter
//此方法只能使用一次
message.success(resultMap);


4.在Android端配置MethodChannel
--------------------------

主要使用的两个方法: `registerWith方法:等下会用到,主要用于注册plugin,实现通信功能。` onMethodCall方法:这个方法是我们继承`MethodChannel.MethodCallHandler类来使用的方法,主要是功能是接受来自flutter发送过来的数据。`

package com.example.mob_plugin;

import android.app.Activity;
import androidx.annotation.NonNull;

import io.flutter.plugin.common.BinaryMessenger;
import io.flutter.plugin.common.MethodCall;
import io.flutter.plugin.common.MethodChannel;

public class AsrPlugin implements MethodChannel.MethodCallHandler {
private final Activity activity;
ArsManger arsManger=new ArsManger();

public static void registerWith(Activity activity, BinaryMessenger messenger) {
    MethodChannel channel = new MethodChannel(messenger, "asr_plugin");
    AsrPlugin instance = new AsrPlugin(activity);
    channel.setMethodCallHandler(instance);
}

public AsrPlugin(Activity activity) {
    this.activity = activity;
}

@Override
public void onMethodCall(@NonNull MethodCall methodCall, @NonNull MethodChannel.Result result) {
    switch (methodCall.method) {
        case "telephone":
            arsManger.send(methodCall.arguments.toString());
            break;
        case "correct":
            arsManger.submit(methodCall.argument("phone"),methodCall.argument("code"),activity,result);
            break;
        default:
            result.notImplemented();
    }
}

}


5.最后注册plugin,实现数据通信
-------------------

![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/38b61d6814014166b40da7427193cd52~tplv-k3u1fbpfcp-zoom-1.image) 代码如下:

package com.example.mob_app;

import android.os.Bundle;

import androidx.annotation.NonNull;

import com.example.mob_plugin.AsrPlugin;

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.GeneratedPluginRegistrant;

public class MainActivity extends FlutterActivity {
@Override
public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
GeneratedPluginRegistrant.registerWith(flutterEngine);
//flutter sdk >= v1.17.0 时使用下面方法注册自定义plugin
AsrPlugin.registerWith(this, flutterEngine.getDartExecutor().getBinaryMessenger());
}

@Override
protected void onCreate(Bundle savedInstanceState   ) {

最后

如果你看到了这里,觉得文章写得不错就给个赞呗?如果你觉得那里值得改进的,请给我留言。一定会认真查询,修正不足。谢谢。

最后针对Android程序员,我这边给大家整理了一些资料,包括不限于高级UI、性能优化、移动架构师、NDK、混合式开发(ReactNative+Weex)微信小程序、Flutter等全方面的Android进阶实践技术;希望能帮助到大家,也节省大家在网上搜索资料的时间来学习,也可以分享动态给身边好友一起学习!

CodeChina开源项目:《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》

-bFlrvpgK-1630928418130)]

最后针对Android程序员,我这边给大家整理了一些资料,包括不限于高级UI、性能优化、移动架构师、NDK、混合式开发(ReactNative+Weex)微信小程序、Flutter等全方面的Android进阶实践技术;希望能帮助到大家,也节省大家在网上搜索资料的时间来学习,也可以分享动态给身边好友一起学习!

CodeChina开源项目:《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》

版权声明:本文为m0_61408464原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。