README_CN.md 9.23 KB
Newer Older
Jidong Chen's avatar
init  
Jidong Chen committed
1 2 3 4
<p align="center">
  <img src="flutter_boost.png">
</p>

yangwu.jia's avatar
yangwu.jia committed
5 6 7 8 9
# 项目最新动态


目前已经支持flutter 1.9版本。

yangwu.jia's avatar
yangwu.jia committed
10
对应的flutter 版本是:v1.9.1-hotfixes
yangwu.jia's avatar
yangwu.jia committed
11

yangwu.jia's avatar
yangwu.jia committed
12
flutter boost分支是:feature/flutter_1.9_upgrade
yangwu.jia's avatar
yangwu.jia committed
13

yangwu.jia's avatar
yangwu.jia committed
14
flutter boost androidx  分支是:feature/flutter_1.9_androidx_upgrade
yangwu.jia's avatar
yangwu.jia committed
15

yangwu.jia's avatar
yangwu.jia committed
16
代码引入方式:
yangwu.jia's avatar
yangwu.jia committed
17

yangwu.jia's avatar
yangwu.jia committed
18
```java
yangwu.jia's avatar
yangwu.jia committed
19 20 21 22 23

    flutter_boost:
            git:
                url: 'https://github.com/alibaba/flutter_boost.git'
                ref: 'feature/flutter_1.9_upgrade'
yangwu.jia's avatar
yangwu.jia committed
24
```
yangwu.jia's avatar
yangwu.jia committed
25

26

