CODEWITHSUNDEEP
fluttermaterial-designtabbarappbar
BigPP
BigPP

Reputation: 610

Flutter app bar layout: action buttons in the same row with tab bar?

Let's say I would like to create an app bar with two action buttons at the start and in the end while having a tab bar right in the middle, all in the same row. Here is the code I worked on to get the tab bar working:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        highlightColor: Colors.transparent,
        splashColor: Colors.transparent,
        hoverColor: Colors.transparent,
      ),
      title: 'Flutter Demo',
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            leading: Icon(
              Icons.menu,
            ),
            automaticallyImplyLeading: false,
            backgroundColor: Colors.white,
            flexibleSpace: new Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TabBar(
                  indicatorColor: Colors.pink[100],
                  tabs: [
                    Tab(text: 'Dogs'),
                    Tab(text: 'Cats'),
                  ],
                  labelColor: Colors.black,
                ), //tabbar
              ], //chilren on Tabbar
            ), //new Column
          ), //appbar
          body: TabBarView(
            children: [
              Center(child: Text('DOGS')),
              Center(child: Text('CATS')),
            ],
          ),
        ),
      ),
    );
  }
}

appbar current appbar current

app bar expected, with two action buttons (and the indicator position needs a bit more work: appbar expected, with two action buttons (and the indicator position needs a bit more work

But how could I add the two action buttons without having the tab bar overlaying them? Using grid maybe?

Upvotes: 2

Views: 1605

Answers (1)

Jim
Jim

Reputation: 7601

try to put tabbar into title:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        highlightColor: Colors.transparent,
        splashColor: Colors.transparent,
        hoverColor: Colors.transparent,
      ),
      title: 'Flutter Demo',
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            leading: Icon(
              Icons.menu,
              color: Colors.black,
            ),
            actions: [
              Icon(
                Icons.settings,
                color: Colors.black,
              ),
            ],
            automaticallyImplyLeading: false,
            backgroundColor: Colors.white,
            title: Padding(
              padding: EdgeInsets.only(left: 50, right: 50),
              child:TabBar(
              indicatorColor: Colors.pink[100],
              tabs: [
                Tab(text: 'Dogs'),
                Tab(text: 'Cats'),
              ],
              labelColor: Colors.black,
            ),),
          ), //appbar
          body: TabBarView(
            children: [
              Center(child: Text('DOGS')),
              Center(child: Text('CATS')),
            ],
          ),
        ),
      ),
    );
  }
}

Upvotes: 3

Related Questions