flutter环境安装见 【flutter第0回】 起步


原文参考:https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps

首先要集成到已有的App,肯定是以module的形式引入的,而且iOS和Android都要引入使用。所以新建flutter module 的时候就放在跟iOS/Android project 平级的路径,然后在iOS/Android project 里修改路径即可

一、新建flutter module

$ cd some/path/
$ flutter create -t module flutterModule

修改lib/main.dart 为如下代码:
window.defaultRouteName是外部传入的路径名。下面会提到。

import 'dart:ui';
import 'package:flutter/material.dart';

void main() => runApp(_widgetForRoute(window.defaultRouteName));

Widget _widgetForRoute(String route) {
  switch (route) {
    case 'route1':
      return SomeWidget(...);
    case 'route2':
      return SomeOtherWidget(...);
    default:
      return Center(
        child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
      );
  }
}

二、Android 引入flutter module

3、编辑宿主app的setting.gradle

include ':app'
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'flutterModule/.android/include_flutter.groovy'
))

3、在宿主App里依赖flutter module

dependencies {
  implementation project(':flutter')
  :
}

4、在宿主App里使用flutter module

  • 方式一:获取view
 View flutterView = Flutter.createView(
      MainActivity.this,
      getLifecycle(),
      "route1"
    );
  • 方式二:获取Fragment
Flutter.createFragment("route1")

参数“route1”是告诉Dart要返回哪一个view。

OK,这样就可以运行起来了。

二、iOS引入flutter module

1、在podfile 结尾加入下面两行:

flutter_application_path = '../flutterModule'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

2、添加Run Script phase

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

并将 Script phase移到Target Dependencies phase后面。

3、将AppDelegate继承于FlutterAppDelegate

#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>

@interface AppDelegate : FlutterAppDelegate
@end

AppDelegate.m修改如下:

#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> // Only if you have Flutter Plugins

#include "AppDelegate.h"

@implementation AppDelegate

// This override can be omitted if you do not have any Flutter Plugins.
- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

3、然后使用flutterViewController

let flutterViewController = FlutterViewController()
[flutterViewController setInitialRoute:@"route1"];
self.present(flutterViewController, animated: false, completion: nil)

三、Hot reload

$ cd some/path/flutterModule
$ flutter attach
Waiting for a connection from Flutter on Nexus 5X...

然后以Debug模式运行App,修改dart代码,然后再命令行按r,即可进行hot reload。
其他命令看提示即可。

Alt text

5、注意点

  • flutter module里,Android的minSdkVersion 是16
  • 调用Flutter.createView和Flutter.createFragment需要时间渲染view

Flutter交流群

WechatIMG368.jpeg

标签: flutter

已有 3 条评论

  1. Art Art

    FLUTTER_ROOT在哪里设置

    1. FLUTTER_ROOT是环境变量,sdk放置的位置

  2. 开发者头条 开发者头条

    感谢分享!已推荐到《开发者头条》:https://toutiao.io/posts/8ycplc 欢迎点赞支持!
    使用开发者头条 App 搜索 120573 即可订阅《本仁笔记》

添加新评论