How to disable swiping whole screen inside the Tab Bar?

Issue

I have a TabBar inside SliverAppBar and inside that particular tab, have a container which further having swiping inside it from left to right but when I swipe inside the screen to left or right it changes the tab. Suppose, I am on tab 1 and if I swipe inside container it goes to another tab. How can I stop that? I just want to switch from one tab to another if user only press on app bar on top and that should not have any effect if it is swiping inside the screen. I have tried NeverScrolPhysics but it only stop the app bar and make no difference inside the screen.

Here is the code below for tabs:-

         SafeArea(
          child: NestedScrollView(
            controller: _scrollViewController,
            headerSliverBuilder: (BuildContext context, bool  boxIsScrolled){
              return <Widget>[
                SliverAppBar(
                  automaticallyImplyLeading: false,
                  backgroundColor: Colors.transparent,
                  floating: true,
                  pinned: false,
                   snap: true,
                  title: TabBar(

                      isScrollable: true,
                      controller: _tabController,
                      unselectedLabelColor: Colors.blueGrey,
                      unselectedLabelStyle: TextStyle(fontSize: 15,fontWeight: FontWeight.w700 ),
                      labelColor: white,
                      indicatorSize: TabBarIndicatorSize.label,
                      indicator: BoxDecoration(
                          borderRadius: BorderRadius.circular(50),
                          color: mRed),
                      tabs: [

                        Tab(
                          child: Container(
                         
                              child: Text("TAB 1",),
                            ),
                          ),
                         Tab(
                          child: Container(
                         
                              child: Text("TAB 2",),
                            ),
                          ),
                        )
    and so on......

Solution

I’m curious where you put the NeverScrollableScrollPhysics(), because that is how it is done, if I understood your issue correctly.

You have cut away the next part which is crucical… but let’s assume that in your body of NestedScrollView you have your TabBarView, then it should look like this:

    NestedScrollView(
      headerSliverBuilder: ......

      body: TabBarView(
        physics: const NeverScrollableScrollPhysics(),
        .....

Here is a fully working example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) => [
            const SliverAppBar(
              title: Text('AppBar title'),
              bottom: TabBar(
                tabs: [
                  Tab(
                    child: Align(
                      child: Text('Tab 1'),
                    ),
                  ),
                  Tab(
                    child: Align(
                      child: Text('Tab 2'),
                    ),
                  )
                ],
              ),
            )
          ],
          body: TabBarView(
            physics: const NeverScrollableScrollPhysics(),
            children: [
              Container(
                child: const Text('Text 1'),
              ),
              Container(
                child: const Text('Text 2'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answered By – Robert Sandberg

Answer Checked By – Willingham (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *