README.md 9.77 KB
Newer Older
Jidong Chen's avatar
init  
Jidong Chen committed
1 2 3 4
<p align="center">
  <img src="flutter_boost.png">
   <b></b><br>
  <a href="README_CN.md">中文文档</a>
Jidong Chen's avatar
Jidong Chen committed
5
  <a href="https://mp.weixin.qq.com/s?__biz=MzU4MDUxOTI5NA==&mid=2247484367&idx=1&sn=fcbc485f068dae5de9f68d52607ea08f&chksm=fd54d7deca235ec86249a9e3714ec18be8b2d6dc580cae19e4e5113533a6c5b44dfa5813c4c3&scene=0&subscene=131&clicktime=1551942425&ascene=7&devicetype=android-28&version=2700033b&nettype=ctnet&abtest_cookie=BAABAAoACwASABMABAAklx4AVpkeAMSZHgDWmR4AAAA%3D&lang=zh_CN&pass_ticket=1qvHqOsbLBHv3wwAcw577EHhNjg6EKXqTfnOiFbbbaw%3D&wx_header=1">中文介绍</a>
Jidong Chen's avatar
init  
Jidong Chen committed
6 7
</p>

yangwu.jia's avatar
yangwu.jia committed
8 9 10 11 12 13 14 15 16 17 18 19 20

# Latest News

Currently, version 1.9 of flutter is supported.

flutter branch:v1.9.1-hotfixes

FlutterBoost branch:feature/flutter_1.9_upgrade

FlutterBoost for androidx  branch:feature/flutter_1.9_androidx_upgrade



yangwu.jia's avatar
yangwu.jia committed
21
```java
yangwu.jia's avatar
yangwu.jia committed
22 23 24 25 26

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

yangwu.jia's avatar
yangwu.jia committed
29
dingding  group:
yangwu.jia's avatar
yangwu.jia committed
30 31 32 33

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


yangwu.jia's avatar
yangwu.jia committed
34
# Release Note
yangwu.jia's avatar
yangwu.jia committed
35

yangwu.jia's avatar
yangwu.jia committed
36
Please checkout the release note for the latest 0.1.54 to see changes [0.1.54 release note](https://github.com/alibaba/flutter_boost/releases)
37

Jidong Chen's avatar
init  
Jidong Chen committed
38 39 40 41 42
# FlutterBoost
A next-generation Flutter-Native hybrid solution. FlutterBoost is a Flutter plugin which enables hybrid integration of Flutter for your existing native apps with minimum efforts.The philosophy of FlutterBoost is to use Flutter as easy as using a WebView. Managing Native pages and Flutter pages at the same time is non-trivial in an existing App. FlutterBoost takes care of page resolution for you. The only thing you need to care about is the name of the page(usually could be an URL). 
<a name="bf647454"></a>

# Prerequisites
yangwu.jia's avatar
yangwu.jia committed
43
You need to add Flutter to your project before moving on.The version of the flutter SDK requires v1.5.4-hotfixes, or it will compile error.
Jidong Chen's avatar
init  
Jidong Chen committed
44 45 46 47 48 49 50 51 52

# Getting Started


## Add a dependency in you Flutter project.

Open you pubspec.yaml and add the following line to dependencies:

```java
yangwu.jia's avatar
yangwu.jia committed
53
flutter_boost: ^0.1.54
Jidong Chen's avatar
init  
Jidong Chen committed
54 55
```

Jidong Chen's avatar
Jidong Chen committed
56
or you could rely directly on a Github project tag, for example(recommended)
yangwu.jia's avatar
yangwu.jia committed
57

Jidong Chen's avatar
Jidong Chen committed
58 59 60 61
```java
flutter_boost:
        git:
            url: 'https://github.com/alibaba/flutter_boost.git'
yangwu.jia's avatar
yangwu.jia committed
62
            ref: '0.1.54'
Jidong Chen's avatar
Jidong Chen committed
63 64 65
```


Jidong Chen's avatar
init  
Jidong Chen committed
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 93 94 95 96 97 98 99 100 101

## Integration with Flutter code.
Add init code to you 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());
}
```


## Integration with iOS code.

Jidong Chen's avatar
Jidong Chen committed
102 103
Note: You need to add libc++ into "Linked Frameworks and Libraries" 

Jidong Chen's avatar
init  
Jidong Chen committed
104 105 106 107 108 109 110 111 112 113 114
Use FLBFlutterAppDelegate as the superclass of your AppDelegate

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


Implement FLBPlatform protocol methods for your App.

```objc
余玠's avatar
余玠 committed
115
@interface PlatformRouterImp : NSObject<FLBPlatform>
Jidong Chen's avatar
init  
Jidong Chen committed
116 117 118

@property (nonatomic,strong) UINavigationController *navigationController;

余玠's avatar
余玠 committed
119
+ (PlatformRouterImp *)sharedRouter;
Jidong Chen's avatar
init  
Jidong Chen committed
120 121 122 123

@end


余玠's avatar
余玠 committed
124
@implementation PlatformRouterImp
Jidong Chen's avatar
init  
Jidong Chen committed
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 151 152 153 154 155 156 157

- (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
```



余玠's avatar
余玠 committed
158
Initialize FlutterBoost with FLBPlatform at the beginning of your App, such as AppDelegate.
Jidong Chen's avatar
init  
Jidong Chen committed
159 160

