The flutter slivereappbar is fully parsed. All the effects you want are here!

Reprint please state the source ！！！

First, let's take a brief look at some of the renderings ：

This article may be a little more , But it's all very simple , It tastes better with the effect picture ~

<br>

What is? SliverAppBar

SliverAppBar  Be similar to Android Medium

CollapsingToolbarLayout

, You can easily expand the page header 、 The effect of merging . And AppBar Most of the attributes coincide , amount to AppBar The enhanced .

<br>

Start with the most basic effects , Step by step to achieve the full effect .

<br>

Common properties

 const SliverAppBar({
 Key key,
 this.leading,// The icon or text on the left , Mostly return arrows
 this.automaticallyImplyLeading = true,// No, leading by true When , Default return arrow , No, leading And for false, Is displayed title
 this.title,// title
 this.actions,// Operation to the right of the title
 this.flexibleSpace,// It can be understood as SliverAppBar Background content area
 this.bottom,//SliverAppBar Bottom area of
 this.elevation,// shadow
 this.forceElevated = false,// Show shadows
 this.backgroundColor,// The background color
 this.brightness,// Status bar theme , Default Brightness.dark, Optional parameters light
 this.iconTheme,//SliverAppBar Icon theme
 this.actionsIconTheme,//action Icon theme
 this.textTheme,// Text theme
 this.primary = true,// Whether to display below the status bar ,false Will occupy the height of the status bar
 this.centerTitle,// Is the title centered
 this.titleSpacing = NavigationToolbar.kMiddleSpacing,// Title horizontal spacing
 this.expandedHeight,// Merge height , The default is the height of the status bar plus AppBar Height
 this.floating = false,// Whether it is suspended during sliding
 this.pinned = false,// Whether the title block is fixed
 this.snap = false,// coordination floating Use
 })


<br>

The basic effect

 return Scaffold(
 body: new CustomScrollView(
 slivers: <Widget>[
 new SliverAppBar(
 title: Text(&quot; title &quot;),
 expandedHeight: 230.0,
 floating: false,
 pinned: true,
 snap: false,
 ),
 new SliverFixedExtentList(
 itemExtent: 50.0,
 delegate: new SliverChildBuilderDelegate(
 (context, index) => new ListTile(
 title: new Text(&quot;Item $index&quot;),
 ),
 childCount: 30,
 ),
 ),
 ],
 ),
 );


This is the most basic effect , But it is not simple , Let's start the step-by-step transformation .

<br>

add to leading

 leading: new IconButton(
 icon: Icon(Icons.arrow_back),
 onPressed: () {},
 ),


<br>

add to actions

 actions: <Widget>[
 new IconButton(
 icon: Icon(Icons.add),
 onPressed: () {
 print(&quot; add to &quot;);
 },
 ),
 new IconButton(
 icon: Icon(Icons.more_horiz),
 onPressed: () {
 print(&quot; more &quot;);
 },
 ),
 ],


<br>

Slide title up effect

Get rid of title, add to flexibleSpace

 flexibleSpace: new FlexibleSpaceBar(
 title: new Text(" Title "),
 centerTitle: true,
 collapseMode: CollapseMode.pin,
 ),


<br>

Background picture immersive

Create a new project in the root directory images Folder , Store image , Just choose any one . To load local pictures , Still need to be in

pubspec.yaml

  Configure it in the file

 assets:
 - images/a.jpg


modify flexibleSpace

 flexibleSpace: new FlexibleSpaceBar(
 background: Image.asset("images/a.jpg", fit: BoxFit.fill),
 ),


<br>

Demonstration of various sliding effects

• floating: false, pinned: true, snap: false:
  

• floating: true, pinned: true, snap: true:
  

• floating: false, pinned: false, snap: false:
  

• floating: true, pinned: false, snap: false:
  

summary ： Observe carefully , The difference is that ：

• Whether the title bar slides with it

• When sliding up ,SliverAppBar Whether to directly slide up or merge first and then slide up .

• When you pull it down ,SliverAppBar Whether to pull it down directly or pull it down first and then unfold it .

<br>

add to TabBar

stay SliverAppBar Of bottom Attribute TabBar, Directly transform the examples in the source code

var _tabs = <String>[];
 _tabs = <String>[
 &quot;Tab 1&quot;,
 &quot;Tab 2&quot;,
 &quot;Tab 3&quot;,
 ];

 ///  Add TabBar
 DefaultTabController(
 length: _tabs.length, // This is the number of tabs.
 child: NestedScrollView(
 headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
 // These are the slivers that show up in the &quot;outer&quot; scroll view.
 return <Widget>[
 SliverOverlapAbsorber(
 handle:
 NestedScrollView.sliverOverlapAbsorberHandleFor(context),
 child: SliverAppBar(
 leading: new IconButton(
 icon: Icon(Icons.arrow_back),
 onPressed: () {},
 ),
 title: const Text(' title '),
 centerTitle: false,
 pinned: true,
 floating: false,
 snap: false,
 primary: true,
 expandedHeight: 230.0,

 elevation: 10,
 // Show shadows , Direct value innerBoxIsScrolled, Expand not to show shadows , After merging, it will display
 forceElevated: innerBoxIsScrolled,

 actions: <Widget>[
 new IconButton(
 icon: Icon(Icons.more_horiz),
 onPressed: () {
 print(&quot; more &quot;);
 },
 ),
 ],

 flexibleSpace: new FlexibleSpaceBar(
 background: Image.asset(&quot;images/a.jpg&quot;, fit: BoxFit.fill),
 ),

 bottom: TabBar(
 tabs: _tabs.map((String name) => Tab(text: name)).toList(),
 ),
 ),
 ),
 ];
 },
 body: TabBarView(
 // These are the contents of the tab views, below the tabs.
 children: _tabs.map((String name) {
 //SafeArea  One suitable for liuhaiping widget
 return SafeArea(
 top: false,
 bottom: false,
 child: Builder(
 builder: (BuildContext context) {
 return CustomScrollView(
 key: PageStorageKey<String>(name),
 slivers: <Widget>[
 SliverOverlapInjector(
 handle:
 NestedScrollView.sliverOverlapAbsorberHandleFor(
 context),
 ),
 SliverPadding(
 padding: const EdgeInsets.all(10.0),
 sliver: SliverFixedExtentList(
 itemExtent: 50.0, //item Height or width , Depending on the sliding direction
 delegate: SliverChildBuilderDelegate(
 (BuildContext context, int index) {
 return ListTile(
 title: Text('Item $index'),
 );
 },
 childCount: 30,
 ),
 ),
 ),
 ],
 );
 },
 ),
 );
 }).toList(),
 ),
 ),
 ),


About TabBar You can see this ：https://blog.csdn.net/yechaoa/article/details/90482127

<br>

ok, The above effects basically meet the daily development needs , You can also change the attribute to test the effect .

<br>

demo github : https://github.com/yechaoa/flutter_sliverappbar

<br>