TabBar within Scaffold with my own controller doesn't work

Question

I am using a Scaffold and within the Body I want to use the TabBar Widget, to switch between Info, Adress and Delivery. But with this code

import 'package:flutter/material.dart';
import 'package:lieferantenapp/components/myBestellungText.dart';
import 'package:lieferantenapp/components/myLieferbuttons.dart';
import 'package:lieferantenapp/route/route.dart';
import 'package:lieferantenapp/variables.dart' as variables;

class CurrentDetail extends StatefulWidget {
  @override
  _CurrentDetailState createState() => _CurrentDetailState();
}

class _CurrentDetailState extends State<CurrentDetail>
    with TickerProviderStateMixin {
  TabController _tabController;
  @override
  initState() {
    super.initState();
    _tabController = new TabController(
      vsync: this,
      length: 3,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              children: [
                MyBestellungText(),
                MyLieferbuttons(),
              ],
            ),
          ),
          TabBar(
            controller: _tabController,
            labelColor: Colors.black,
            unselectedLabelColor: Colors.black12,
            indicatorColor: variables.red,
            tabs: const <Widget>[
              Tab(
                text: "Hey",
                icon: Icon(
                  Icons.info_outline,
                  color: Colors.black,
                ),
              ),
              Tab(
                text: "Hey",
                icon: Icon(
                  Icons.info_outline,
                  color: Colors.black,
                ),
              ),
              Tab(
                text: "Hey",
                icon: Icon(
                  Icons.info_outline,
                  color: Colors.black,
                ),
              ),
            ],
          ),
          TabBarView(
            controller: _tabController,
            children: <Widget>[
              Text("Test 1"),
              Text("Test 2"),
              Text("Test 3"),
            ],
          ),
        ],
      ),
    );
  }
}

I am receiving the following Error like 10 times.

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderCustomPaint#d08ff relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
TabBarView
lib\screens\currentDetail.dart:73
════════════════════════════════════════════════════════════════════════════════

I tried using the DefaultTabController within the Scaffold and also tried wrapping the Scaffold in the DefaultTabController, but it didn't recognize it either ways. Right now I am running it with a customized Controller, but I'm not quite sure if this is the best way to do this and it isn't working anyways xD. How to fix this problem?

Answer 1

Wrap TabBarView with an Expanded widget.

Expanded(
  child: TabBarView(
    controller: _tabController,
    children: <Widget>[
      Text("Test 1"),
      Text("Test 2"),
      Text("Test 3"),
    ],
  ),
),

I would also recommend you to put TabBar in the bottom property of AppBar.

Scaffold(
  appBar: AppBar(
    bottom: TabBar(...),
  ),
  ...
),