How follow user scroll motion in flutter?

Question

I can't find solution how can I follow scroll user motion.I tried use slivers but don't helped.

When the user is at the top of the list and scrolls down, shows the search bar (show will follow the scroll motion, in the initial state, the search bar is not visible), when scrolling up, the search bar will not be visible.I want to make scroll animation like ios settings.

Answer 1

This is my demo, add a listener to ScrollController then you can make the TextField visible or invisible.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  bool _scrollToEnd = false;
  final _controller = ScrollController();

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      if (_controller.position.atEdge) {
        setState(() {
          _scrollToEnd = _controller.position.pixels != 0;
        });
      } else {
        if (_scrollToEnd) {
          setState(() {
            _scrollToEnd = false;
          });
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            Visibility(
              visible: _scrollToEnd,
              child: TextField()
            ),
            ListView.builder(
              controller: _controller,
              itemBuilder: (context, index) {
                return Container(
                  width: double.infinity,
                  height: 30,
                  alignment: Alignment.center,
                  child: Text(index.toString(), style: TextStyle(fontSize: 20),),
                );
              },
              itemCount: 30,
            )
          ],
        ),
      ),
    );
  }
}