Flutter Tabbar NoSuchMethodError: NoSuchMethodError

Question

I am building an app using flutter that has a TabBar that is used to filter a listview by categories. However, when the TabBar is initiated it throws the following error:

flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
flutter: The following NoSuchMethodError was thrown building _TabStyle(animation: kAlwaysDismissedAnimation,
flutter: dirty, state: _AnimatedState#71498):
flutter: The method 'withAlpha' was called on null.
flutter: Receiver: null
flutter: Tried calling: withAlpha(178).....

Code was working fine initially. But the simulator now no longer renders the tapBar at all. Instead the simulator has a error stating that the bottom overflowed by 99870 pixels

class LocationListWidget extends StatefulWidget {
  final List<Location> listOfLocations;
  @override
  State<StatefulWidget> createState() => new LocationListView();
  LocationListWidget(this.listOfLocations);
}

class LocationListView extends State<LocationListWidget>
with SingleTickerProviderStateMixin {

TabController _controller;

  static const List<TopButtons> typeList = const <TopButtons>[
const TopButtons(title: "Places", icon: Icons.directions_walk),
const TopButtons(title: "Shop", icon: Icons.shop),
const TopButtons(title: "Vineyards", icon: Icons.local_drink),
const TopButtons(title: "Dining", icon: Icons.local_dining),
const TopButtons(title: "Cafes", icon: Icons.local_cafe),
const TopButtons(
  title: "Stay",
  icon: Icons.home,
)
    ];

  List<Location> listOfLocations;
  List<Location> fliteredlistOfLocations;

@override
void initState() {
super.initState();
listOfLocations = this.widget.listOfLocations;
fliteredlistOfLocations = new List();
_controller = new TabController(length: 5, vsync: this,     initialIndex: 1);
_controller.addListener(updateList);
updateList();
  }

 void dispose() {
_controller.dispose();
super.dispose();
}

  @override
  Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBar(
      title: Text("Location"),
      bottom:
          TabBar(controller: _controller, isScrollable: true, tabs:      <Tab>[
        Tab(text: typeList[0].title, icon: Icon(typeList[0].icon)),
        Tab(text: typeList[1].title, icon: Icon(typeList[1].icon)),
        Tab(text: typeList[2].title, icon: Icon(typeList[2].icon)),
        Tab(text: typeList[3].title, icon: Icon(typeList[3].icon)),
        Tab(text: typeList[4].title, icon: Icon(typeList[4].icon)),
      ]),
    ),
    body: SafeArea(
        child: ListView.builder(
            itemExtent: 100.0,
            padding: const EdgeInsets.all(10.0),
            itemCount: fliteredlistOfLocations.length,
            itemBuilder: (BuildContext ctxt, int index) =>
                buildBody(ctxt, index))));
  }

Answer 1

I ran into a very similar issue. Here is how I fixed it:

I've added unselectedLabelColor: Colors.red, property in the TabBar widget. This stopped the error and tabs were working as expected.

In my case I've traced the issue back to ThemeData. I've implemented a custom theme for my app and this was the cause for this error. I've commented my custom theme and everything worked perfectly without any errors and without the need to add unselectedLabelColor.

Here is my final code:

    import 'package:flutter/material.dart';

    class AgendaScreen extends StatefulWidget {
      @override
      _AgendaScreenState createState() => _AgendaScreenState();
    }

    class _AgendaScreenState extends State
        with SingleTickerProviderStateMixin {
      TabController _tabController;

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

      @override
      Widget build(BuildContext context) => Scaffold(
            backgroundColor: Colors.white,
            appBar: AppBar(
              backgroundColor: Theme.of(context).primaryColor,
              title: Text('Agenda', style: Theme.of(context).textTheme.title),
            ),
            body: Column(
              children: [
                Container(
                  child: TabBar(
                    controller: _tabController,
                    indicatorColor: Colors.red,
                    unselectedLabelColor: Colors.red,
                    tabs: [
                      Tab(
                        child: Text(
                          'Audi 01',
                          style: TextStyle(color: Colors.black),
                        ),
                      ),
                      Tab(
                        child: Text(
                          'Audi 02',
                          style: TextStyle(color: Colors.black),
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: TabBarView(
                    controller: _tabController,
                    children: [
                      ListView(
                        children: [
                          Row(
                            children: [],
                          )
                        ],
                      ),
                      Icon(Icons.directions_transit)
                    ],
                  ),
                ),
              ],
            ),
          );
    }