No TabController for TabBar

Question

I'm trying to add a tabBar to my app, but I'm having some issues getting it to build. I've followed the documentation and added a tabController, but I'm getting an error saying I don't have one. My code is below.

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  TabController _controller;
  final List<Tab> topTabs = <Tab>[
    new Tab(text: 'Profile'),
    new Tab(text: 'Match'),
    new Tab(text: 'Chat'),
  ];

  @override
  void initState() {
   super.initState();

   _controller = TabController(vsync: this, length: 3);
  }

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


  @override
  Widget build(BuildContext context) {
      return  Scaffold(
            appBar: AppBar(
              title: Text('MyApp'),
              bottom: TabBar(
                  controller: _controller,
                  tabs: topTabs,
              ),
            ),
            body: TabBarView(
                controller: _controller,
                children: [
              new Container(
                color: Colors.lightBlueAccent,
                child: Center(child: Text('Profile', style: TextStyle(color: Colors.white),),),
              ),
              new Container(
                color: Colors.purpleAccent,
                child: Center(child: Text('Match', style: TextStyle(color: Colors.white),),),
              ),
              new Container(
                color: Colors.lightGreenAccent,
                child: Center(child: Text('Chat', style: TextStyle(color: Colors.white),),),
            )
            ]),
          );
  }
}

The exact error is flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ flutter: The following assertion was thrown building MediaQuery(MediaQueryData(size: Size(375.0, 667.0), flutter: devicePixelRatio: 2.0, textScaleFactor: 1.0, platformBrightness: Brightness.light, padding: flutter: EdgeInsets.zero, viewPadding: EdgeInsets.zero, viewInsets: EdgeInsets.zero, physicalDepth: flutter: 1.7976931348623157e+308, alwaysUse24HourFormat: false, accessibleNavigation: false, highContrast: flutter: false, disableAnimations: false, invertColors: false, boldText: false)): flutter: No TabController for TabBar. flutter: When creating a TabBar, you must either provide an explicit TabController using the "controller" flutter: property, or you must ensure that there is a DefaultTabController above the TabBar. flutter: In this case, there was neither an explicit controller nor a default controller.

EdwynZN EdwynZN · Accepted Answer · 2020-07-07T00:37:03

I could run it without a problem, did you overwrote MyApp example when creating your project that has the MaterialApp with your code or something before the main?

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyAppState()
    );
  }
}

class MyAppState extends StatefulWidget{
  
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyAppState> with TickerProviderStateMixin {
  TabController _controller;
  final List<Tab> topTabs = <Tab>[
    new Tab(text: 'Profile'),
    new Tab(text: 'Match'),
    new Tab(text: 'Chat'),
  ];

  @override
  void initState() {
   super.initState();

   _controller = TabController(vsync: this, length: 3);
  }

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


  @override
  Widget build(BuildContext context) {
      return  Scaffold(
            appBar: AppBar(
              title: Text('MyApp'),
              bottom: TabBar(
                  controller: _controller,
                  tabs: topTabs,
              ),
            ),
            body: TabBarView(
                controller: _controller,
                children: [
              new Container(
                color: Colors.lightBlueAccent,
                child: Center(child: Text('Profile', style: TextStyle(color: Colors.white),),),
              ),
              new Container(
                color: Colors.purpleAccent,
                child: Center(child: Text('Match', style: TextStyle(color: Colors.white),),),
              ),
              new Container(
                color: Colors.lightGreenAccent,
                child: Center(child: Text('Chat', style: TextStyle(color: Colors.white),),),
            )
            ]),
          );
  }
}

No TabController for TabBar

1 Answers