SekibOmazic/animate_on_scroll.dart Secret

## animate_on_scroll.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scroll Detection',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Scrolling Detection'),
        ),
        body: Body(),
      ),
    );
  }
}

class Body extends StatefulWidget {
  @override
  createState() => _BodyState();
}

class _BodyState extends State<Body> with TickerProviderStateMixin {
  AnimationController _controller;

  String scrollingMessage = 'I am a scroll detector';
  double tileHeight = 150.0;
  double direction = 1.0; // -1 = forward, 1 = reverse

  bool _scrollingStarted(ScrollStartNotification scrollStart) {
    //setState(() {
    //  scrollingMessage = scrollStart.metrics.axisDirection.toString();
    //});
    return true;
  }

  bool _scrollingEnded() {
    setState(() {
      scrollingMessage = 'Snore ...';
    });
    return false;
  }

  bool _userScrolling(UserScrollNotification userScrollNotification) {
    print('UserScrollNotification ${userScrollNotification.direction}');
    setState(() {
      scrollingMessage = userScrollNotification.direction.toString();
      if (userScrollNotification.direction.toString() ==
          'ScrollDirection.reverse') {
        direction = 1.0;
        print('start scrolling up from ${direction*tileHeight} to 0');
        _controller.forward();
      }
      if (userScrollNotification.direction.toString() ==
          'ScrollDirection.forward') {
        direction = -1.0;
        print('start scrolling down from ${direction*tileHeight} to 0');
        _controller.forward();
      }
    });
    return false;
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
        vsync: this, duration: Duration(milliseconds: 1000));
  }

  @override
  Widget build(BuildContext context) {
    // _controller.forward();

    return Column(children: [
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(scrollingMessage),
      ),
      NotificationListener<ScrollStartNotification>(
        onNotification: (ScrollStartNotification scrollStart) =>
            _scrollingStarted(scrollStart),
        child: NotificationListener<UserScrollNotification>(
          onNotification: (UserScrollNotification userScrollNotification) =>
              _userScrolling(userScrollNotification),
          child: NotificationListener<ScrollEndNotification>(
            onNotification: (_) => _scrollingEnded(),
            child: Expanded(
              child: AnimatedBuilder(
                animation: _controller,
                builder: (BuildContext context, Widget child) {
                  return ListView.builder(
                    itemCount: 100,
                    itemBuilder: (BuildContext context, int index) {
                      Animation<double> _animation =
                          Tween(begin: direction, end: 0.0)
                              .animate(_controller);
                      return Transform(
                        transform: Matrix4.translationValues(
                          0.0,
                          _animation.value * tileHeight,
                          0.0,
                        ),
                        child: Container(
                          margin: EdgeInsets.only(top: 16.0),
                          height: tileHeight,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(16.0),
                              color: Colors.amberAccent[100]),
                          child: Center(child: Text('$index')),
                        ),
                      );
                    },
                  );
                },
              ),
            ),
          ),
        ),
      ),
    ]);
  }
}
	import 'package:flutter/material.dart';

	void main() => runApp(MyApp());

	class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Scroll Detection',
	home: Scaffold(
	appBar: AppBar(
	title: Text('Scrolling Detection'),
	),
	body: Body(),
	),
	);
	}
	}

	class Body extends StatefulWidget {
	@override
	createState() => _BodyState();
	}

	class _BodyState extends State<Body> with TickerProviderStateMixin {
	AnimationController _controller;

	String scrollingMessage = 'I am a scroll detector';
	double tileHeight = 150.0;
	double direction = 1.0; // -1 = forward, 1 = reverse

	bool _scrollingStarted(ScrollStartNotification scrollStart) {
	//setState(() {
	// scrollingMessage = scrollStart.metrics.axisDirection.toString();
	//});
	return true;
	}

	bool _scrollingEnded() {
	setState(() {
	scrollingMessage = 'Snore ...';
	});
	return false;
	}

	bool _userScrolling(UserScrollNotification userScrollNotification) {
	print('UserScrollNotification ${userScrollNotification.direction}');
	setState(() {
	scrollingMessage = userScrollNotification.direction.toString();
	if (userScrollNotification.direction.toString() ==
	'ScrollDirection.reverse') {
	direction = 1.0;
	print('start scrolling up from ${direction*tileHeight} to 0');
	_controller.forward();
	}
	if (userScrollNotification.direction.toString() ==
	'ScrollDirection.forward') {
	direction = -1.0;
	print('start scrolling down from ${direction*tileHeight} to 0');
	_controller.forward();
	}
	});
	return false;
	}

	@override
	void dispose() {
	_controller.dispose();
	super.dispose();
	}

	@override
	void initState() {
	super.initState();
	_controller = AnimationController(
	vsync: this, duration: Duration(milliseconds: 1000));
	}

	@override
	Widget build(BuildContext context) {
	// _controller.forward();

	return Column(children: [
	Padding(
	padding: const EdgeInsets.all(8.0),
	child: Text(scrollingMessage),
	),
	NotificationListener<ScrollStartNotification>(
	onNotification: (ScrollStartNotification scrollStart) =>
	_scrollingStarted(scrollStart),
	child: NotificationListener<UserScrollNotification>(
	onNotification: (UserScrollNotification userScrollNotification) =>
	_userScrolling(userScrollNotification),
	child: NotificationListener<ScrollEndNotification>(
	onNotification: (_) => _scrollingEnded(),
	child: Expanded(
	child: AnimatedBuilder(
	animation: _controller,
	builder: (BuildContext context, Widget child) {
	return ListView.builder(
	itemCount: 100,
	itemBuilder: (BuildContext context, int index) {
	Animation<double> _animation =
	Tween(begin: direction, end: 0.0)
	.animate(_controller);
	return Transform(
	transform: Matrix4.translationValues(
	0.0,
	_animation.value * tileHeight,
	0.0,
	),
	child: Container(
	margin: EdgeInsets.only(top: 16.0),
	height: tileHeight,
	decoration: BoxDecoration(
	borderRadius: BorderRadius.circular(16.0),
	color: Colors.amberAccent[100]),
	child: Center(child: Text('$index')),
	),
	);
	},
	);
	},
	),
	),
	),
	),
	),
	]);
	}
	}