0
votes

I'm want to display a tabbar as it is used with the appbar, but in the middle of the scaffold body. Is it possible?

I have this code, but the TabBarView breaks the ui. If I comment the TabBarView, the TabBars are displayed correctly. What is wrong with the code? In case it's possible to use it this way..

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

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          Text('Some other random content'),
          TabBar(
            controller: _tabController,
            isScrollable: true,
            tabs: <Widget>[
              Tab(
                child: Text(
                  'Posts',
                  style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.black87,
                  ),
                ),
              ),
              Tab(
                child: Text(
                  'Fotos',
                  style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.black87,
                  ),
                ),
              ),
            ],
          ),
          TabBarView(
            controller: _tabController,
            children: <Widget>[
              Center(
                child: Text("User"),
              ),
              Center(
                child: Text("Email"),
              ),
            ],
          ),
        ],
      ),
    );
  }
2

2 Answers

0
votes

Just Change ListView to Column and add SingleChildScrollView

SingleChildScrollView(
      child: Column(
        children: <Widget>[]
    ),
)
0
votes

Hey i guess it's already too late but maybe it helps others. If you just want to have your tabbar e.g. in the middle of the screen to divide your screen in 2 sections (top: content, bottom: tabbar) you can place your scaffold inside a column, e.g. following:

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          flex: 1,
          child: Center(
            child: Text("Header"),
          ),
        ),
        Expanded(
          flex: 1,
          child: DefaultTabController(
            length: 3,
            child: Scaffold(
              appBar: AppBar(
                flexibleSpace: TabBar(
                  tabs: [
                    Tab(text: "First"),
                    Tab(text: "Second"),
                    Tab(text: "Third"),
                  ],
                ),
              ),
              body: TabBarView(
                children: [
                  Center(child: Text("First screen")),
                  Center(child: Text("Second screen")),
                  Center(child: Text("Third screen")),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }

How it looks on Android

Let me know if this fits your needs / if you need further help :-)