Flutter - TabBar inside Column

Question

I have a Column with an Image and below it a DefaultTabController. The TabBar basically does not display the tabs, but the children of the TabBarView are displayed.

That's the error:

Null check operator used on a null value The relevant error-causing widget was TabBar lib/…/screens/specific_launch.dart:132 The following RenderObject was being processed when the exception was fired: RenderCustomPaint#83c8d relayoutBoundary=up10 RenderObject: RenderCustomPaint#83c8d relayoutBoundary=up10 parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size) constraints: BoxConstraints(0.0<=w<=336.0, 0.0<=h<=Infinity) size: Size(336.0, 100000.0) child: RenderErrorBox#daadf NEEDS-PAINT parentData: (can use size) constraints: BoxConstraints(0.0<=w<=336.0, 0.0<=h<=Infinity) size: Size(336.0, 100000.0)

That's the code:

 return Scaffold(
    appBar: AppBar(
      title: Text(
        'Launch',
        style: GoogleFonts.poppins(fontWeight: FontWeight.w600),
      ),
      actions: [
        IconButton(icon: Icon(Icons.share_outlined), onPressed: () {})
      ],
    ),
    body: Padding(
      padding: EdgeInsets.only(
          top: getHeight(context) / 30.0,
          left: getWidth(context) / 30.0,
          right: getWidth(context) / 30.0),
      child: Column(
        children: [
          // ...first child


          SizedBox(
            width: getWidth(context),
            height: getHeight(context),
            child: DefaultTabController(
                length: 3,
                initialIndex: 0,
                child: Scaffold(
                  appBar: AppBar(
                    bottom: TabBar(
                      tabs: [
                        Tab(
                          text: 'State',
                        ),
                        Tab(
                          text: 'Mission',
                        ),
                        Tab(
                          text: 'Rocket',
                        )
                      ],
                    ),
                  ),
                  body: TabBarView(
                    children: [
                      Text(
                        'Tab 1',
                      ),
                      Text('Tab 2'),
                      Text('Tab 3')
                    ],
                  ),
                )),
          )
        ],
      ),
    ));

That's the result I'm trying to achieve:

I saw the documentation for the DefaultTabController, and there should be a Scaffold with an AppBar and a body — Arfmann
Remove Sizedbox and Try to wrap DefaultTabController with an Expanded widget, if OutOfBoundary causes the issue. — ajay

Shubham Narkhede Shubham Narkhede · Accepted Answer · 2021-01-23T11:48:20

So if you want to use the DefaultTabController widget then you must start your widget tree with the DefaultTabController widget and then add your Scaffold. After that I used only one Scaffold and added rest of part with the help of Expanded widget

Here is output image

class SelectionScreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _selectionScreen();
  }
}
class _selectionScreen extends State<SelectionScreen>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return DefaultTabController(
        length: 3,
        initialIndex: 0,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Launch',),
            actions: [IconButton(icon: Icon(Icons.share_outlined), onPressed: () {})],
          ),
          body: Column(
            children: [
              Image.network("https://i.stack.imgur.com/45Aaj.png", height: 150,),
              Container(
                height: 70,
                child: AppBar(
                  centerTitle: true,
                  title: Text("New Titile"),
                  bottom: TabBar(
                    tabs: [
                      Tab(text: 'State',),
                      Tab(text: 'Mission',),
                      Tab(text: 'Rocket',)
                    ],
                  ),
                ),
              ),
              Expanded(
                child: TabBarView(
                  children: [
                    Text('Tab 1',),
                    Text('Tab 2'),
                    Text('Tab 3')
                  ],
                ),
              )
            ],
          ),
        ));
  }
}

Flutter - TabBar inside Column

1 Answers