Use this package if you need more customization on your web scroll displays.

See the install instructions.

Quick reference

Since customization requires a lot of properties, here is a quick cheatsheet:

PropertyWhat does it do
landingTakes the 5% of the screen height(Customizable), collasp when scrolled vertically.
bodyThe body of the main content.
landingHeightThe height of the landing to stickyAppbar point.
sideNavSide widget(optional).
stickyAppBarImmediate below landing,(Customizable) stick to top when landing collasp .
stickyHeightstickyAppBar, stickyAppBar height.(stickyHeight must not be greater than height of landingHeight)

We are on YouTube!

You can see a video tutorial here. 1.Awesome Flutter Tutorials tutorial by Flutter Developer's Core

To use this package :

      sdk: flutter

Getting Started

The examples below were updated for version 0.0.1. Changes might have been made. See the changelog.


sticky_web_scroll Animated

A basic Sticky-Web-Scroll

class HomePage extends StatelessWidget {
  const HomePage({
    Key key,
  }) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(
      body: StickyWebScroll(
        landingHeight: 400,
        stickyHeight: 80,
        landing: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage(
                fit: BoxFit.cover),
        stickyAppBar: Container(
          width: MediaQuery.of(context).size.width,
          child: Center(
            child: Text('Stick Web Scroll - by Flutter Devs Core',
                style: Theme.of(context).textTheme.headline4),
        body: SingleChildScrollView(
          physics: NeverScrollableScrollPhysics(),
          child: Container(
            color: Colors.white,
            width: MediaQuery.of(context).size.width,
            child: Column(
              children: List.generate(
                (index) => Container(
                  height: 500,
                  width: 500,
                  color: Colors