Flutter: Create a rectangle that fills the title area of the app bar

user_3006737 0
Viewed 591

In Flutter I want to create an app bar that looks as follows:

topbar

I've easily managed to add the 2 icons on the left and right, but I am struggling to create a rectangle in the middle.

I've tried the following code:

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

but I get the following exception:

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

Thanks for the help.

flutter-layout flutter
2 Answers

You can achieve this by setting the centerTile attribute of the AppBar to true

Like this

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

The output: enter image description here

user_114525110

An alternative solution (inspired by @Josteve Adekanbi answer), to create a rectangle that fills the title area is:

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