Flutter 应用栏布局：动作按钮与标签栏在同一行？

Question

假设我想创建一个应用栏，在开头和结尾有两个操作按钮，同时在中间有一个选项卡栏，它们都在同一行中。这是我为使标签栏正常工作而编写的代码：

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')),
            ],
          ),
        ),
      ),
    );
  }
}

应用栏当前

应有应用栏，带有两个操作按钮（指示器位置需要更多工作：

但是我怎样才能添加两个操作按钮而不让标签栏覆盖它们呢？也许使用网格？

Answer 1

尝试将标签栏放入标题中：

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')),
            ],
          ),
        ),
      ),
    );
  }
}

Flutter 应用栏布局：动作按钮与标签栏在同一行？

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

appbar

tabbar

material-design

flutter