Flutter Agora SDK Rounded Video SurfaceView

Question

Does anyone know how to round the video corners in a video call? The container that I place them in has a border radius, but when the video starts it always shows a square container.

My video render code is below:

 @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        _localSwitchRender == true
            ? rtc_local_view.SurfaceView()
            : rtc_remote_view.SurfaceView(uid: widget.remoteUid.first),
        Align(
          alignment: Alignment.topLeft,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: GestureDetector(
              onTap: _switchRender,
              child: Padding(
                padding: const EdgeInsets.fromLTRB(12, 42, 0, 0),
                child: Stack(
                  children: [
                    Column(
                      children: [
                        const SizedBox(
                          height: 20
                        ),
                        Container(
                          decoration: const BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(20.0)),
                            color: Color(0x66333333),
                          ),
                          width: 158,
                          height: 220,
                          foregroundDecoration: const BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(20.0)),
                          ),
                          child: _localSwitchRender
                              ? rtc_remote_view.SurfaceView(

                                  uid: widget.remoteUid.first,
                                  renderMode: VideoRenderMode.FILL,
                                )
                              : rtc_local_view.SurfaceView(
                                  renderMode: VideoRenderMode.Hidden,
                                  zOrderMediaOverlay: true,
                                ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Any help is greatly appreciated!

Answer 1

Place your widget inside ClipRRect:

ClipRRect(
    borderRadius: BorderRadius.circular(10)
    child: // your widget
)