Disable TabView animation on Tab click event?

Question

How can I disable TabView animation when Tab in TabBar clicked ? I added

physics: NeverScrollableScrollPhysics()

for TabView but that doesn't apply for TabBar.

I'm using DefaultTabController.

Answer 1

Based on a very good answer on github about this issue, which achieves something similar to what your looking for (but with a bottomNavigationBar) here I share with you another workaround. It consists of combining a DefaultTabController with a PageView, a PageController and a simple index. Try this out.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tabs with no animation',
      theme: ThemeData.dark(),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  PageController _pageController;
  final int currentTab = 0;

  @override
  void initState() {
    // TODO: implement initState
    _pageController = PageController(initialPage: currentTab);
    super.initState();
  }

  final List<Tab> myTabs = <Tab>[
    Tab(text: 'One'),
    Tab(
      text: 'Two',
    ),
  ];

  var tabs = [
    TabOne(),
    TabTwo(),
  ];

  @override
  Widget build(BuildContext context) {
    var pageView = PageView(
      controller: _pageController,
      physics: NeverScrollableScrollPhysics(),
      children: tabs,
    );

    return DefaultTabController(
      length: myTabs.length,
      child: Scaffold(
          extendBodyBehindAppBar: true,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0.0,
            automaticallyImplyLeading: false,
            title: Center(
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  color: Colors.grey.shade800,
                ),
                width: 200,
                height: 50,
                child: TabBar(
                  onTap: (index) {
                    _pageController.jumpToPage(index);
                  },
                  unselectedLabelColor: Colors.white,
                  indicator: BoxDecoration(
                      borderRadius: BorderRadius.circular(30),
                      color: Colors.black),
                  tabs: myTabs,
                ),
              ),
            ),
          ),
          body: pageView),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(child: Text('Tab one')),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(child: Text('Tab two')),
    );
  }
}

Doing so, you have a something identical to a TabBarView but without animation.