is there any way to stop gesture bubbling in flutter?

Question

I have TabBarView with 3 children, one of them I have a container which has an onPanUpdate gesture.

When I am trying to move container tab bar onHorizontalDragUpdate calls and tab bar changes tab but not container.

Is there any way to prevent onHorizontalDragUpdate if I taped on a container like stoppropagation in javascript?

TabBarView(
        controller: _tabController,
        children: [
          Container(
            color: Colors.red,
          ),
          TabWithDragableContainer(),
          Container(
            color: Colors.blue,
          ),
        ],
      )

Answer 1

You could disable the gestures for all the tabs by specifying physics: NeverScrollableScrollPhysics() inside TabBarView.

Minimal Working Example

This example has three tabs:

1. Basic Tab
2. Tab with Draggable Widget
3. Tab with onPan GestureDetector

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.directions_car)),
              Tab(icon: Icon(Icons.directions_transit)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
          ),
        ),
        body: TabBarView(
          physics: NeverScrollableScrollPhysics(),
          children: [
            Icon(Icons.directions_car),
            _ContainerWithDraggable(),
            _ContainerWithPanGesture(),
          ],
        ),
      ),
    );
  }
}

class _ContainerWithDraggable extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final _offset = useState(Offset(100, 100));
    return Stack(
      children: [
        Container(color: Colors.amber.shade100),
        Positioned(
          top: _offset.value.dy,
          left: _offset.value.dx,
          child: Draggable(
            onDragUpdate: (details) => _offset.value += details.delta,
            feedback: _Circle(),
            child: _Circle(),
          ),
        ),
      ],
    );
  }
}

class _ContainerWithPanGesture extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final _offset = useState(Offset(100, 100));
    final _previousOffset = useState<Offset>(null);
    final _referenceOffset = useState<Offset>(null);
    return Stack(
      children: [
        GestureDetector(
          onPanStart: (details) {
            _previousOffset.value = _offset.value;
            _referenceOffset.value = details.localPosition;
          },
          onPanUpdate: (details) => _offset.value = _previousOffset.value +
              details.localPosition -
              _referenceOffset.value,
          child: Container(color: Colors.amber.shade100),
        ),
        Positioned(
          top: _offset.value.dy,
          left: _offset.value.dx,
          child: _Circle(),
        ),
      ],
    );
  }
}

class _Circle extends StatelessWidget {
  const _Circle({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: Border.all(color: Colors.brown, width: 5.0),
      ),
    );
  }
}