Flutter: How to set the height of a SliverAppBar?

Question

I am trying to use SliverAppBar. The layout was fine on the phone devices. However, when I use the iPad to test the layout, it seems that the height of the AppBar does not change, and it could not show the title text properly .

When I collasped the AppBar:

I tried too add the bottom attribute to the SliverAppBar, but it doesn't works too.

bottom: PreferredSize(                       
   preferredSize: Size.fromHeight(60.0),      
   child: Text(''),                           
),  

and the result looks like this:

the title text is still restricted with an invisible height.

my code:

new SliverAppBar(
        expandedHeight: Adapt.px(220.0),
        floating: false,
        elevation: 0.0,
        pinned: true,
        primary: true,
        centerTitle: true,
        title: Text("TITLE",
            style: TextStyle(
                color: Colors.white,
                fontSize: Adapt.px(45.0),
                fontFamily: "pinfon",
                fontWeight: FontWeight.w900,
                letterSpacing: 1.0)),
        backgroundColor: Colors.black45,
        brightness: Brightness.dark,
        bottom: PreferredSize(                       
            preferredSize: Size.fromHeight(60.0),      
            child: Text(''),                           
          ), 
        flexibleSpace: new FlexibleSpaceBar(
          background: Opacity(
            opacity: 0.5,
            child: new Stack(
              fit: StackFit.expand,
              children: <Widget>[
                new Image.asset(
                    "assets/images/back.jpg",
                    fit: BoxFit.fitWidth,
                  ),
              ],
            ),
          ),
        ),
      ),

Answer 1

I have tested the sample code you have provided and it seems that the layout is working fine when with an iPad Air - 4th generation - 14.0 emulator.

Though, I'm not able to see your complete code. I've just reused the minimal code you have provided and created a complete example to be able to see the output.

Here is my sample code:

import 'package:flutter/material.dart';

void main() => runApp(SilverAppBarExample());

class SilverAppBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            new SliverAppBar(
              expandedHeight: 220.0,
              floating: false,
              elevation: 0.0,
              pinned: true,
              primary: true,
              centerTitle: true,
              title: Text("TITLE",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 45.0,
                      fontFamily: "pinfon",
                      fontWeight: FontWeight.w900,
                      letterSpacing: 1.0)),
              backgroundColor: Colors.black45,
              brightness: Brightness.dark,
              bottom: PreferredSize(
                preferredSize: Size.fromHeight(60.0),
                child: Text(''),
              ),
              flexibleSpace: new FlexibleSpaceBar(
                background: Opacity(
                  opacity: 0.5,
                  child: new Stack(
                    fit: StackFit.expand,
                    children: <Widget>[
                      new Image.asset(
                        "assets/background.jpg",
                        fit: BoxFit.fitWidth,
                      ),
                    ],
                  ),
                ),
              ),
            ),
            new SliverList(
                delegate: new SliverChildListDelegate(_buildList(50))),
          ],
        ),
      ),
    );
  }

  List _buildList(int count) {
    List<Widget> listItems = List();

    for (int i = 0; i < count; i++) {
      listItems.add(new Padding(
          padding: new EdgeInsets.all(20.0),
          child: new Text('Item ${i.toString()}',
              style: new TextStyle(fontSize: 25.0))));
    }

    return listItems;
  }
}

Output using iPad Air - 4th generation - 14.0 emulator

Expanded:

Shrinked:

It seems that the SliverAppBar is working fine.

I've also tested it in an iPhone emulator for verification.

iPhone SE - 2nd generation - 14.0

Expanded:

Shrinked:

Here is a live output:

Maybe if you could provide the whole code you've created we will be able to check it on our end.