The Flutter Slider family of CustomScrollView and SliverAppBar components

• CustomScrollView()
• SliverAppBar()

There is no best, only better. That moment, you finally found that the people who had loved, as early as the day of farewell, has disappeared in this world. In the heart of love and thoughts, just belong to their own once had a memorial. I think, some things can be forgotten, some things can be remembered, some things can be most willing to, some things have been powerless. I love you, this is my disaster.

Effect of the day:

Rendering (1.1):

CustomScrollView()

Bold is mandatory (listing only common attributes)

Here’s a look at the physics effects:

BouncingScrollPhysics()	NeverScrollableScrollPhysics()	ClampingScrollPhysics()
It bounces back to the bottom	The slide is prohibited	Package contents do not bounce back (default)
Rendering (1.2):	Rendering (1.3):	Rendering (1.4):

CustomScrollView()

CustomScrollView(
	// Slide type
	// BouncingScrollPhysics() BouncingScrollPhysics(
	// ClampingScrollPhysics() Package content does not bounce back
	/ / NeverScrollableScrollPhysics slide () is prohibited
        physics: BouncingScrollPhysics(),
        //true slides the AppBar backwards
        shrinkWrap: false.// True can try to scroll when there are not enough entries. False cannot scroll
        primary: true.// Cache entries
        cacheExtent: 0.// Scroll direction
        scrollDirection: Axis.vertical,
        slivers: <Widget>[
      	  ///AppBar
          initSliverAppBar(),
          
          ///SliverFixedExtentList is covered in the next chapter
          initSliverFixedExtentList(),
          
          ///SliverList is introduced in the next section
          initSliverList(),
          
          ///SliverGrid is introduced in the next chapter
          initSliverGrid(),
        ],
      ),
Copy the code

Note:

• You cannot use the ListView or GridView directly in the CustomScrollView because the CustomScrollView itself is a slideable component and the ListView or GridView is a slideable component.

Here the code is relatively simple, directly look at the effect of the image:

Rendering (1.5):

If you don’t understand these parameters, please leave a comment in the comments section

SliverAppBar()

(Listing only common attributes)

SliverAppBar parameters	instructions	type
title	Widget	The title
expandedHeight	double	AppBar sliding height
leading	Widet	On the left side of the button
floating	bool	Whether the appBar is displayed when slidingsnap = trueThis parameter must be true!!
pinned	bool	AppBar is fixed
snap	bool	AppBar slides with your finger and floating must be true to be used
flexibleSpace	FlexibleSpaceBar	The slide background
backgroundColor	color	The background color
brightness	Brightness	Thumbnail Color: Brightness. Light Gray. Dark White (default)
primary	bool	AppBar is under the status bar
centerTitle	bool	Whether the title is centered
actions	List	On the right side of the Widget

SliverAppBar () code:

 Widget initSliverAppBar(a) {
    return  SliverAppBar(
      title: Text(
        "flutter",
        style: TextStyle(color: Colors.black),
      ),
      // Left button
      leading: CloseButton(),
      // Slide height
      expandedHeight: 230.0.// This parameter must be true when snap = true!!
      floating: true./ / AppBar fixed
      pinned: true.//AppBar slides with your finger and floating must be true to be used
      snap: true.// Slide the background
      flexibleSpace: new FlexibleSpaceBar(
        background: Image.asset(
          "assets/images/flutter.jpg",
          fit: BoxFit.fill,
        ),
        title: new Text(
          "android",
          style: TextStyle(color: Colors.black),
        ),
        // The title is centered
        centerTitle: true.// CollapseMode. Parallax,
        // CollapseMode.none,
        collapseMode: CollapseMode.pin,
      ),

      // Background color
      backgroundColor: Colors.blue,

      // The status bar theme is displayed. Light Grey. Dark White (default)
      brightness: Brightness.dark,

      // Whether AppBar is under the status bar
      primary: true.// Title is centered
      centerTitle: false.// bottom: PreferredSizeWidget(),
      // Right Widget operation
      actions: initAppBarRightIcon(),
    );
  }
Copy the code

Sliding background parameters:

FlexibleSpaceBar parameters	type	instructions
background	Widget	Background the Widget
title	Widget	The title Widget
centerTitle	bool	Whether the title is centered
collapseMode	CollapseMode	CollapseMode. Parallax, CollapseMode. None, collapsemode. pin
titlePadding	EdgeInsetsGeometry	Inside title margins

CollapseMode example:

CollapseMode.parallax	CollapseMode.none	CollapseMode.pin
The background widget will scroll parallax	No folding effect	The background widgets are fixed in place until the minimum range is reached
Rendering (1.5):	Rendering (1.6):	Rendering (1.7):

Floating,pinned and SNAP parameter examples:

floating: true pinned: true snap: true	floating: true pinned: false snap: true
The AppBar pops up whenever there is a downward gesture	AppBar scrolls out its original position

SliverAppBar final effect:

Rendering (1.8) :

\

Complete the project

The complete code

What do you like?

The Flutter Slider,CupertinoSlider Slider

The SliverList(),SliverFixedExtentList(),SliverGrid() components of Flutter

SliverPersistentHeader() and SliverToBoxAdapter() components of the Flutter family

The actual combat of the Flutter Sliver family ④ \

Original is not easy, your thumbs up is the biggest support for me, thumbs up to support it ~