Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Open native UIViewController in Flutter

Tags:

ios

swift

flutter

I have an application I develop in Flutter, and it has one UIViewController that has to be implemented in native IOS (there is no other workaround, it is a must)

I have implemented it, it works according to the first tests, but I'd like to double check if it is okkey by your opinion, as I am not so experienced in Flutter, and I am afraid a bit a make some mess in my app navigation stack that can cause bugs in the future.

So, I have implemented it by MethodChannel. I have a method, that called from 'Flutter side'. I don't paste my MethodChannel related things here, as they are trivial.

In my AppDelegate didFinishLaunchingWithOptions I added this:

let flutterViewController = FlutterViewController()
    self.navigationController = UINavigationController(rootViewController: flutterViewController)
    self.navigationController?.isNavigationBarHidden = true

    self.window = UIWindow(frame: UIScreen.main.bounds)
    self.window.rootViewController = self.navigationController
    self.window.makeKeyAndVisible()

And my open method like this:

private func openNativeUI(result: FlutterResult) {
        let sb = UIStoryboard(name: "Main", bundle: nil)
        let uiController = sb.instantiateViewController(withIdentifier: "nativeui")

        self.navigationController?.pushViewController(uiController, animated: true)

        result(true)
    }

What do you think?

Any advise is highly appreciated and thank you for your help in advance!

like image 743
Tom Avatar asked May 24 '19 10:05

Tom


People also ask

Is there a way to add native views in flutter?

This is not what you may want for this particular problem, but alternatively, you can use PlatformViews introduced by flutter some time back. PlatformViews allow you add native views to your widget hierarchy.

What are platformviews in flutter?

PlatformViews allow you add native views to your widget hierarchy. You'll be able to add custom view modules to your flutter UI. Here is a great blog to help understand how to implement PlatformViews. Hope this add a little more clarity on how Flutter can be used to its full potential. PS: I am new to posting answers on stack overflow.

Can I embed an Android or iPhone platform control in flutter?

Flutter 1.0 version announced 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.

What is the difference between-I and-a in flutter?

The -i flag is a shorthand for iOS, and the -a flag is for Android. Adding Native UI into flutter view need to provide size, which flutter widgets understand how much space require to fill Native UI.


2 Answers

It's completely fine to use Native API's while creating a cross platform application but make sure there is no other way to achieve your goal. Many a times(when a cross platform engine/sdk is new) you have no choice other than using the native code to complete your functionality.

Not sure about your goal but the common issue with cross platform engine/sdk's(e.g, Flutter) is that the third party SDK/API's(e.g, Chartboost, Stripe, Twilio) takes some time to translate into that engine/sdk you are using so while its not available you have no choice except to call those API's natively.

Other issue happens is some platform specific API's e.g, Camera, Contacts, In-App, GameCenter etc do not come along with the cross platform SDK or it takes time to get some wrapper for such API's so in all such cases you can use Native API's.

like image 94
Kamran Avatar answered Sep 23 '22 11:09

Kamran


As Kamran suggests, its okay to use Native code in your flutter application. Specifically where any particular features are not feasible or SDK/API's are not available for flutter yet. Flutter documentation has detailed info on using native code in the flutter application. Reading through the documentation will help understand the architecture. Here's the link for official documentation

This is not what you may want for this particular problem, but alternatively, you can use PlatformViews introduced by flutter some time back. PlatformViews allow you add native views to your widget hierarchy. You'll be able to add custom view modules to your flutter UI. Here is a great blog to help understand how to implement PlatformViews.

Hope this add a little more clarity on how Flutter can be used to its full potential.

PS: I am new to posting answers on stack overflow. If there are any mistakes, please do let me know so that i can rectify them.

like image 23
tanujtak1986 Avatar answered Sep 24 '22 11:09

tanujtak1986