Flutter：创建一个填充应用栏标题区域的矩形答案

【问题标题】：Flutter: Create a rectangle that fills the title area of the app barFlutter：创建一个填充应用栏标题区域的矩形
【发布时间】：2020-07-07 08:02:21
【问题描述】：

在 Flutter 中我想创建一个如下所示的应用栏：

我很容易设法在左右两侧添加了 2 个图标，但我很难在中间创建一个矩形。

我试过以下代码：

return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        leading: IconButton(
          icon: Image.asset('assets/images/maps.png'),
          onPressed: () => {},
        ),
        title: Expanded( // The bit that's not working. A rectangle that fills the middle area.
          child: Container(
            color: Colors.blue,
          ),
        ),
        actions: <Widget>[
          IconButton(
            icon: Image.asset('assets/images/search.png'),
            onPressed: () => {},
          ),
        ],
      ),
    );

但我得到以下异常：

Expanded widgets must be placed inside Flex widgets.
Expanded(no depth, flex: 1, dirty) has no Flex ancestor at all.

感谢您的帮助。

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您可以通过将 AppBar 的 centerTile 属性设置为 true

来实现此目的

这样

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        centerTitle: true,
        leading: IconButton(
          icon: Icon(
            Icons.location_on,
            color: Colors.grey,
          ),
          onPressed: () => {},
        ),
        title: Container(
          padding: EdgeInsets.all(10),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Icon(Icons.refresh),
              Expanded(
                child: Center(
                  child: Text("London"),
                ),
              ),
              Opacity(child: Icon(Icons.refresh), opacity: 0,),
            ],
          ),
          decoration: BoxDecoration(
              color: Colors.grey, borderRadius: BorderRadius.circular(10)),
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(
              Icons.search,
              color: Colors.grey,
            ),
            onPressed: () => {},
          ),
        ],
      ),
    );
  }
}

输出：

【讨论】：

非常感谢！这超出了我的要求，但确实有帮助。不过我不需要centerTitle 属性。

【解决方案2】：

另一种解决方案（受@Josteve Adekanbi 回答的启发）创建一个填充标题区域的矩形：

return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        leading: ...
        title: Container(
          width: double.infinity,
          height: 40,
          child: Container(
            color: Colors.blue,
          ),
        ),
        actions: ...
      ),
    );

【讨论】：