The new Liquid Glass effect in iOS 26 looks stunning, but Flutter doesn’t support it natively yet. Here’s how you can embed a native SwiftUI view with the Liquid Glass effect inside your Flutter app using PlatformView.

---

Why Use PlatformView?

Flutter’s PlatformView API lets you embed native views (SwiftUI, UIKit, etc.) directly into your Flutter widget tree. This is perfect for using new iOS features before they’re available in Flutter.

---

Demo

---

Project Overview

• Flutter iOS-only app
• Custom SwiftUI view (LiquidGlassExampleView) with .glassEffect (iOS 26+)
• Integrated via PlatformView (UiKitView in Flutter)

---

Key Files

• lib/main.dart: Uses UiKitView to display the native SwiftUI view.
• ios/Runner/HelloSwiftUI.swift: Contains the SwiftUI view and PlatformView integration.
• ios/Runner/AppDelegate.swift: Registers the PlatformView for Flutter.

---

1. Create the SwiftUI View with Liquid Glass

struct LiquidGlassExampleView: View {
    var body: some View {
        Group {
            if #available(iOS 26.0, *) {
                GlassEffectContainer {
                    ContentBody()
                        .buttonStyle(.glass)
                }
            } else {
                ContentBody()
            }
        }
    }
}

struct ContentBody: View {
    @State private var offset: CGFloat = -10
    var body: some View {
        VStack {
            if #available(iOS 26.0, *) {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .padding(16)
                    .foregroundStyle(.tint)
                    .glassEffect()
                Text("Liquid Glass")
                    .padding(16)
                    .glassEffect(in: .rect(cornerRadius: 8))
                    .offset(x: 0, y: offset)
            } else {
                // Fallback for earlier iOS versions
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("Liquid Glass")
                    .padding(16)
                    .offset(x: 0, y: offset)
            }
            Button(action: {
                withAnimation(.linear(duration: 0.5)) {
                    offset = offset * -1
                }
            }) {
                Text("Animate")
            }
        }
        .padding()
    }
}

---

2. Expose the SwiftUI View to Flutter

class HelloSwiftUIViewFactory: NSObject, FlutterPlatformViewFactory {
    ...
    func create(withFrame frame: CGRect, viewIdentifier viewId: Int64, arguments args: Any?) -> any FlutterPlatformView {
        let view = HelloSwiftUIView()
        return view
    }
}

class HelloSwiftUIView: NSObject, FlutterPlatformView {
    private var hostingController: UIHostingController<LiquidGlassExampleView>
    ...
    override init() {
        let swiftUIView = LiquidGlassExampleView()
        hostingController = UIHostingController(rootView: swiftUIView)
        hostingController.view.backgroundColor = .clear
        ...
    }
    func view() -> UIView {
        return hostingController.view
    }
}

---

3. Register the PlatformView in AppDelegate

override func application(
  _ application: UIApplication,
  didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
  ...
  let factory = HelloSwiftUIViewFactory(messenger: registrar.messenger())
  registrar.register(factory, withId: "HelloSwiftUIView")
  ...
}

---

4. Use the PlatformView in Flutter

UiKitView(
  viewType: 'HelloSwiftUIView',
  layoutDirection: TextDirection.ltr,
  creationParams: null,
  creationParamsCodec: StandardMessageCodec(),
)

You can layer this over any Flutter widget, such as an image background:

Stack(
  children: [
    Positioned.fill(
      child: DecoratedBox(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/melaka.jpeg'),
            fit: BoxFit.cover,
          ),
        ),
      ),
    ),
    UiKitView(...),
  ],
)

---

Conclusion

With just a few steps, you can bring the latest iOS 26 visual effects to your Flutter app using SwiftUI and PlatformView. This approach lets you stay on the cutting edge of iOS design while keeping the productivity of Flutter.

---

Happy coding with Flutter and iOS!

Tags: flutter ios swiftui liquid glass platformview ui/ux ios 26

Share: