Флаттер: создайте прямоугольник, который заполняет область заголовка панели приложения

Question

В 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.

Спасибо за помощь.

Answer 1

Этого можно добиться, установив атрибут centerTile для AppBar в 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: ...
      ),
    );