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

This can be achieved by replacing the "title" property of AppBar with "flexibleSpace":

  Scaffold(
    appBar: AppBar(
      flexibleSpace: Center(
        child: Column(
          children: [
            Text('Title Line One'),
            Text('Title Line Two'),
          ],
        ),
      ),
    ),
    body: body
  ),

If overflow occurs due to height, just wrap AppBar with a PreferredSize widget and set the height to a higher value than the default one:

  Scaffold(
    appBar: PreferredSize(
      preferredSize: Size.fromHeight(100),
      child: AppBar(...),
    ),
  ),