Problem in TabBar Controller (no tabBar controller for tabBar)

Question

So I am trying to create a profile screen with 3 tabs... profile, recent and review however upon trying to do so I am facing an error. I am not able to represent all 3 tabs. Recent tab has this widget. I have ran out of characters Hence here's a link to full code: https://docs.google.com/document/d/1qs4ajPJ0DBjserBJ3iBZmPXPz1zTP7tIYSh8vceVQn8/edit?usp=sharing

import 'package:econoomaccess/UpdateMapPage.dart';
import 'package:econoomaccess/drawer.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'localization/language_constants.dart';
import 'main.dart';
import 'localization/language.dart';
import 'package:flutter/cupertino.dart';

class UserProfilePage extends StatefulWidget {
  final Map map;
  UserProfilePage({this.map});
  @override
  _UserProfilePageState createState() => _UserProfilePageState();
}

class _UserProfilePageState extends State<UserProfilePage> {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  Firestore firestore = Firestore.instance;
  var _name, _uid, _phone, _language, _location, _image, menuType = "profile";
  Language language;
  void _changeLanguage(Language language) async {
    Locale _locale = await setLocale(language.languageCode);
    MyApp.setLocale(context, _locale);
  }

  void getData() async {
    var temp;
    _auth.onAuthStateChanged.listen((user) async {
      temp = await firestore.collection('users').document(user.uid).get();
      setState(() {
        _uid = user.uid;
        _name = temp.data['name'];
        _phone = temp.data['mobileno'];
        _image = temp.data['image'];
        _language = temp.data['language'];
        _location = temp.data['city'];
      });
    });
  }

//PS THERE'S A LOT MORE CODE WHICH WAS IRRELEVANT TO THE CONTEXT OF QUES HENCE //I'VE DELETED IT
  TabController tabController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Padding(
          padding: EdgeInsets.fromLTRB(20, 0, 20, 20),
          child: SizedBox(
            height: 54,
            child: BottomNavigationBar(
              showSelectedLabels: false,
              showUnselectedLabels: false,
              backgroundColor: Color.fromRGBO(255, 255, 255, 0.8),
              currentIndex: _selectedIndex,
              selectedItemColor: Color(0xffFE506D),
              onTap: _onItemTapped,
              items: [
                BottomNavigationBarItem(
                  icon: Icon(
                    Icons.explore,
                    color: Colors.black,
                  ),
                  title: Text("Explore"),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.search, color: Colors.black),
                  title: Text("Search"),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.bookmark_border, color: Colors.black),
                  title: Text("Faavorites"),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.perm_identity, color: Color(0xffFE506D)),
                  title: Text("Shop"),
                )
              ],
            ),
          )),
      drawer: DrawerWidget(uid: this.uid),
      appBar: AppBar(
        backgroundColor: Colors.white,
        iconTheme: IconThemeData(color: Colors.black),
        elevation: 0,
      ),
      backgroundColor: Color(0xffE5E5E5),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Column(
              children: <Widget>[
                ClipRRect(
                  borderRadius: BorderRadius.only(
                      bottomRight: Radius.circular(25),
                      bottomLeft: Radius.circular(25)),
                  child: Container(
                    height: 230,
                    width: MediaQuery.of(context).size.width,
                    decoration: new BoxDecoration(
                      // border: new Border.all(width: 1.0, color: Colors.black),
                      shape: BoxShape.rectangle,
                      color: Colors.white,
                      boxShadow: <BoxShadow>[
                        BoxShadow(
                          color: Colors.black,
                          offset: Offset(20.0, 30.0),
                          blurRadius: 40.0,
                        ),
                      ],
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Container(
                            width: 155,
                            height: 155,
                            decoration: new BoxDecoration(
                                shape: BoxShape.circle,
                                image: new DecorationImage(
                                    fit: BoxFit.cover,
                                    image: new NetworkImage("$_image")))),
                        SizedBox(height: 10),
                        Text("$_name",
                            style: TextStyle(
                                fontSize: 25, fontWeight: FontWeight.bold))
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 15.0),
                      child: Container(
                        // margin: EdgeInsets.only(left: 15.0),
                        child: TabBar(
                          labelPadding: EdgeInsets.only(right: 30.0),
                          indicatorColor: Colors.transparent,
                          controller: tabController,
                          labelColor: Colors.black,
                          unselectedLabelColor: Colors.black26,
                          labelStyle: TextStyle(fontSize: 18,fontFamily: "Gilroy"),
                          unselectedLabelStyle: TextStyle(fontSize: 15,fontFamily: "Gilroy"),
                          isScrollable: true,
                          tabs: [
                            Tab(
                              text: getTranslated(context, "profile"),
                            ),
                            Tab(
                              text: getTranslated(context, "reviews"),
                            ),
                            Tab(
                              text: getTranslated(context, "recent"),
                            ),
                          ]
                        )
                      ),
                  ),
                ),
                Expanded(
                    child: TabBarView(
                        controller: tabController,
                        children: [
                          ProfileItems(), ReviewItems(), RecentItems()
                        ]
                    )
                )
              ],
            ),
          )
        ],
      )
    );
  }
}

I am not able to display the 3 tabs. I am facing error that No TabController for TabBar,ERROR Message

The following assertion was thrown building Container:
No TabController for TabBar.

In this case, there was neither an explicit controller nor a default controller.
The relevant error-causing widget was: 
Container file:///C:/Flutter/Naniz_eats/lib/UserProfilePage.dart:658:30

(2) Exception caught by widgets library ═══════════════════════════════════════════════════
No TabController for TabBarView.
The relevant error-causing widget was: 
Expanded file:///C:/Flutter/Naniz_eats/lib/UserProfilePage.dart:684:17

Answer 1

You have to initialize the tabController in the initState method of your stateful widget. Check the code below:

// create an instance of TabController TabController tabController;

  void initState() {
    // TODO: implement initState
    // initialise the tab controller here
    tabController = TabController(vsync: this, length: 3);
    super.initState();
    getUser();
    getData();
  }

Also add a mixin to your stateful widget. Check the code below:

class _UserProfilePageState extends State<UserProfilePage> with SingleTickerProviderStateMixin{}

Answer 2

So the answer to this question. With the help of @T.T Sage is that first I have to extend the userProfilePage class with SingleTickerProviderStateMixin Like this:

class _UserProfilePageState extends State<UserProfilePage> with SingleTickerProviderStateMixin

and then wrapping the Scaffold with DefaultTabController also to remember to remove the tabcontroller property from Tab Widget:

 Widget build(BuildContext context) {
    return DefaultTabController(
        length: 3,
        child: Scaffold(...)
   )
}

Answer 3

Have you tried Initializing the tabController instance :

tabController = TabController(vsync: this, length: 3);

Not for this to work you have to also use SigleTickerProviderStateMixin

class _TabbedPageState extends State<TabbedPage> with SingleTickerProviderStateMixin