Reprint please declare source!!

First, take a brief look at some of the renderings:

This article may be a bit extensive, but it’s all very simple, and it tastes even better with renderings


What is a SliverAppBar

SliverAppBar is similar to Android in CollapsingToolbarLayout, which easily collapses and merges the page header. Overlapped with most of AppBar’s attributes, equivalent to an enhanced version of AppBar.

Start with the most basic effects and work your way to the full effect.

Commonly used attributes

Const SliverAppBar ({Key Key, enclosing leading, / / to the left of the icon or text, how to return arrow enclosing automaticallyImplyLeading = true, / / not leading to true, Default return arrow, no leading and false, Title this.title,// title this.actions,// this.flexibleSpace,// can be understood as the background content area of SliverAppBar This bottom, / / SliverAppBar area at the bottom of this. Elevation, / / shadow enclosing forceElevated = false, whether / / show the shadow enclosing backgroundColor, / / background color Brightness,// Is the default brightness. Dark, Optional parameters light enclosing iconTheme, / / SliverAppBar icon theme enclosing actionsIconTheme, / / the action icon theme enclosing textTheme, / / this text theme. Primary = CenterTitle: true,// If the name is displayed below the status bar,false will occupy the height of the status bar this.centerTitle,// if the title is centered show this.titleSpacing = NavigationToolbar kMiddleSpacing, / / title transverse spacing enclosing expandedHeight, / / the height of the merger, Snap = false,// if you stay pinned to the title bar, snap = false,// match the height of the status bar with the height of the AppBar})Copy the code


The basic effect

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

This is the most basic effect, but it is not simple, let’s start the transformation step by step.


Add a leading

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


Add the actions

Actions: <Widget>[new IconButton(icon: icon (icon.add), onPressed: () {print(" add ");},), new IconButton(icon: Icon (the Icons. More_horiz), onPressed: () {print (" more ");},,,Copy the code


Slide title up effect

Remove title and add flexibleSpace

FlexibleSpace: new FlexibleSpaceBar(title: new Text(" collapseMode "), centerTitle: true, collapseMode: collapsemode.pin,),Copy the code


Background image immersion

Create an “images” folder under the root of your project to store any images. To load the local image, you also need to configure it in the pubspec.yaml file

  assets:
    - images/a.jpg
Copy the code

Modify flexibleSpace

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


Various sliding effect demonstration

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

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

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

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

Conclusion: After careful observation, the differences mainly lie in:

  • Whether the title bar slides along
  • When you slide up, does the SliverAppBar slide up directly or merge and slide up again?
  • When pulled down, does the SliverAppBar pull down directly or first and then expand?


Add the TabBar

Add TabBar to the bottom property of the SliverAppBar to modify the example directly from the source code

var _tabs = <String>[];
    _tabs = <String>[
      "Tab 1",
      "Tab 2",
      "Tab 3",
    ];
Copy the code
// Add TabBar DefaultTabController(length: _tabs. Length, // This is the number of tabs. NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { // These are the slivers that show up in the "outer" 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, // Whether to display the shadow, directly value innerBoxIsScrolled, expand does not display the shadow, after the combination will display forceElevated: innerBoxIsScrolled, actions: <Widget>[new IconButton(icon: icon (icon.more_horiz), onPressed: () {print(" more ");},),], flexibleSpace: new FlexibleSpaceBar( background: Image.asset("images/a.jpg", 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) {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(), ), ), ),Copy the code

About the use of the TabBar can look at this article: blog.csdn.net/yechaoa/art…


Ok, the above effect basically meets the daily development needs, you can also change the effect of the property test.


The demo lot: github.com/yechaoa/flu…