Expand The App bar in Flutter to Allow Multi-Line Title?

Question

Does anyone know how I can create an app bar with a multi-line title, as per the material guidelines show here?

https://material.io/design/components/app-bars-top.html#

Answer 1

AppBar will let you get close to this, however you do have to indicate the height of the bottom PreferredSize widget, according to your text length, which isn't ideal.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.deepPurple,
      leading: IconButton(icon: Icon(Icons.menu), onPressed: () {}),
      actions: [
        IconButton(icon: Icon(Icons.search), onPressed: () {}),
        IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
      ],
      bottom: PreferredSize(
        child: Padding(
          padding: const EdgeInsets.fromLTRB(80.0, 0.0, 80.0, 16.0),
          child: Text(
            "Summer Trip to Tokyo and Kyoto",
            style: TextStyle(
              color: Colors.white,
              fontSize: 24.0,
            ),
          ),
        ),
        preferredSize: Size(0.0, 80.0),
      ),
    ),
    body: Text("..."),
  );
}