```objc
余玠's avatar
余玠 committed
161
 PlatformRouterImp *router = [PlatformRouterImp new];
Jidong Chen's avatar
init  
Jidong Chen committed
162
 [FlutterBoostPlugin.sharedInstance startFlutterWithPlatform:router
余玠's avatar
余玠 committed
163
                                                        onStart:^(FlutterEngine *engine) {
Jidong Chen's avatar
init  
Jidong Chen committed
164 165 166 167 168 169 170 171 172 173 174 175 176 177
                                                            
                                                        }];
```

## Integration with Android code.

Init FlutterBoost in Application.onCreate() 

```java
public class MyApplication extends FlutterApplication {
    @Override
    public void onCreate() {
        super.onCreate();
        FlutterBoostPlugin.init(new IPlatform() {
yangwu.jia's avatar
yangwu.jia committed
178

yangwu.jia's avatar
yangwu.jia committed
179
        @Override
Jidong Chen's avatar
init  
Jidong Chen committed
180 181 182 183 184
            public Application getApplication() {
                return MyApplication.this;
            }

            @Override
yangwu.jia's avatar
yangwu.jia committed
185 186
            public boolean isDebug() {
                return true;
Jidong Chen's avatar
init  
Jidong Chen committed
187 188 189
            }

            @Override
yangwu.jia's avatar
yangwu.jia committed
190
            public void openContainer(Context context, String url, Map<String, Object> urlParams, int requestCode, Map<String, Object> exts) {
yangwu.jia's avatar
yangwu.jia committed
191
            		//native open url 
Jidong Chen's avatar
init  
Jidong Chen committed
192 193 194
            }

            @Override
yangwu.jia's avatar
yangwu.jia committed
195 196 197 198 199 200 201 202 203 204
            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
205 206 207
            }

            @Override
yangwu.jia's avatar
yangwu.jia committed
208 209
            public int whenEngineStart() {
                return ANY_ACTIVITY_CREATED;
Jidong Chen's avatar
init  
Jidong Chen committed
210
            }
yangwu.jia's avatar
yangwu.jia committed
211

Jidong Chen's avatar
init  
Jidong Chen committed
212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231
        });
    }
```


# Basic Usage
## Concepts

All page routing requests are being sent to the native router. Native router communicates with Native Container Manager, Native Container Manager takes care of building and destroying of Native Containers. 


## Use Flutter Boost Native Container to show a Flutter page in native code.

iOS

```objc
 FLBFlutterViewContainer *vc = FLBFlutterViewContainer.new;
        [vc setName:name params:params];
        [self.navigationController presentViewController:vc animated:animated completion:^{}];
```
余玠's avatar
余玠 committed
232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248
However, in this way, you cannot get the page data result after the page finished. We suggest you implement the platform page router like the way mentioned above. And finally open/close the VC as following:
```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
249 250 251 252 253 254 255 256

Android

```java
public class FlutterPageActivity extends BoostFlutterActivity {


    @Override
yangwu.jia's avatar
yangwu.jia committed
257 258 259
    public String getContainerUrl() {
     	//specify the page name register in FlutterBoost
       return "sample://firstPage";
Jidong Chen's avatar
init  
Jidong Chen committed
260 261 262
    }

    @Override
yangwu.jia's avatar
yangwu.jia committed
263 264
    public Map getContainerUrlParams() {
    	//params of the page
Jidong Chen's avatar
init  
Jidong Chen committed
265 266 267 268 269 270 271 272 273 274 275
        Map<String,String> params = new HashMap<>();
        params.put("key","value");
        return params;
    }
}
```

or

```java

yangwu.jia's avatar
yangwu.jia committed
276 277 278 279
public class FlutterFragment extends BoostFlutterFragment {
	  @Override
     public String getContainerUrl() {
        return "flutterFragment";
Jidong Chen's avatar
init  
Jidong Chen committed
280 281 282
    }

    @Override
yangwu.jia's avatar
yangwu.jia committed
283
     public Map getContainerUrlParams() {
Jidong Chen's avatar
init  
Jidong Chen committed
284
        Map<String,String> params = new HashMap<>();
yangwu.jia's avatar
yangwu.jia committed
285
        params.put("tag",getArguments().getString("tag"));
Jidong Chen's avatar
init  
Jidong Chen committed
286 287 288 289 290 291 292 293 294 295 296
        return params;
    }
}
```


## Use Flutter Boost to open a page in dart code.

Dart

```objc
yangwu.jia's avatar
yangwu.jia committed
297 298 299

FlutterBoost.singleton
                .open("pagename")
yangwu.jia's avatar
yangwu.jia committed
300

Jidong Chen's avatar
init  
Jidong Chen committed
301 302 303 304 305
```

## Use Flutter Boost to close a page in dart code.

```objc
yangwu.jia's avatar
yangwu.jia committed
306 307 308

FlutterBoost.singleton.close(uniqueId);

Jidong Chen's avatar
init  
Jidong Chen committed
309 310 311 312 313 314 315 316 317
```

# Running the Demo
Please see the example for details.


# License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

yangwu.jia's avatar
yangwu.jia committed
318 319


tino.wjf's avatar
tino.wjf committed
320 321 322 323 324 325 326 327 328 329 330 331 332
## 关于我们
阿里巴巴-闲鱼技术是国内最早也是最大规模线上运行Flutter的团队。

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

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

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

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

订阅地址

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

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