Some people say that Flutter is the trend of the future and must be learned and used! Some people say that the native UI is the foundation, and flutter is only replacing some of the functionality of the native UI. For some product managers who think the Flutter is all-powerful and dominant on mobile, it’s a pity to hear that personally, it’s not a qualified product manager, at least in terms of how to polish mobile. Taking the best of the best and dividing the bad from the bad is a normal, maintainable, and robust development strategy. A product manager without vision is frustrating, and a product manager who doesn’t listen is desperate.

For those of you who are proficient in native development but don’t have a functional interface with Flutter, how do you build a native UI for nesting?

IOS created under FlutterCustomView class follow FlutterPlatformViewFactory agency agreement

Introducing the Flutter header file # import < Flutter/Flutter. H > @ interface FlutterCustomView: NSObject < FlutterPlatformViewFactory > @ the endCopy the code

The constructor in the proxy method needs to be implemented

So you can get the frame that you want to show the View, the viewId, Related parameters - (nonnull NSObject<FlutterPlatformView> *)createWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id _Nullable)args { return [[FlutterCustomViewObject alloc] initWithFrame:frame viewId:viewId args:args]; }Copy the code

Creating the FlutterCustomViewObject class on iOS follows the FlutterPlatformView protocol

#import <Flutter/Flutter.h>
@interface FlutterCustomViewObject : NSObject<FlutterPlatformView>

- (id)initWithFrame:(CGRect)frame viewId:(int64_t)viewId args:(id)args;

@end
Copy the code

The constructor in the proxy method needs to be implemented

- (id)initWithFrame:(CGRect)frame viewId:(int64_t)viewId args:(id)args {if (self = [super init]) {// accept arguments} return self; } - (nonnull UIView *)view {// Here initialize the custom view, a simple video player UIView * view = [[UIView alloc] initWithFrame:_frame]; Dispatch_after (dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.25 * NSEC_PER_SEC)), ^{ [view jp_playVideoWithURL:[NSURL URLWithString:@"video/dcba079700164a60b08aaa3ea9cc8efe.mp4"]]; view.jp_muted = NO; }); }Copy the code

The player here is JPVideoPlayer third party, which is very useful.

Platform :ios, '9.0' target 'Runner' do pod 'JPVideoPlayer', '~> 3.1.1' endCopy the code

How do I register native UI components to Flutter?

First, add the io.flutter. Embedded_views_preview: True key-value pair to the info.plist file in the XCode project, which allows the flutter to be embedded in the native UI component.

Then, register the currently wrapped component in the appDelete file.


FlutterCustomView * flutterCustomView = [[FlutterCustomView alloc] init];

[[self registrarForPlugin:@"WSLCustomView"] registerViewFactory:flutterCustomView withId:@"WSLCustomView"];
Copy the code

How to use the registered native UI component in Flutter?

Widget build(BuildContext context) { return new Container( child: new Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ new Container( height: 200, // The current platform of the flutter project can be determined by adding the corresponding Android component according to the requirements child: (defaultTargetPlatform == TargetPlatform.iOS) ? UiKitView(viewType: 'WSLCustomView') : new Container(), ) ], ), ); }Copy the code

Due to the refresh mechanism of the Flutter, to ensure that video playback does not restart due to interface switching, we need to inherit the Widget component from StatefulWidget and set the corresponding State as follows:

Complete code:

class MineCustomView extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return new MineCustomViewState();
  }
}

class MineCustomViewState extends State<MineCustomView> with AutomaticKeepAliveClientMixin{
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new Container(
            height: 200,
            child: (defaultTargetPlatform == TargetPlatform.iOS) ?  UiKitView(viewType: 'WSLCustomView') : new Container(),
          )
        ],
      ),
    );
  }
  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}
Copy the code

Final appearance:

Personal summary, some things are very helpful for development, so here to record, the master do not spray, everyone functional progress. [hold][hold][hold]