Controller's length property (2) does not match the number of tabs (3) present in TabBar's tabs property

Question

I am trying to run my code and I get the error; Controller's length property (2) does not match the number of tabs (3) present in TabBar's tabs property.

I am stuck... I don't even Know why I am getting this error, can someone pls help me out here. I am trying to create a tab of two so I can scroll between each tab or select any tab. this is my code;

class BodyDetails extends StatefulWidget {
  const BodyDetails({
    Key key,
  }) : super(key: key);

  @override
  _BodyDetailsState createState() => _BodyDetailsState();
}

class _BodyDetailsState extends State<BodyDetails>
    with TickerProviderStateMixin {
  int quantity = 0;
  int screenTab = 0;
  TabController _tabController;

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

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              iconBadge(
                icon: Icons.near_me,
                iconColor: kPrimaryColor,
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15.0),
            child: Row(
              children: <Widget>[
                Text(
                  'by',
                  style: TextStyle(
                    color: Colors.grey[500],
                  ),
                ),
                Text(
                  ' Restaurant',
                  style: Theme.of(context).textTheme.bodyText2.copyWith(
                        color: Colors.black54,
                      ),
                ),
              ],
            ),
          ),
          Container(
            margin: const EdgeInsets.symmetric(
              vertical: 20.0,
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                GestureDetector(
                  onTap: () {
                    if (this.quantity > 0) {
                      setState(() {
                        this.quantity--;
                      });
                    }
                  },
                  child: Icon(
                    Icons.remove,
                    size: 30.0,
                  ),
                ),
                Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 30.0,
                    vertical: 8.0,
                  ),
                  margin: const EdgeInsets.symmetric(
                    horizontal: 20.0,
                  ),
                  decoration: BoxDecoration(
                    color: kPrimaryColor,
                    borderRadius: BorderRadius.circular(5.0),
                  ),
                  child: Text(
                    'Add To Cart',
                    style: TextStyle(
                      fontSize: 18.0,
                      color: Colors.white,
                    ),
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    setState(() {
                      this.quantity++;
                    });
                  },
                  child: Icon(
                    Icons.add,
                    size: 30.0,
                    color: kPrimaryColor,
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15.0),
            child: TabBar(                 //this is where the relevant error occurs
              controller: this._tabController,
              labelColor: kPrimaryColor,
              labelPadding: EdgeInsets.all(0),
              indicatorColor: Colors.white,
              labelStyle: TextStyle(
                fontSize: 18.0,
              ),
              tabs: [
                Container(
                  height: 25.0,
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'DETAILS',
                  ),
                ),
                Container(
                  height: 25.0,
                  alignment: Alignment.centerRight,
                  child: Text(
                    'REVIEWS',
                  ),
                ),
                Expanded(
                  child: TabBarView(
                    controller: this._tabController,
                    children: [
                      detailsTab(),
                      reviewTab(),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

Move your TabBarView() to outside tabs, then wrap your TabBarView() inside Container like this:

      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 15.0),
        child: TabBar(
          //this is where the relevant error occurs
          controller: this._tabController,
          labelColor: Colors.grey,
          labelPadding: EdgeInsets.all(0),
          indicatorColor: Colors.white,
          labelStyle: TextStyle(
            fontSize: 18.0,
          ),
          tabs: [
            Container(
              height: 25.0,
              alignment: Alignment.centerLeft,
              child: Text(
                'DETAILS',
              ),
            ),
            Container(
              height: 25.0,
              alignment: Alignment.centerRight,
              child: Text(
                'REVIEWS',
              ),
            ),
          ],
        ),
      ),
      Container(
        height: 200,
        child: TabBarView(
          controller: this._tabController,
          children: [
            detailsTab(),
            reviewTab(),
          ],
        ),
      ),