UIKitView in Flutter Stretching on Scrolling Up

41 views Asked by At

I'm working with UIKitView in a Flutter app, where I integrate a native view from third-party Android and iOS SDKs. On iOS, the UIKitView loads correctly, but I encounter a visual glitch when it's scrolled within a SingleChildScrollView or ListView. As the UIKitView widget touches the top of the screen, it starts stretching upward before scrolling continues. Notably, this issue does not occur with AndroidView.

Here's how I'm implementing MyWidget in Flutter:

@override
Widget build(BuildContext context) {
  const String viewType = 'MyNativeWidget';
  Map<String, dynamic> creationParams = <String, dynamic>{};
  creationParams['testId'] = widget.valueKey;

  switch (defaultTargetPlatform) {
    case TargetPlatform.android:
      return SizedBox(
        width: 200,
        height: 125,
        child: AndroidView(
          viewType: viewType,
          layoutDirection: TextDirection.ltr,
          creationParams: creationParams,
          creationParamsCodec: const StandardMessageCodec(),
        ),
      );

    case TargetPlatform.iOS:
      return SizedBox(
        width: 200,
        height: 125,
        child: UiKitView(
          viewType: viewType,
          layoutDirection: TextDirection.ltr,
          creationParams: creationParams,
          creationParamsCodec: const StandardMessageCodec(),
        ),
      );
    default:
      throw UnsupportedError('Unsupported platform view');
  }
}

Usage in the app:

MyWidget(valueKey: "native1"),

And the corresponding Swift code for the FlutterPlatformView:

import Flutter
import UIKit
import TestSDK

class FlutterMyWidget: NSObject, FlutterPlatformView {
    
    private var channel: FlutterBasicMessageChannel?
    private var myView: MyWidget?

    init(frame: CGRect, viewId: Int64, args: Any?, registrar: FlutterPluginRegistrar) {
        super.init()
        // Initialization logic here...
    }

    func view() -> UIView {
        return myView ?? UIView()
    }
    
}

class MyWidgetFactory: NSObject, FlutterPlatformViewFactory {
    
    private let registrar: FlutterPluginRegistrar

    init(registrar: FlutterPluginRegistrar) {
        self.registrar = registrar
    }

    func create(withFrame frame: CGRect, viewIdentifier viewId: Int64, arguments args: Any?) -> FlutterPlatformView {
        return FlutterMyWidget(frame: frame, viewId: viewId, args: args, registrar: registrar)
    }

    func createArgsCodec() -> FlutterMessageCodec & NSObjectProtocol {
        return FlutterStandardMessageCodec.sharedInstance()
    }
}

This problem does not occur in the native iOS SDK or in a similar React Native wrapper I've built. How can I prevent UiKitView from stretching when it hits the top boundary during a scroll in Flutter?

0

There are 0 answers