yangwu.jia's avatar
yangwu.jia committed
27 28 29
# Release Note

 请查看最新版本0.1.50的release note 确认变更,[0.1.50 release note](https://github.com/alibaba/flutter_boost/releases)
30

Jidong Chen's avatar
init  
Jidong Chen committed
31 32 33 34 35 36
# FlutterBoost

新一代Flutter-Native混合解决方案。 FlutterBoost是一个Flutter插件,它可以轻松地为现有原生应用程序提供Flutter混合集成方案。FlutterBoost的理念是将Flutter像Webview那样来使用。在现有应用程序中同时管理Native页面和Flutter页面并非易事。 FlutterBoost帮你处理页面的映射和跳转,你只需关心页面的名字和参数即可(通常可以是URL)。


# 前置条件
yangwu.jia's avatar
yangwu.jia committed
37
在继续之前,您需要将Flutter集成到你现有的项目中。flutter sdk 的版本需要 v1.5.4-hotfixes,否则会编译失败.
Jidong Chen's avatar
init  
Jidong Chen committed
38 39 40 41 42 43 44

# 安装

## 在Flutter项目中添加依赖项。

打开pubspec.yaml并将以下行添加到依赖项:

Jidong Chen's avatar
Jidong Chen committed
45
```json
yangwu.jia's avatar
yangwu.jia committed
46
flutter_boost: ^0.1.54
Jidong Chen's avatar
init  
Jidong Chen committed
47 48
```

Jidong Chen's avatar
Jidong Chen committed
49
或者可以直接依赖github的项目的版本,Tag,pub发布会有延迟,推荐直接依赖Github项目
yangwu.jia's avatar
yangwu.jia committed
50

Jidong Chen's avatar
Jidong Chen committed
51
```java
yangwu.jia's avatar
yangwu.jia committed
52

Jidong Chen's avatar
Jidong Chen committed
53 54 55
flutter_boost:
        git:
            url: 'https://github.com/alibaba/flutter_boost.git'
yangwu.jia's avatar
yangwu.jia committed
56
            ref: '0.1.54'
yangwu.jia's avatar
yangwu.jia committed
57
            
Jidong Chen's avatar
Jidong Chen committed
58
```
Jidong Chen's avatar
init  
Jidong Chen committed
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
## Dart代码的集成
将init代码添加到App App

```dart
void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();

    ///register page widget builders,the key is pageName
    FlutterBoost.singleton.registerPageBuilders({
      'sample://firstPage': (pageName, params, _) => FirstRouteWidget(),
      'sample://secondPage': (pageName, params, _) => SecondRouteWidget(),
    });

  }

  @override
  Widget build(BuildContext context) => MaterialApp(
      title: 'Flutter Boost example',
      builder: FlutterBoost.init(), ///init container manager
      home: Container());
}
```

## iOS代码集成。

Jidong Chen's avatar
Jidong Chen committed
93 94
注意:需要将libc++ 加入 "Linked Frameworks and Libraries" 中。

Jidong Chen's avatar
init  
Jidong Chen committed
95 96 97 98 99 100 101 102 103 104 105
使用FLBFlutterAppDelegate作为AppDelegate的超类

```objectivec
@interface AppDelegate : FLBFlutterAppDelegate <UIApplicationDelegate>
@end
```


为您的应用程序实现FLBPlatform协议方法。

```objectivec
余玠's avatar
余玠 committed
106
@interface PlatformRouterImp : NSObject<FLBPlatform>
Jidong Chen's avatar
init  
Jidong Chen committed
107 108 109

@property (nonatomic,strong) UINavigationController *navigationController;

余玠's avatar
余玠 committed
110
+ (PlatformRouterImp *)sharedRouter;
Jidong Chen's avatar
init  
Jidong Chen committed
111 112 113 114

@end


余玠's avatar
余玠 committed
115
@implementation PlatformRouterImp
Jidong Chen's avatar
init  
Jidong Chen committed
116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150

- (void)openPage:(NSString *)name
          params:(NSDictionary *)params
        animated:(BOOL)animated
      completion:(void (^)(BOOL))completion
{
    if([params[@"present"] boolValue]){
        FLBFlutterViewContainer *vc = FLBFlutterViewContainer.new;
        [vc setName:name params:params];
        [self.navigationController presentViewController:vc animated:animated completion:^{}];
    }else{
        FLBFlutterViewContainer *vc = FLBFlutterViewContainer.new;
        [vc setName:name params:params];
        [self.navigationController pushViewController:vc animated:animated];
    }
}


- (void)closePage:(NSString *)uid animated:(BOOL)animated params:(NSDictionary *)params completion:(void (^)(BOOL))completion
{
    FLBFlutterViewContainer *vc = (id)self.navigationController.presentedViewController;
    if([vc isKindOfClass:FLBFlutterViewContainer.class] && [vc.uniqueIDString isEqual: uid]){
        [vc dismissViewControllerAnimated:animated completion:^{}];
    }else{
        [self.navigationController popViewControllerAnimated:animated];
    }
}

@end
```



在应用程序开头使用FLBPlatform初始化FlutterBoost。

余玠's avatar
余玠 committed
151 152
```objc
 PlatformRouterImp *router = [PlatformRouterImp new];
Jidong Chen's avatar
init  
Jidong Chen committed
153
 [FlutterBoostPlugin.sharedInstance startFlutterWithPlatformrouter
余玠's avatar
余玠 committed
154
                                                        onStart^FlutterEngine *engine{
Jidong Chen's avatar
init  
Jidong Chen committed
155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174
                                                            
                                                        }];
```

## Android代码集成。

在Application.onCreate()中初始化FlutterBoost

```java
public class MyApplication extends FlutterApplication {
    @Override
    public void onCreate() {
        super.onCreate();
        FlutterBoostPlugin.init(new IPlatform() {
            @Override
            public Application getApplication() {
                return MyApplication.this;
            }

            @Override
yangwu.jia's avatar
yangwu.jia committed
175 176
            public boolean isDebug() {
                return true;
Jidong Chen's avatar
init  
Jidong Chen committed
177 178 179
            }

            @Override
yangwu.jia's avatar
yangwu.jia committed
180 181
            public void openContainer(Context context, String url, Map<String, Object> urlParams, int requestCode, Map<String, Object> exts) {
                PageRouter.openPageByUrl(context,url,urlParams,requestCode);
Jidong Chen's avatar
init  
Jidong Chen committed
182 183 184
            }

            @Override
yangwu.jia's avatar
yangwu.jia committed
185 186 187 188 189 190 191 192 193 194
            public IFlutterEngineProvider engineProvider() {
                return new BoostEngineProvider(){
                    @Override
                    public BoostFlutterEngine createEngine(Context context) {
                        return new BoostFlutterEngine(context, new DartExecutor.DartEntrypoint(
                                context.getResources().getAssets(),
                                FlutterMain.findAppBundlePath(context),
                                "main"),"/");
                    }
                };
Jidong Chen's avatar
init  
Jidong Chen committed
195 196 197
            }

            @Override
yangwu.jia's avatar
yangwu.jia committed
198 199
            public int whenEngineStart() {
                return ANY_ACTIVITY_CREATED;
Jidong Chen's avatar
init  
Jidong Chen committed
200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217
            }
        });
    }
```

# 基本用法
## 概念

所有页面路由请求都将发送到Native路由器。Native路由器与Native Container Manager通信,Native Container Manager负责构建和销毁Native Containers。

## 使用Flutter Boost Native Container用Native代码打开Flutter页面。

```objc
 FLBFlutterViewContainer *vc = FLBFlutterViewContainer.new;
        [vc setName:name params:params];
        [self.navigationController presentViewController:vc animated:animated completion:^{}];
```

余玠's avatar
余玠 committed
218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235
但是,这种方式无法获取页面返回的数据,建议你按上面的example实现类似于PlatformRouterImp这样的路由器,然后通过以下方式来打开/关闭页面

```objc
//push the page
[FlutterBoostPlugin open:@"first" urlParams:@{kPageCallBackId:@"MycallbackId#1"} exts:@{@"animated":@(YES)} onPageFinished:^(NSDictionary *result) {
        NSLog(@"call me when page finished, and your result is:%@", result);
    } completion:^(BOOL f) {
        NSLog(@"page is opened");
    }];
//prsent the page
[FlutterBoostPlugin open:@"second" urlParams:@{@"present":@(YES),kPageCallBackId:@"MycallbackId#2"} exts:@{@"animated":@(YES)} onPageFinished:^(NSDictionary *result) {
        NSLog(@"call me when page finished, and your result is:%@", result);
    } completion:^(BOOL f) {
        NSLog(@"page is presented");
    }];
//close the page
[FlutterBoostPlugin close:yourUniqueId result:yourdata exts:exts completion:nil];
```
Jidong Chen's avatar
init  
Jidong Chen committed
236 237 238 239 240 241 242
Android

```java
public class FlutterPageActivity extends BoostFlutterActivity {


    @Override
yangwu.jia's avatar
yangwu.jia committed
243
    public String getContainerUrl() {
Jidong Chen's avatar
init  
Jidong Chen committed
244 245 246 247 248
        //specify the page name register in FlutterBoost
        return "sample://firstPage";
    }

    @Override
yangwu.jia's avatar
yangwu.jia committed
249
    public Map getContainerUrlParams() {
Jidong Chen's avatar
init  
Jidong Chen committed
250 251 252 253 254 255 256 257 258 259 260 261 262 263
        //params of the page
        Map<String,String> params = new HashMap<>();
        params.put("key","value");
        return params;
    }
}
```

或者用Fragment

```java
public class FlutterFragment extends BoostFlutterFragment {

    @Override
yangwu.jia's avatar
yangwu.jia committed
264
    public String getContainerUrl() {
Jidong Chen's avatar
init  
Jidong Chen committed
265 266 267 268
        return "sample://firstPage";
    }

    @Override
yangwu.jia's avatar
yangwu.jia committed
269
    public Map getContainerUrlParams() {
Jidong Chen's avatar
init  
Jidong Chen committed
270 271 272 273 274 275 276 277 278 279 280 281
        Map<String,String> params = new HashMap<>();
        params.put("key","value");
        return params;
    }
}
```


## 使用Flutter Boost在dart代码打开页面。
Dart

```java
yangwu.jia's avatar
yangwu.jia committed
282 283 284 285

 FlutterBoost.singleton
                .open("sample://flutterFragmentPage")

Jidong Chen's avatar
init  
Jidong Chen committed
286 287 288 289 290 291
```


## 使用Flutter Boost在dart代码关闭页面。

```java
yangwu.jia's avatar
yangwu.jia committed
292
 FlutterBoost.singleton.close(uniqueId);
Jidong Chen's avatar
init  
Jidong Chen committed
293 294 295 296 297 298 299 300
```

# Examples
更详细的使用例子请参考Demo

# 许可证
该项目根据MIT许可证授权 - 有关详细信息,请参阅[LICENSE.md](LICENSE.md)文件
<a name="Acknowledgments"> </a>
tino.wjf's avatar
tino.wjf committed
301

yangwu.jia's avatar
yangwu.jia committed
302 303 304 305 306
# 问题反馈群(钉钉群)

<img width="200" src="https://img.alicdn.com/tfs/TB1JSzVeYY1gK0jSZTEXXXDQVXa-892-1213.jpg">


tino.wjf's avatar
tino.wjf committed
307 308 309 310 311 312 313 314 315 316 317 318 319
## 关于我们
阿里巴巴-闲鱼技术是国内最早也是最大规模线上运行Flutter的团队。

我们在公众号中为你精选了Flutter独家干货,全面而深入。

内容包括:Flutter的接入、规模化应用、引擎探秘、工程体系、创新技术等教程和开源信息。

**架构/服务端/客户端/前端/算法/质量工程师 在公众号中投递简历,名额不限哦**

欢迎来闲鱼做一个好奇、幸福、有影响力的程序员,简历投递:tino.wjf@alibaba-inc.com

订阅地址

tino.wjf's avatar
tino.wjf committed
320
<img src="https://img.alicdn.com/tfs/TB17Ki5XubviK0jSZFNXXaApXXa-656-656.png" width="328px" height="328px">
tino.wjf's avatar
tino.wjf committed
321 322

[For English](https://twitter.com/xianyutech "For English")