原有Android/IOS项目集成flutter功能

Android项目

首先要先要明确一下我们的目标
想要实现一个Android/IOS项目中集成flutter的功能，在某些场景下，比如一些界面可以用flutter来显示，大大简化了双移动端人员的工作
flutter官网

Android

我们先as创建一个Android的项目（一些flutter的开发环境配置就不说了）

1. 我们先采用命令的方式（推荐第二种）

• 因为后面可以让ios项目来使用，所以在同级创建

flutter create -t module module_flutter

• 在setting.gradle文件中添加

// Include the host app project.
include ':app'                                    // assumed existing content
setBinding(new Binding([gradle: this]))                                // new
evaluate(new File(                                                     // new
  settingsDir.parentFile,                                              // new
  'module_flutter/.android/include_flutter.groovy'                         // new
))                                                                     // new

• 再在app的build.gradle文件添加

implementation project(':flutter')

2. 采用Android Studio自带的（推荐，实不相瞒，上面的命令行的方式，我也是搞了好久才成功，貌似存在一定问题）

new -> new module ->Flutter Module

3. 跳转到flutter项目中

• 跳转到默认的界面

// MainActivity
// 在Android项目中找个按钮
// 打开默认的main
//            FlutterActivity.createDefaultIntent(this)

• 跳转到指定的界面（实际上也是到默认main方法）

// MainActivity
// 打开指定的widget
            startActivity(FlutterActivity
                .withNewEngine()
                .initialRoute("welcome")
                .build(this))

// flutter 的main文件
void main() => runApp(MyApp(window.defaultRouteName));

class MyApp extends StatelessWidget {
  String name;

  MyApp(this.name);

  @override
  Widget build(BuildContext context) {
    print("flutter_name111$name");
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: getWidgetName(name),
    );
  }
}

Widget getWidgetName(String name) {
  switch(name) {
    case "welcome":
      return WelcomeWidget();
      break;
    case "hahaha":
      return MyHomePage(title: "hahaha",);
      break;
    default:
      return MyHomePage(title: "hahaha",);
      break;
  }
}

4. 如果没有成功，多看看官网，书中自由颜如玉，书中自有黄金屋

IOS

由于也是接触ios开发一段时间，请多包含了

我们刚才Android已经创建了一个flutter module，这个时候我们ios就可以直接使用那个module了

1. 这里我们就直接采用CocoaPods的方式集成（问我为什么，因为他最方便。。。先一点一点来嘛对不对）Embed with CocoaPods and the Flutter SDK
2. 先把项目用集成CocoaPods，问我怎么搞官网
3. 新建一个Podfile到你项目中去

flutter_application_path = '../module_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target '你的项目名' do
  install_all_flutter_pods(flutter_application_path)
end

命令行到该项目中

pod install

5. 跳转到flutter项目中（FlutterEngine和FlutterViewController）

• 这里有两种方式跳转到flutter （FlutterEngine）

AppDelegate.swift中

import UIKit
import Flutter
// Used to connect plugins (only if you have plugins with iOS platform code).
import FlutterPluginRegistrant

@UIApplicationMain
class AppDelegate: FlutterAppDelegate { // More on the FlutterAppDelegate.
  lazy var flutterEngine = FlutterEngine(name: "my flutter engine")

  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Runs the default Dart entrypoint with a default Flutter route.
    flutterEngine.run();
    // Used to connect plugins (only if you have plugins with iOS platform code).
    GeneratedPluginRegistrant.register(with: self.flutterEngine);
    return super.application(application, didFinishLaunchingWithOptions: launchOptions);
  }
}

ViewController.swift中

import UIKit
import Flutter

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()

    // Make a button to call the showFlutter function when pressed.
    let button = UIButton(type:UIButton.ButtonType.custom)
    button.addTarget(self, action: #selector(showFlutter), for: .touchUpInside)
    button.setTitle("Show Flutter!", for: UIControl.State.normal)
    button.frame = CGRect(x: 80.0, y: 210.0, width: 160.0, height: 40.0)
    button.backgroundColor = UIColor.blue
    self.view.addSubview(button)
  }

  @objc func showFlutter() {
    let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine
    let flutterViewController =
        FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
    present(flutterViewController, animated: true, completion: nil)
  }
}

• 使用FlutterViewController跳转（FlutterViewController）（推荐这种方式）

// Existing code omitted.
func showFlutter() {
  let flutterViewController = FlutterViewController(project: nil, nibName: nil, bundle: nil)
  present(flutterViewController, animated: true, completion: nil)
}

• 跳转到指定的界面

let flutterViewController = FlutterViewController(project: nil, nibName: nil, bundle: nil)
flutterViewController.modalPresentationStyle = UIModalPresentationStyle.fullScreen// 全屏
flutterViewController.setInitialRoute("welcome")
present(flutterViewController, animated: true, completion: nil)

6. 如果没有成功，多看看官网，书中自由颜如玉，书中自有黄金屋