CODEWITHSUNDEEP
fluttervideooverlaypositioning
Janaka
Janaka

Reputation: 2785

Unable to position AndroidView with video

I am using flutter 3.0.0

In my application I am displaying a native video using platform view.

The video is displaying but it is always displaying on upper left corner and it covers other widgets even they are in a stack.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Stack(
        children: [
          Center(
            child: ConstrainedBox(
                constraints:
                    const BoxConstraints.expand(height: 200, width: 200),

                // Center is a layout widget. It takes a single child and positions it
                // in the middle of the parent.
                child:
                    const AndroidView(viewType: 'remote-video'),
                ),
          ),
          Row(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ElevatedButton(
                  onPressed: () {
                    MethodChannels.coreMethodChannel
                        .invokeMethod("load");
                  },
                  child: const Text('Invoke'),
                ),
              ),
              
            ],
          ),

        ],
      ),
    );
  }

This is how it looks when I run the code

enter image description here

As you can see it is displaying over everything.

Can you provide some advice on how to fix this?

Upvotes: 5

Views: 953

Answers (3)

Romith
Romith

Reputation: 11

To fix this issue replace AndroidView() with PlatformViewLink().

PlatformViewLink(
  viewType: viewId,
  surfaceFactory: (context, controller) {
    return AndroidViewSurface(
      controller: controller as AndroidViewController,
      hitTestBehavior: PlatformViewHitTestBehavior.opaque,
      gestureRecognizers: const <Factory<OneSequenceGestureRecognizer>>{},
    );
  },
  onCreatePlatformView: (params){
    return PlatformViewsService.initExpensiveAndroidView(
        id: params.id,
        viewType: viewId,
        layoutDirection: TextDirection.ltr
    )
      ..addOnPlatformViewCreatedListener(params.onPlatformViewCreated)
      ..create();
  },
);

Screenshots

With AndroidView() in flutter version 3.0.0 and above

With PlatformViewLink() in flutter version 3.0.0 and above

Upvotes: 1

Kairat
Kairat

Reputation: 788

Try setting

previewView.setImplementationMode(PreviewView.ImplementationMode.COMPATIBLE);

In this case PreviewView will always use TextureView which is actually less performant than SurfaceView. Also, make sure to call this method before previewView.getSurfaceProvider()

Upvotes: 0

Shai Herman
Shai Herman

Reputation: 126

As of 31/07/2022 this seems to be a bug in flutter >= 3.0.0. Following the solution in this question Flutter AndroidView Widget I downgraded to 2.10.5 and then it worked as expected. Hopefully the flutter team will resolve it shortly.

Upvotes: 2

Related Questions