Issue with hiding a video view.

[Aliharu]

When starting a call I am trying to have the current users camera view be placed in a small box in the corner of the screen (rather than the default of it taking up half the screen).

  Widget _miniView(List<Widget> views) {
    return Positioned(
        bottom: 120,
        right: 20,
        child: Container(
          child: views[0],
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(25)),
          ),
        ));
  }

This works except when you attempt to hide the box (such as using a ternary to hide the positioned widget) it calls the event that hid it.

For example if i have a button that mutes the local video stream and then hides the miniView using a boolean it will call twice, once when i tap the button and then will automatically call the onTap function a second time after when the view is hidden.

This weird double call of buttons only happens when trying to hide a video view.

[PRWrl]

Can you provide a simple demo?

I can not reproduce this issue with following code.

bool _isInChannel = false;
  bool _isHidden = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Agora Flutter SDK'),
        ),
        body: Container(
          child: Stack(
            children: [
              _miniView(_getRenderViews()),
              _joinAndLeaveButton(),
              _hideAndShowButton(),
            ],
          ),
        ),
      ),
    );
  }

Widget _miniView(List<Widget> views) {
    return Positioned(
        bottom: 120,
        right: 20,
        child: Container(
          child: _isHidden ? null : views[0],
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(25)),
          ),
        ));
  }

  Widget _joinAndLeaveButton() {
    return Positioned(
        left: 10,
        top: 10,
        child: OutlineButton(
          child: Text(_isInChannel ? 'Leave Channel' : 'Join Channel',
              style: textStyle),
          onPressed: _toggleChannel,
        ));
  }

  Widget _hideAndShowButton() {
    return Positioned(
        left: 10,
        top: 60,
        child: OutlineButton(
          child: Text(_isHidden ? 'Show' : 'Hide', style: textStyle),
          onPressed: _toggleHidden,
        ));
  }

  void _toggleChannel() {
    print('_toggleChannel');
    setState(() {
      if (_isInChannel) {
        _isInChannel = false;
        AgoraRtcEngine.leaveChannel();
        AgoraRtcEngine.stopPreview();
      } else {
        _isInChannel = true;
        AgoraRtcEngine.startPreview();
        AgoraRtcEngine.joinChannel(null, 'flutter', null, 0);
      }
    });
  }

  void _toggleHidden() {
    print('_toggleHidden');
    setState(() {
      _isHidden = !_isHidden;
      if (_isHidden) {
        AgoraRtcEngine.stopPreview();
      } else {
        AgoraRtcEngine.startPreview();
      }
    });
  }

[Aliharu]

I forgot to mention this only happens on IOS devices.

[Aliharu]

I made these changes to your demo (change the build function and added some of the views from your github demo.) and the bug appears.

  @override
  Widget build(BuildContext context) {
    List<Widget> views = _getRenderViews();
    var controlWidgets = [_viewRows(views)];
    controlWidgets.addAll([
      _miniView(_getRenderViews()),
      _joinAndLeaveButton(),
      _hideAndShowButton(),
    ]);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Agora Flutter SDK'),
        ),
        body: Container(
          child: Stack(
            children: controlWidgets,
          ),
        ),
      ),
    );
  }

  /// The video wrapper from your demo
  Widget _viewRows(List<Widget> views) {
    switch (views.length) {
      case 1:
        return Container(
            color: Colors.white,
            child: Column(
              children: <Widget>[_videoView(views[0])],
            ));
      case 2:
        return Container(
            color: Colors.white,
            child: Column(
              children: <Widget>[_videoView(views[1])],
            ));
      default:
    }
    return Container();
  }

  /// Video view wrapper
  Widget _videoView(view) {
    return Expanded(
      child: Container(child: view),
    );
  }

[PRWrl]

Seems this is related with gesture recognize issue of UIKitView

You can add a padding around video view in _viewRows, so the _hideAndShowButton is partly above the UIKitView.

Widget _viewRows(List<Widget> views) {
    switch (views.length) {
      case 1:
        return Container(
            padding: EdgeInsets.all(50),
            color: Colors.white,
            child: Column(
              children: <Widget>[_videoView(views[0])],
            ));
      case 2:
        return Container(
            padding: EdgeInsets.all(50),
            color: Colors.white,
            child: Column(
              children: <Widget>[_videoView(views[1])],
            ));
      default:
    }
    return Container();
}

When you press the _hideAndShowButton on the left part where there is no UIKitView under it, it behaves normally.
But when you press the _hideAndShowButton on the right part where there is UIKitView under it, the bug appears.

[Aliharu]

Updated to flutter 1.5 and it looks like the bug has been fixed.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please raise a new issue.