在iOS原生项目中集成Flutter登录界面

1、已有项目工程(iOS)集成Flutter

（1）关闭Bitcode，cd到iOS工程最外层，在终端输入生成flutter工程

flutter create -t module flutter_project

结束后项目结构如下

- flutter_project
-- lib
--- main.dart

- iOS_project
-- .xcworkspace

（2）Podfile文件示例，在{}内分别填入flutter工程路径和iOS工程名称

platform :ios, '9.0'
use_frameworks!
flutter_application_path = '{flutter_project路径}'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
target '{iOS项目名称}' do
install_all_flutter_pods(flutter_application_path)
end

2、iOS项目和Flutter文件的相互调用

（1）iOS工程AppDelegate文件

import UIKit
import Flutter
import FlutterPluginRegistrant

@main
class AppDelegate: FlutterAppDelegate {
    
    let flutterMethodChannel = "flutter_channel"
    lazy var flutterEngine = FlutterEngine(name: "flutter_engine")
    

    override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        flutterEngine.run()
        GeneratedPluginRegistrant.register(with: self.flutterEngine)
        TYFlutterManager.register(with: self.flutterEngine.registrar(forPlugin: "TYFlutterManager")!)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

（2）iOS工程新建一个类TYFlutter声明通道，注册代理回调，通道名为flutter_channel

import Foundation
import Flutter
class TYFlutterManager: NSObject, FlutterPlugin {
    static func register(with registrar: FlutterPluginRegistrar) {
        let channel = FlutterMethodChannel(name: "flutter_channel", binaryMessenger: registrar.messenger())
        let instance = TYFlutterManager()
        registrar.addMethodCallDelegate(instance, channel: channel)
    }
    
    func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
        if call.method == "flutterCalliOS" {
       
        } else {
            result(FlutterMethodNotImplemented)
        }
    }
    
}

（3）原生跳转Flutter页面

let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine
let flutterVC     = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
flutterVC.setInitialRoute("LoginPage")
present(flutterVC, animated: true, completion: nil)

（4）Flutter调用原生，Flutter工程新建一个.dart文件flutter 调用 原生的函数，通道名也是flutter_channel，

const platform =  const MethodChannel('flutter_channel');

/// 路由
/// 返回上一级
Future dismissPage() async {
  var result;
  try {
    //传递给原生的方法名和参数
    result = await platform.invokeMethod('flutterCalliOS',
        {'function':'dismiss'});
    //接收原生传过来的值
    return Future.value(result);
  } on PlatformException catch(e) {
    return Future.error(e.toString());
  }
}

（5）Flutter开始调用声明的函数，比如在flutter页面点击返回

() async{
    var futureValue = await dismissPage();
    //接收的值
    print(futureValue);
  })

（6）在之前iOS代理方法中就可以回调func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult)

func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
        if call.method == "flutterCalliOS" {
            //传给flutter的值
            result();
        } else {
            result(FlutterMethodNotImplemented)
        }
    }

3、Flutter简易登录界面开发

（1）pubspec.yaml文件处理，这里集成以下框架。记得pub upgrade

dependencies:
  flutter:
    sdk: flutter
  #风格样式
  cupertino_icons: ^1.0.2
  #状态管理
  provider: ^6.0.2
  #  #Toast
  fluttertoast: ^8.0.9
  #  #Loading框
  flutter_spinkit: ^5.1.0

（2）使用Provider状态管理，提供set、get方法给外部调用

class Counter with ChangeNotifier, DiagnosticableTreeMixin {

  /// 手机号
  String _phoneNum = "";
  /// 验证码
  String _codeNum  = "";
  /// 验证码发送状态0:不可点击,1:可发送,2:已发送
  int _codeSendStatus = 0; 
  /// 倒计时剩余时间
  int _leftTime = 60;
  /// 是否勾选协议
  int _protocolAllowed = 0;

  String get phoneNum => _phoneNum;
  String get codeNum  => _codeNum;
  int get codeSendStatus => _codeSendStatus;
  int get leftTime      => _leftTime;
  int get protocolAllowed => _protocolAllowed;


  void updatePhone({required String phone}) {
    _phoneNum = phone;
    if (_codeSendStatus != 2) {
      _leftTime = 60;
      _codeSendStatus = (phoneNum.length == 11) ? 1 : 0;
    }
    notifyListeners();
  }

  void updateCode({required String code}) {
    _codeNum = code;
    if (_codeSendStatus != 2) {
      _codeSendStatus = (phoneNum.length == 11) ? 1 : 0;
    }
    notifyListeners();
  }

  void updateSendStatus({required int status}) {
    _codeSendStatus = status;
    notifyListeners();
  }

  void updateLeftTime({required int left}) {
    _leftTime = left;
    notifyListeners();
  }

  void updateProtocolAllowed({required int allow}) {
    _protocolAllowed = allow;
    print("allow $allow");
    notifyListeners();
  }

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    // TODO: implement debugFillProperties
    super.debugFillProperties(properties);
    properties.add(StringProperty('phoneNum', phoneNum));
    properties.add(StringProperty('codeNum', codeNum));
    properties.add(IntProperty('codeSendStatus', codeSendStatus));
    properties.add(IntProperty('leftTime', leftTime));
    properties.add(IntProperty('protocolAllowed', protocolAllowed));
  }
}

（3）登录界面开发，代码太多，只放部分有和原生交互的。

///Flutter调用原生获取验证码

Future requestPhoneCode({phone:String}) async {
  var result;
  try {
    result = await platform.invokeMethod('flutterCalliOS',
        {"function":"phoneCode", "params":"{\"phone\":\"$phone\"}"});
    return Future.value(result);
  } on PlatformException catch(e) {
    return Future.error(e.toString());
  }
}

LoginTxt(
  key: codeTxtKey, 
  leftTitle: "验证码",
  showClearBtn: true,
  showCountDown: true, hintText: "输入验证码", textChangeCallBack: (code) {
    codeNum = code;
    context.read().updateCode(code: code);
  }, maxLength: 4, clearCB: (){
    codeNum = "";
    context.read().updateCode(code: "");
  }, sendCodeCB: () async{
    tLoadingShow(context, "发送中...");
    var val = await requestPhoneCode(phone: phoneNum);
    tLoadingDismiss(context);
    codeTxtKey.currentState!.beginCountDown();
    if (val == "1") {
      tToast(context, "验证码已发送");
    } else {
      tToast(context, "验证码发送失败");
    }
  },)

///Flutter返回原生
Future dismissPage() async {
  var result;
  try {
    result = await platform.invokeMethod('flutterCalliOS',
        {'function':'dismiss'});
    return Future.value(result);
  } on PlatformException catch(e) {
    return Future.error(e.toString());
  }
}
tyTextButtonFactory(
  Text(""),
  tyTransparentColor(), () async{
  var futureValue = await dismissPage();
  print(futureValue);
})

（4）交互效果

flutterDemo.gif

4、思考

在已有的项目中集成Flutter，业务耦合性低比如交互少、业务关联小的模块，可以考虑。