'Set minimum height for SliverAppBar in Flutter?

How can I decrease the height of SliverAppBar in Flutter? For example, I want to set the height for SliverAppBar equal to 40. This height is less than the default height of SliverAppBar.

This is the code:

SliverAppBar(
  brightness: Brightness.light,
  titleSpacing: 0,
  backgroundColor: Colors.white,
  automaticallyImplyLeading: false,
  pinned: true,
  actions: <Widget>[
    Container()
  ],
  expandedHeight: 40,
  stretch: true,
  title: Container(
    height: 40,
    width: double.infinity,
    color: Colors.red,
  ),
),
flutterflutter-layoutjavamemoryitextout-of-memoryheap-memory


Solution 1:[1]

You set expandedHeight to 40. And you wrote that 40 "is less than the default height of SliverAppBar". So you need to change this value to for example 100:

SliverAppBar(
  brightness: Brightness.light,
  titleSpacing: 0,
  backgroundColor: Colors.white,
  automaticallyImplyLeading: false,
  pinned: true,
  actions: <Widget>[
    Container()
  ],
  expandedHeight: 100,
  stretch: true,
  title: Container(
    height: 40,
    width: double.infinity,
    color: Colors.red,
  ),
),

Is that, what did you mean?

In documentation, there is a sample with FlexibleSpaceBar. Maybe this will be a better approach for you:

SliverAppBar(
            pinned: true,
            expandedHeight: 100.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Container(
                height: 40,
                width: double.infinity,
                color: Colors.red,
              ),
            ),
          ),

You can also use collapsedHeight method of SliverAppBar.

Solution 2:[2]

You can set the toolBarHeight property of the AppBar.

As the documentation says:

Defines the height of the toolbar component of an AppBar.

Check: https://api.flutter.dev/flutter/material/SliverAppBar/toolbarHeight.html

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions