how to create the tab bar without app bar in flutter?

Tried flexibleSpace?

return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
  flexibleSpace: new Column(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      TabBar(
        tabs: [
          Tab(text: "Pending"),
          Tab(text: "Delivered"),
          Tab(text: "Rejected"),
        ],
      )
    ],
  ),
),
body: TabBarView(
  children: [
    PendingOrders(),
    DeliveredOrders(),
    RejectedOrders(),
  ],
   ),
   ),
 );

Flutter works with composition. You can pretty much replace any widget with something else. They are not limited to one specific child.

So you can simply do

new Scaffold(
   appBar: new TabBar(
      ...
   ),
   ...
)

The only requirement is for your widget to be of the right interface. Scaffold requires as appBar a PreferredSizeWidget.

Fortunately, TabBar is already a PreferredSizeWidget by default. So no change needed


 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(

            title: Text('Tabs Demo'),
          ),
          body:
          Column(
            children: <Widget>[
              TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.directions_car)),
                  Tab(icon: Icon(Icons.directions_transit)),
                  Tab(icon: Icon(Icons.directions_bike)),
                ],
              ),
              Expanded(
                flex: 1,
                child: TabBarView(
                  children: [
                    Icon(Icons.directions_car),
                    Icon(Icons.directions_transit),
                    Icon(Icons.directions_bike),
                  ],
                ),
              )
            ],
          )

        ),
      ),
    );

this worked for me

Tags:

Flutter