Flutter Question posted in
The official Flutter documentation can be found here.

Flutter custom scroll and pinned effect

I would like to create a scrolling effect similar to what is shown below. The image should scroll behind the app bar, and the app bar should change its color from transparent to a solid color as scrolling occurs, eventually becoming pinned.

Additionally, the horizontal list below should also become pinned.

Image scroll behind appbar – 1

Image scroll behind appbar – 2 and pinned.

Pinned horizontal list pinned- 2

I tried using CustomScrollView with SliverAppBar, but I couldn’t achieve the exact scrolling effect I wanted.

Tags:

2

Answers


  1. 0

    You can add a listener to the scrollController, and add it to the

      @override
  void initState() {
    super.initState();
    showYourAppBarBarDetailsAndPinned = false;
    scrollController.addListener(() {
      checkScrollPosition();
    });
 
  }


 checkScrollPosition() {
    double checkingHeight = (MediaQuery.of(context).size.height / 100) * 10;
    if (scrollController.offset >= checkingHeight) {
      setState(() {
          showYourAppBarBarDetailsAndPinned = true;
      });
    } else {
      setState(() {
         showYourAppBarBarDetailsAndPinned = false;
      });
    }
  }
    Login or Signup to reply.
  2. 0

    try to implement using Nested Scroll View.

    import 'package:flutter/material.dart';

class AppScrollingPage extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 300.0,
              flexibleSpace: FlexibleSpaceBar(
                background: Image.network(
                  /// Change with your image
                  'https://www.firstbenefits.org/wp-content/uploads/2017/10/placeholder.png',
                  fit: BoxFit.cover,
                ),
              ),
              pinned: true,
              floating: false,
              backgroundColor: 
                  /// Change the color according to your preference
                  innerBoxIsScrolled ? Colors.red : Colors.transparent,
              bottom: PreferredSize(
                preferredSize: Size.fromHeight(50.0),
                child: Container(
                  color: Colors.white,
                  child: HorizontalList(),
                ),
              ),
            ),
          ];
        },
        body: Container(
          color: Colors.grey[200],
          child: ListView.builder(
            itemCount: 30,
            itemBuilder: (context, index) {
              return ListTile(
                /// Dummy data
                title: Text("Item $index"),
                subtitle: Text("Description for item $index"),
              );
            },
          ),
        ),
      ),
    );
  }
}

class HorizontalList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 100.0,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 10,
        itemBuilder: (context, index) {
          return Container(
            width: 100.0,
            /// Dummy data with colors and index
            color: Colors.blue[(index + 1) * 100],
            child: Center(child: Text("Item $index")),
          );
        },
      ),
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      home: AppScrollingPage(),
    ),
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search