CODEWITHSUNDEEP
flutter
flutter
flutter

Reputation: 6766

Tabs and action in the same row in the app bar

enter image description here

I'm trying to implement tabViews and actions in the same row in an app bar as seen in the screen grab. The app is for an iPad so I have extra real estate to play with. The AppBar class has a bottom attribute where I've seen tabViews implemented. The action property is higher up in the app bar. Do tabviews have to be implemented in the app bar? Ultimately how would I go about implementing the design shown. (Past 24 hrs part not necessary to implement)

Upvotes: 0

Views: 120

Answers (1)

Mohammed Adam
Mohammed Adam

Reputation: 409

try this code:

DefaultTabController(
    length: 3,
    initialIndex: 0,
    child: Scaffold(
      appBar: AppBar(
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Expanded(
              child: TabBar(
                tabs: [
                  Tab(child: Text('ScreenOne')),
                  Tab(child: Text('ScreenTwo')),
                  Tab(child: Text('ScreenThree'))
                ],
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                IconButton(
                  icon: Icon(MaterialIcons.share),
                  onPressed: (){},
                ),
                IconButton(
                  icon: Icon(MaterialIcons.info),
                  onPressed: (){},
                ),
              ],
            ),
          ],
        ),
      ),
      body: TabBarView(
        children: [
          ScreenOne(),
          ScreenTwo(),
          ScreenThree(),
        ],
      ),
    ),
  )

Upvotes: 1

Related Questions