Question 276282 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to override the minimum height in SliverAppBar

I am having a problem where I can’t decrease the SliverAppBar as I need. I found out that it has some kind of minHeight constraint that has to deal with some animation and layout stuff. I have a TextButton.icon and some Text in it which don’t take up much space. I need the behavior of the SliverAppBar of floating. Is there a way to decrease the height freely without any constraints?

Tags:

2

Answers


  1. 0

    You can use SliverToBoxAdapter and then use a Sizedbox or for more flexibility you can use SliverPersistentHeader.

    class MySliverAppBarDelegant extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container();
  }

  @override
  double get maxExtent => 40; //use same for fixed height
  @override
  double get minExtent => 30;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
      false;
}

    And use like

    SliverPersistentHeader(
  delegate: MySliverAppBarDelegant(),
  pinned: true,
)
    Login or Signup to reply.
  2. 0

    You can set set custom SliverAppBar height and expanded app bar height by using this approach simply and can use your expanded area .
    Here is sample code

    SliverAppBar(
              // this is where I would like to set some minimum constraint
              expandedHeight: 300,
              floating: false,
              pinned: true,
              bottom: PreferredSize(                       // Add this code
                preferredSize: Size.fromHeight(60.0),      // Add this code
                child: Text(''),                           // Add this code
              ),                                           // Add this code
              flexibleSpace: Container(
                padding: EdgeInsets.all(10),
                height: 340,
                width: double.infinity,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      height: 40,
                    ),
                    Container(
                      height: 60,
                    ),
                    Expanded(child: Container()),
                    Text('TEST'),
                  ],
                ),
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage('https://picsum.photos/400/400'),
                        fit: BoxFit.cover)),
              ),
            )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search