Enable to swipe within a PageView/TabBarView

[mgaucher]

Hello,

I have a CardSwiper inside my TabBarView that as the isVerticalSwipingEnabled property to false. The problem is that if I try to move horizontally my cards, it will trigger the scroll of the TabView and not the CardSwiper.

I tried to replace in the CardSwiper widget the onPanStart/onPanUpdate/onPanEnd by onHorizontalDragStart/onHorizontalDragUpdate/onHorizontalDragEnd, it works but I don't know if it is the correct way to fix it. Can you check it ? Thanks

[ricardodalarme]

I'll take a look on that this weekend, thank you for reporting it

[samoray1998]

to fix that try to disable the scrolling in the TabViewBar and enable the scrolling int TabBar by doing

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> with TickerProviderStateMixin {
  late final TabController _tabController;
  @override
  void initState() {
    _tabController = TabController(
      length: 2,
      vsync: this,
      initialIndex: 0,
    );
    super.initState();
  }

  List<Color> colors = [Colors.red, Colors.black, Colors.blue, Colors.yellow];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("test"),
        bottom: TabBar(
          physics: AlwaysScrollableScrollPhysics(),
          tabs: [
            Tab(
              child: Text("Test One"),
            ),
            Tab(
              child: Text("Test Two"),
            )
          ],
          controller: _tabController,
        ),
      ),
      body: TabBarView(
          physics: NeverScrollableScrollPhysics(),
          controller: _tabController,
          children: [
            Scaffold(
              body: ListView.builder(
                itemBuilder: (context, index) {
                  return Container(
                    margin: const EdgeInsets.symmetric(
                        horizontal: 10, vertical: 10),
                    width: 300,
                    height: 300,
                    color: colors[index],
                  );
                },
                itemCount: colors.length,
                scrollDirection: Axis.horizontal,
              ),
            ),
            Scaffold(
              body: Center(
                child: Text("Test Two"),
              ),
            )
          ]),
    );
  }
}

[samoray1998]

i hope this will help you @mgaucher

[mgaucher]

I don't think it solve my issue,

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

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> with TickerProviderStateMixin {
  late final TabController _tabController;

  List<Color> colors = [Colors.red, Colors.black, Colors.blue, Colors.yellow];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("test"),
        bottom: TabBar(
          tabs: [
            Tab(
              child: Text("Test One"),
            ),
            Tab(
              child: Text("Test Two"),
            )
          ],
          controller: _tabController,
        ),
      ),
      body: TabBarView(controller: _tabController, children: [
        Scaffold(
            body: CardSwiper(
                padding: EdgeInsets.zero,
                allowedSwipeDirection:
                    AllowedSwipeDirection.only(left: true, right: true),
                backCardOffset: const Offset(0, 15),
                cardsCount: colors.length,
                cardBuilder: (context, index) => Container(
                      margin: const EdgeInsets.symmetric(
                          horizontal: 10, vertical: 10),
                      width: 300,
                      height: 300,
                      color: colors[index],
                    ))),
        Scaffold(
          body: Center(
            child: Text("Test Two"),
          ),
        )
      ]),
    );
  }
}

In this exemple you can see that you can swipe the TabBar but not the card swiper, if you put in the TabBarView a NeverScrollablePhysics(), the card swiper will work but you can't swipe the TabBar anymore.

I found that if I replace the onPan gesture in the card_swiper.dart by the onHorizontalDrag gesture, both will work : swiper inside card swiper will swipe the cards and swiping outside the card swiper will swipe the tab bar.

I don't have much time so I can't investigate further sorry

[samoray1998]

hii @mgaucher ,
i think the nested scrolling is always a problem in flutter, so i don't know that u will find an approach to solve your problem , because both the swip crads and tabbars are scrolling horizontally and when you try to move the cards the tabbar view moves which make a kind of ambiguity "which scrollable will move first ?" , so the best way i thought will be helpful is to disable tabbar and enable the cards swip.