Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

DefaultTabController without Scaffold?

I'm trying to use DefaultTabController in the middle of some widgets. So my TabBar could not be in AppBar and has to be down some widgets. So my problem is when I use TabBarView it crashes...

So here's an example of Flutter sample but no found how to do it without Scaffold.

final List<Tab> myTabs = <Tab>[
  Tab(text: 'LEFT'),
  Tab(text: 'RIGHT')];

Code

DefaultTabController(
  length: myTabs.length,
  child: Scaffold(
    appBar: TabBar(
      tabs: myTabs,
    ),
    body: TabBarView(
      children: myTabs.map((Tab tab) {
        final String label = tab.text.toLowerCase();
        return Center(
          child: Text(
            'This is the $label tab',
            style: const TextStyle(fontSize: 36),
          ),
        );
      }).toList(),
    ),
  ),
);

Here is another example of a TabBar I should do image

Real Code

class ProfileTabBarNavigation extends StatelessWidget {
 final List<Tab> myTabs = <Tab>[
   const Tab(text: kArtwork),
   const Tab(text: kPastJobs)];
@override
Widget build(BuildContext context) {
return DefaultTabController(
  length: 2,
  initialIndex: 0,
  child: Padding(
    padding: kPaddingTabBar,
    child: Container(
      padding: EdgeInsets.all(5.0),
      decoration: BoxDecoration(
        color: kLightGrey,
        borderRadius: BorderRadius.all(
          Radius.circular(50),
        ),
      ),
      child: Column(children: <Widget>[
        TabBar(
          tabs: myTabs,
          unselectedLabelColor: Colors.black54,
          labelColor: Colors.black,
          unselectedLabelStyle: kBoldText,
          labelStyle: kBoldText,
          indicatorSize: TabBarIndicatorSize.tab,
          indicator: BoxDecoration(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(50),
            color: Colors.white,
          ),
        ),
        TabBarView(
          children: myTabs.map((Tab tab) {
            final String label = tab.text.toLowerCase();
            return Center(
              child: Text(
                'This is the $label tab',
                style: const TextStyle(fontSize: 36),
              ),
            );
          }).toList(),
        ),
      ]),
    ),
  ),
);
}
}
like image 671
Jonathan Gómez Avatar asked Feb 23 '20 12:02

Jonathan Gómez


People also ask

Can we use TabBar without AppBar in flutter?

TabBar with labels without AppBarIt's not good. Instead, we can use PreferredSize widget. Since TabBar has preferredSize , we should use it to decide the height. Yes!

How do I make TabBar outside AppBar in flutter?

Setting up TabBar in Flutter Here's the minimal code to get TabBar up and running: DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( bottom: TabBar( tabs: [ Tab(icon: Icon(Icons. flight)), Tab(icon: Icon(Icons. directions_transit)), Tab(icon: Icon(Icons.

What is DefaultTabController in flutter?

DefaultTabController is an inherited widget that is used to share a TabController with a TabBar or a TabBarView. It's used when sharing an explicitly created TabController isn't convenient because the tab bar widgets are created by a stateless parent widget or by different parent widgets.


1 Answers

Wrap your TabBarView with Expanded.

Expanded(
 child: TabBarView(//...),
),

Try it on DartPad

like image 61
Kahou Avatar answered Sep 21 '22 23:09

Kahou