Flutter : move a fixed element on the top when scrolling down

Question

I wonder if it's possible in Flutter to move a fixed element higher on the top when the user scroll down the page (in other words, to move it vertically upward once the vertical scroll has reached the target position).

Here is an example in js (see "Summary 1" box on the right) :

http://bigspotteddog.github.io/ScrollToFixed/

Example with a printscreen :

Any idea?

sure, CustomScrollView => SliverPersistentHeader and SliverList — diegoveloper, Mar 25 '19 at 21:12
https://medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe — Doc, Mar 25 '19 at 21:21
but in your example the appBar is expanded, in my case i would like to show the "header" above the fixed element, and to move then the fixed element, any idea? — Julien, Mar 25 '19 at 21:35
if anyone come across this thread before reaching [this](https://stackoverflow.com/questions/48606995/flutter-implement-sticky-headers-and-the-snap-to-item-effect) thread, you now know where to check — RaZzLe, May 10 '20 at 16:14

score 0 · Answer 1 · answered Dec 14 '21 at 15:12

This should be achievable using the sticky_headers plugin.

Lets you place headers on scrollable content that will stick to the top of the container whilst the content is scrolled.

Here is a simple example on how you can implement this plugin:

import 'package:flutter/material.dart';
import 'package:sticky_headers/sticky_headers.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blueGrey[900],
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          return StickyHeader(
            header: Container(
              height: 50.0,
              color: Colors.blue,
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              alignment: Alignment.centerLeft,
              child: Text(
                'Header #$index',
                style: const TextStyle(color: Colors.white),
              ),
            ),
            content: Column(
              children: List<int>.generate(5, (index) => index)
                  .map((item) => Container(
                        height: 50,
                        color: Colors.grey[(item + 1) * 100],
                      ))
                  .toList(),
            ),
          );
        },
      ),
    );
  }
}

Flutter : move a fixed element on the top when scrolling down

1 Answers1