flutter - 如何将文本放置在标签栏的左侧？

Question

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

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Viewer',
      theme:
          ThemeData(primaryColor: Colors.cyan, accentColor: Colors.tealAccent),
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: PreferredSize(
              child: Container(
                margin: EdgeInsets.fromLTRB(100, 0, 0, 0),
                child: Row(
                  children: <Widget>[
                    //Icon(Icons.settings)
                    Text('Blah'),
                    TabBar(
                      tabs: <Widget>[
                        Tab(icon: Icon(Icons.search)),
                        Tab(icon: Icon(Icons.file_download)),
                        Tab(icon: Icon(Icons.settings))
                      ],
                    ),
                  ],
                ),
              ),
              preferredSize: Size.fromHeight(-8),
            ),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.search),
              Icon(Icons.file_download),
              Icon(Icons.settings),
            ],
          ),
        ),
      ),
    );
  }
}

我想将文本放在blah图像中可见的部分。无论哪种方式，我都想在标签栏的左侧放置一个文本。我尝试使用行，但发生溢出错误。这发生了一条错误消息。如何在该空间中输入文本？

标签： flutter

Answer 1

这是适合您的代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hitomi Viewer',
      theme:
          ThemeData(primaryColor: Colors.cyan, accentColor: Colors.tealAccent),
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
              bottom: PreferredSize(
            preferredSize: Size.fromHeight(-8),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Container(
                    margin: EdgeInsets.only(left: 20),
                    child: Center(child: Text('Title'))),
                SizedBox(
                  width: 50,
                ),
                Flexible(
                  child: TabBar(
                    tabs: [
                      Tab(icon: Icon(Icons.search)),
                      Tab(icon: Icon(Icons.file_download)),
                      Tab(icon: Icon(Icons.settings)),
                    ],
                  ),
                ),
              ],
            ),
          )),
          body: TabBarView(
            children: [
              Icon(Icons.search),
              Icon(Icons.file_download),
              Icon(Icons.settings),
            ],
          ),
        ),
      ),
    );
  }
}

输出：