Use Native UI in Flutter application
Used UiKitView inside flutter application using Swift.
Flutter 1.0 version announced Platform View.
Platform View
While Add To App is useful as a way to gradually introduce Flutter to an existing application, sometimes it’s useful to go the other way round and embed an Android or iPhone platform control in a Flutter app.
So Flutter 1.0 version introduced platform view widgets (AndroidView and UiKitView) that let you embed this kind of content on each platform. Currently it have been previewing Android support for a couple of months, but now we're expanding support to iOS, and starting to add plug-ins like Google Maps and WebView that take advantage of this.
Let’s Create a new Project!
As this story we are covering Swift part of application, so will create application from Scrach.
Install Flutter : https://flutter.io/docs/get-started/install
Set up edit : https://flutter.io/docs/get-started/editor
Once above installation and setup is done then create fresh application using below command.
Command:
flutter create -i swift -a kotlin <project-name>
platform_view_sample project:
flutter create -i swift -a kotlin platform_view_sample
The -i flag is a shorthand for iOS, and the -a flag is for Android.
Add Native UI into with Flutter UiKitView Widget
create a new my_app.dart file add below code
Adding Native UI into flutter view need to provide size, which flutter widgets understand how much space require to fill Native UI.
Once size setup is done then create UiKitView Widget, which is nothing but platform view into flutter app. Currently this post cover only iOS portion so added only UiKitView which iOS platform view. viewType nothing but class name of platform view which cover below details.
The above code is done from flutter code side, now below details covers swift portion of the code.
Before going details please go through below flutter documentation for UiKitView
FlutterPlatformViewFactory
Implemented by iOS code that expose a UIView for embedding in a Flutter app.The implementation of this method should create a new UIView and return it.
FlutterPlatformView
Wraps a UIView for embedding in the Flutter hierarchy
UiKitView
Embeds an iOS view in the Widget hierarchy.
Embedding UIViews is still in release preview, to enable the preview for an iOS app add a boolean field with the key ‘io.flutter.embedded_views_preview’ and the value set to ‘YES’ to the application’s Info.plist file.
Register Native View inside Swift application
Flutter is actively looking for a registration of these view types in native code.
Below code will register NativeView using NativeFactory class.
Run Flutter application refer below video
Github Project for above Tutorial at below link
https://github.com/rohit11/Flutter_PlatformView.git
Next Tutorial for Android coming soon…..
