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

Question

在Flutter中，我想创建一个外观如下的应用程序栏：

我很容易设法在左右添加两个图标，但是我正在努力在中间创建一个矩形。

我尝试了以下代码：

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.

感谢您的帮助。

Answer 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: () => {},
          ),
        ],
      ),
    );
  }
}

输出：

Answer 2

替代方法（由@Josteve Adekanbi答案启发，创建一个填充标题区域的矩形是：

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