customizable_space_bar

Description:

customizable space bar

customizable_space_bar #


AppBar which changes the content with scrolling rate. Enables to implement "Large Title"

Usage #
This package is expected to be used with flexibleSpace: in SliverAppBar, which means you also need to use CustomScrollView.
CustomScrollView(
slivers: [
SliverAppBar(
pinned: true,
leading: IconButton(icon: Icon(Icons.arrow_back_ios_sharp)),
backgroundColor: Theme.of(context).scaffoldBackgroundColor,

/// This is the part you use this package
flexibleSpace: CustomizableSpaceBar(
builder: (context, scrollingRate) {
/// Example content
return Padding(
padding: EdgeInsets.only(
bottom: 13, left: 12 + 40 * scrollingRate),
child: Align(
alignment: Alignment.bottomLeft,
child: Text(
"Hello World.",
style: TextStyle(
fontSize: 42 - 18 * scrollingRate,
fontWeight: FontWeight.bold),
),
),
);
},
),
/// End of the part

expandedHeight: 150,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return ListTile(
title: Text("LIST ITEM"),
);
},
),
)
],
),

copied to clipboard
You can control the layout in the AppBar with scrollingRate.
When the shape is fully expanded, scrollingRate is 0.0. When the shape is collapsed to AppBar, it reaches to the limit 1.0.

If you have any requests or questions, please feel free to ask on github.