CODEWITHSUNDEEP
user-interfacedartflutter
Dominik Roszkowski
Dominik Roszkowski

Reputation: 2563

How to set minimum height of SliverAppBar within NestedScrollView in Flutter

I'd like to use SliverAppBar within NestedScrollView in an ordinary Scaffold app. I also would like to have some minimum height of the app bar when user scrolls down.

I can't figure out how to use either PreferredSize widget nor any other solution found online e.g. this.

Here is my current simplified solution:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue, fontFamily: 'Oswald'),
      home: SliverHome(),
    );
  }
}

class SliverHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: testHome(),
    );
  }

  Widget testHome() {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar( // this is where I would like to set some minimum constraint
              expandedHeight: 300,
              floating: false,
              pinned: true,
              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)),
              ),
            )
          ];
        },
        body: Container(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => {},
        tooltip: '+',
        child: Icon(Icons.accessibility_new),
      ),
    );
  }
}

I'd like to stop shrinking of the app bar somewhere near 60 dp

screenshot

Upvotes: 11

Views: 37133

Answers (5)

Sri Ram
Sri Ram

Reputation: 41

I know im late to this thread but to set height of the SliverAppBar, Implement Toolbarheight and you will able to change it.

SLiverAppbar( toolbarHeight: WhateverHeightYouWant, )

Upvotes: 3

Alexandru Mariuti
Alexandru Mariuti

Reputation: 189

Simply use collapsedHeight and specify your minimum height.

 SliverAppBar(
  // Display a placeholder widget to visualize the shrinking size.
  flexibleSpace: Placeholder(),
  expandedHeight: 300,
  collapsedHeight: 60,
);

Upvotes: 10

abhay
abhay

Reputation: 61

I don't know since exactly when, but as of now, you can also use the collapsedHeight property, documented as below:

https://api.flutter.dev/flutter/material/SliverAppBar/collapsedHeight.html

Currently I am on flutter 1.20.1 and I have this property available.

Upvotes: 6

Mir Mahfuz
Mir Mahfuz

Reputation: 733

Your code also works fine after decreasing the size from container .

 SliverAppBar( // this is where I would like to set some minimum constraint
          expandedHeight: 300,
          floating: false,
          pinned: true,
          flexibleSpace: Container(
            padding: EdgeInsets.all(10),
            height: 340,
            width: double.infinity,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  height: 10,  //decreas the size
                ),
                Container(
                  height: 10, //decrease the size
                ),
                Expanded(child: Container()),
                Text('TEST'),
              ],
            ),
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: NetworkImage('https://picsum.photos/400/400'),
                    fit: BoxFit.cover)),
          ),
        )

Upvotes: 2

anmol.majhail
anmol.majhail

Reputation: 51316

This is Actually an requested Feature - https://github.com/flutter/flutter/issues/21298

A work Around is to use Bottom

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)),
              ),
            )

Upvotes: 20

Related Questions