Flutter scrolling horizontal widget in TabBar

Viewed 400

I want to scroll a widget in a TabBar horizontal, and when I reach the end of the widget I want to scroll to the next tab. Currently I can only scroll to the next tab if I swipe outside of the Scroll-Widget. What is the best option in flutter to scroll directly to the next tab?

Demo-Picture

My current code:

class _ScrollTestPageState extends State<ScrollTestPage> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 3);
    _tabController.addListener(() {});
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            indicatorColor: Colors.red,
            controller: _tabController,
            tabs: [
              Tab(text: 'Page 1'),
              Tab(text: 'Page 2'),
              Tab(text: 'Page 3'),
            ],
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: [
            Center(
              child: Icon(Icons.ac_unit),
            ),
            // Scroll-Tab
            Center(
              child: Container(
                color: Colors.grey,
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  physics: PageScrollPhysics(),
                  child: Row(
                    children: [
                      FlutterLogo(
                        size: 600,
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Center(
              child: Icon(Icons.cached_rounded),
            ),
          ],
        ),
      ),
    );
  }
}
0 Answers
Related