Fix SwiftUI example on 'Add a Flutter screen to an iOS app' page

[gabrielokura]

trafficstars

Page URL

https://docs.flutter.dev/add-to-app/ios/add-flutter-screen/

Page source

https://github.com/flutter/website/tree/main/src/add-to-app/ios/add-flutter-screen.md

Describe the problem

I have a suggestion for the SwiftUI examples provided by the docs.

struct ContentView: View {
  // Flutter dependencies are passed in an EnvironmentObject.
  @EnvironmentObject var flutterDependencies: FlutterDependencies

  // Button is created to call the showFlutter function when pressed.
  var body: some View {
    Button("Show Flutter!") {
      showFlutter()
    }
  }
  
func showFlutter() {
    // Get the RootViewController.
    guard
      let windowScene = UIApplication.shared.connectedScenes
        .first(where: { $0.activationState == .foregroundActive && $0 is UIWindowScene }) as? UIWindowScene,
      let window = windowScene.windows.first(where: \.isKeyWindow),
      let rootViewController = window.rootViewController
    else { return }

    // Create the FlutterViewController.
    let flutterViewController = FlutterViewController(
      engine: flutterDependencies.flutterEngine,
      nibName: nil,
      bundle: nil)
    flutterViewController.modalPresentationStyle = .overCurrentContext
    flutterViewController.isViewOpaque = false

    rootViewController.present(flutterViewController, animated: true)
  }
}

This example doesn't make much sense when working with SwiftUI. Here we don't have a clean control over the Flutter view.

Expected fix

Instead, we could do something like this:

struct ContentView: View {
    var body: some View {
        VStack {
            FlutterViewRepresentable()
        }
    }
}

struct FlutterViewRepresentable: UIViewControllerRepresentable {    
    func makeUIViewController(context: Context) -> some UIViewController {
        return FlutterViewController(engine: ...flutterEngine, nibName: nil, bundle: nil)
    }
    
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {}
}

Now, the Flutter part works similar to any SwiftUI view.

Additional context

No response

I would like to fix this problem.

• [X] I will try and fix this problem on docs.flutter.dev.

[jmagman]

cc @hellohuanlin wdyt of this?

[hellohuanlin]

These 2 are different use cases:

(1) the existing doc is to present the flutter VC as a screen. This is the most common use case (e.g. migrate some screens to use flutter, while leaving the rest SwiftUI). This is also similar to our UIKit guide.

(2) the doc you are proposing is to add Flutter VC as a view to an existing SwiftUI screen. I don't think this is a common use case, since not many people asked for similar usage in UIKit (which should also be doable).

[gabrielokura]

These 2 are different use cases:

(1) the existing doc is to present the flutter VC as a screen. This is the most common use case (e.g. migrate some screens to use flutter, while leaving the rest SwiftUI). This is also similar to our UIKit guide.

(2) the doc you are proposing is to add Flutter VC as a view to an existing SwiftUI screen. I don't think this is a common use case, since not many people asked for similar usage in UIKit (which should also be doable).

Using fullscreen or modal is up to the user; the suggestion is just to reduce the amount of boilerplate code that has already been resolved in UIViewControllerRepresentable.

[hellohuanlin]

Using fullscreen or modal is up to the user; the suggestion is just to reduce the amount of boilerplate code that has already been resolved in UIViewControllerRepresentable.

Gotcha. Let me look into this

[hellohuanlin]

@gabrielokura I just tried out the UIViewControllerRepresentable API and was able to get it working

[hellohuanlin]

Related: https://github.com/flutter/flutter/issues/150945

[gabrielokura]

@gabrielokura I just tried out the UIViewControllerRepresentable API and was able to get it working

Awesome! May I help with something more? Should we close this issue and track the new one?

[hellohuanlin]

May I help with something more?

Thank you! After the doc is updated, It'd be great if you can help take a look.

Should we close this issue and track the new one?

I think we can keep it open until doc is updated.