Slide on the Flutter page,AppBar adsorption effect

First on the renderings!

Note: red block: overall background, each color is a piece of content, everyone in 'SliverToBoxAdapter' replaced with their own content.Copy the code

1. Use NestedScrollView to make the sliding effect. Use NestedScrollView to use the first layer of the body as follows:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return<Widget>[ SliverOverlapAbsorber( handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), child: _buildAppbarView(context, innerBoxIsScrolled), // attached AppBar)]; }, body: _buildBodyView(), // content area below AppBar),); }Copy the code

2. Then, implement AppBar with the following code:

/// AppBar
 Widget _buildAppbarView(context, bool innerBoxIsScrolled) {
    return SliverAppBar(
      pinned: true// Attach centerTitle:true, forceElevated: innerBoxIsScrolled, expandedHeight: 140, //"Here's the title."BackgroundColor: Colors. OrangeAccent, leading: FlexibleSpace: FlexibleSpaceBar(// flexibleSpace: FlexibleSpaceBar() Height: 100, child: Container(height: 100, color: Colors.red.shade200, ), ), ), ); }Copy the code

3. Next, implement the body content area as follows:

Widget _buildBodyView() {
    return SafeArea(
      top: true,
      child: Container(
        margin: EdgeInsets.only(top: kToolbarHeight),
        color: Colors.red,
        child: CustomScrollView(
          slivers: <Widget>[
            SliverToBoxAdapter(
                child: Container(
              height: 150,
              color: Colors.blue.shade200,
              child: Center(child: Text('I am content') // child: _carousel(),)), SliverToBoxAdapter(child: _container (height: 50, color: Colors.green.shade200, child: Center(child: Text('I am content')
                  // child: _buildMessage(),
                  ),
            )),
            SliverToBoxAdapter(
                child: Container(
              height: 50,
              color: Colors.orange.shade200,
              child: Center(child: Text('I am content')
                  // child: _expandableWrap(),
                  ),
            )),
            SliverToBoxAdapter(
                child: Container(
              height: 150,
              color: Colors.pink.shade200,
              child: Center(child: Text('I am content')
                  // child: _buildVideoAndBookEntry(),
                  ),
            )),
            SliverToBoxAdapter(
                child: Container(
              height: 150,
              color: Colors.pink.shade200,
              child: Center(child: Text('I am content')
                  // child: _buildTopicTalkTwo(),
                  ),
            )),
          ],
        ),
      ),
    );
  }
Copy the code

Another way to write it: There’s just one problem: it doesn’t slide to where you want when there’s not enough content on a screen, but it’s reasonable.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildScaffoldBody()
    );
  }
Widget _buildScaffoldBody() {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          expandedHeight: 120,
          pinned: true,
          title: Text(Environmental Enforcement Practices),
          flexibleSpace: FlexibleSpaceBar(
            collapseMode: CollapseMode.parallax,
            background: Stack(
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage(
                              'lib/asset/images/home_share_gift_bg.png'),
                          fit: BoxFit.cover)),
                  child: SafeArea(
                    top: true,
                    child: Column(
                      children: <Widget>[
                        Container(
                            height: 50,
                            child: Text(' ',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 20))),
                        SearchInputWidget(
                          hasRightIcon: true,
                          text: Complete Set of Environmental Regulations,
                          bgc: Colors.transparent,
                          icon1: Icons.bookmark,
                          icon2: Icons.add,
                          onTap: () => Navigator.pushNamed(context, '/search'),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
          // title: ,
        ),
        SliverToBoxAdapter(
          child: Column(
            children: <Widget>[
              _carousel(),
              _buildMessage(),
              _expandableWrap(),
              _buildVideoAndBookEntry(),
              _buildTopicTalkTwo(),
            ],
          ),
        )
      ],
    );
  }
Copy the code

Only for their own ideas, if the students have a better way, welcome to disturb the message below ~