Need help resizing Flutter AppBar to fit 4 rows of text and

Question

I'm having trouble resizing the AppBar to fit 4 rows of text (Name, Street Address, City/State/Zip, Phone Number).

Here is the page code, and screenshot; notice clipping of third row.

import 'package:appvervemenu/http_service.dart';
import 'package:appvervemenu/post_detail.dart';
import 'package:appvervemenu/post_model.dart';
import 'package:flutter/material.dart';

class PostsPage extends StatelessWidget {
  final HttpService httpService = HttpService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(200.0),
        child: AppBar(
            automaticallyImplyLeading: false,
            centerTitle: true,
            title: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text("name\nstreet\ncity state zip"),
                ])),
      ),
      body: FutureBuilder(
        future: httpService.getPosts(),
        builder: (BuildContext context, AsyncSnapshot<List<Post>> snapshot) {
          if (snapshot.hasData) {
            List<Post> posts = snapshot.data;
            return ListView(
              children: posts
                  .map(
                    (Post post) => ListTile(
                      title: Text(post.title),
                      subtitle: Text("${post.userId}"),
                      onTap: () => Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => PostDetail(
                            post: post,
                          ),
                        ),
                      ),
                    ),
                  )
                  .toList(),
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

FOLLOW UP ...

Here's the result of that first fix.

import 'package:appvervemenu/post_model.dart';
import 'package:flutter/material.dart';

class CustomAppBar extends PreferredSize {

  final Widget child;
  final double height;

  CustomAppBar({@required this.child, this.height = kToolbarHeight});

  @override
  Size get preferredSize => Size.fromHeight(height);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: preferredSize.height,
      color: Colors.red,
      alignment: Alignment.center,
      child: child,
    );
  }
}

class PostDetail extends StatelessWidget {
  final Post post;

  PostDetail({@required this.post});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // appBar: AppBar(
          // title: Text(post.title),
          // title: Text("${post.userId}"),
        // ),
        appBar: CustomAppBar(
          height: 200,
          child: Column(
            
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Name'),
              Text('Street'),
              Text('City Sate Zip'),
              Text('Phone'),
              Text('Hours'),
              Text('\n\nLOGO\n${post.userId}'),
            ],
          ),
    ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Column(
              children: <Widget>[
                Card(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      ListTile(
                        title: Text(post.title),
                        // subtitle: Text(post.title),
                      ),
                      ListTile(
                        title: Text("Featuring"),
                        subtitle: Text(post.body),
                      ),
                      ListTile(
                        // title: Text("ID"),
                        subtitle: Text("${post.id}"),
                      ),
                      // ListTile(
                        // title: Text("User ID"),
                        // subtitle: Text("${post.userId}"),
                      // ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ));
  }
}

Solution 1

Screenshot:

---

Use preferredSize property:

Scaffold(
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(120),
    child: Container(
      color: Colors.orange,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('One'),
          Text('Two'),
          Text('Three'),
          Text('Four'),
        ],
      ),
    ),
  ),
)

Solution 2

For custom appbar,

const _appBarCategoryHeight = 170.0;

var appBar = AppBar(
      brightness: Brightness.light,
      elevation: 0.0,
      titleSpacing: 0.0,
      bottom: PreferredSize(
        preferredSize: Size(
          MediaQuery.of(context).size.width,
          _appBarCategoryHeight,
        ),
        child: Container(
          child: Column(
            children: [
              ListTile(
                title: Text("One"),
              ),
              ListTile(
                title: Text("Two"),
              ),
              ListTile(
                title: Text("Three"),
              ),
            ],
          ),
        ),
      ),
    );

Solution 3

Now you can get the height of your appBar using its preferred size:

double height = appBar.preferredSize.height;

You can use this height to reduce the screen height.

final double height = MediaQuery.of(context).size.height;

AppBar has a fixed height of 56. You should create your own appbar implementing PreferredSizeWidget

class TestAppBar extends StatelessWidget implements PreferredSizeWidget {
 @override
 Widget build(BuildContext context) {
    return AppBar(
      title: Text('TEST'),
      centerTitle: true,
    );
  }

 @override
 Size get preferredSize => Size.fromHeight(34);
}