1、已有項(xiàng)目工程(iOS)集成Flutter

（1）關(guān)閉Bitcode，cd到iOS工程最外層，在終端輸入生成flutter工程

flutter create -t module flutter_project

結(jié)束后項(xiàng)目結(jié)構(gòu)如下

- flutter_project
-- lib
--- main.dart

- iOS_project
-- .xcworkspace

（2）Podfile文件示例，在{}內(nèi)分別填入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項(xiàng)目名稱}' do
install_all_flutter_pods(flutter_application_path)
end

2、iOS項(xiàng)目和Flutter文件的相互調(diào)用

（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工程新建一個(gè)類TYFlutter聲明通道，注冊(cè)代理回調(diào)，通道名為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）原生跳轉(zhuǎn)Flutter頁(yè)面

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調(diào)用原生，F(xiàn)lutter工程新建一個(gè).dart文件flutter 調(diào)用 原生的函數(shù)，通道名也是flutter_channel，

const platform =  const MethodChannel('flutter_channel');

/// 路由
/// 返回上一級(jí)
Future dismissPage() async {
  var result;
  try {
    //傳遞給原生的方法名和參數(shù)
    result = await platform.invokeMethod('flutterCalliOS',
        {'function':'dismiss'});
    //接收原生傳過(guò)來(lái)的值
    return Future.value(result);
  } on PlatformException catch(e) {
    return Future.error(e.toString());
  }
}

（5）Flutter開始調(diào)用聲明的函數(shù)，比如在flutter頁(yè)面點(diǎn)擊返回

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

（6）在之前iOS代理方法中就可以回調(diào)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簡(jiǎn)易登錄界面開發(fā)

（1）pubspec.yaml文件處理，這里集成以下框架。記得pub upgrade

dependencies:
  flutter:
    sdk: flutter
  #風(fēng)格樣式
  cupertino_icons: ^1.0.2
  #狀態(tài)管理
  provider: ^6.0.2
  #  #Toast
  fluttertoast: ^8.0.9
  #  #Loading框
  flutter_spinkit: ^5.1.0

（2）使用Provider狀態(tài)管理，提供set、get方法給外部調(diào)用

class Counter with ChangeNotifier, DiagnosticableTreeMixin {

  /// 手機(jī)號(hào)
  String _phoneNum = "";
  /// 驗(yàn)證碼
  String _codeNum  = "";
  /// 驗(yàn)證碼發(fā)送狀態(tài)0:不可點(diǎn)擊,1:可發(fā)送,2:已發(fā)送
  int _codeSendStatus = 0; 
  /// 倒計(jì)時(shí)剩余時(shí)間
  int _leftTime = 60;
  /// 是否勾選協(xié)議
  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）登錄界面開發(fā)，代碼太多，只放部分有和原生交互的。

///Flutter調(diào)用原生獲取驗(yàn)證碼

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: "驗(yàn)證碼",
  showClearBtn: true,
  showCountDown: true, hintText: "輸入驗(yàn)證碼", textChangeCallBack: (code) {
    codeNum = code;
    context.read<Counter>().updateCode(code: code);
  }, maxLength: 4, clearCB: (){
    codeNum = "";
    context.read<Counter>().updateCode(code: "");
  }, sendCodeCB: () async{
    tLoadingShow(context, "發(fā)送中...");
    var val = await requestPhoneCode(phone: phoneNum);
    tLoadingDismiss(context);
    codeTxtKey.currentState!.beginCountDown();
    if (val == "1") {
      tToast(context, "驗(yàn)證碼已發(fā)送");
    } else {
      tToast(context, "驗(yàn)證碼發(fā)送失敗");
    }
  },)

///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、思考

在已有的項(xiàng)目中集成Flutter，業(yè)務(wù)耦合性低比如交互少、業(yè)務(wù)關(guān)聯(lián)小的模塊，可以考慮。