How to set minimum height of SliverAppBar within NestedScrollView in Flutter - user-interface

Question

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

Answer 1

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

Answer 2

Simply use collapsedHeight and specify your minimum height.
SliverAppBar(
// Display a placeholder widget to visualize the shrinking size.
flexibleSpace: Placeholder(),
expandedHeight: 300,
collapsedHeight: 60,
);

Answer 3

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.

Answer 4

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

Answer 5

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