Reverse List Example - by Simon Lightfoot :: #HumpdayQandA on 16th April 2025 :: https://www.youtube.com/watch?v=CgiIh96C2DI

humpday_2025-04-16_3.dart

// MIT License
//
// Copyright (c) 2025 Simon Lightfoot
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
//
import 'dart:async';
import 'dart:collection';

import 'package:flutter/material.dart';

// Cosmin-Mihai Bodnariuc (17:52)
// Q: How would you guys implement a feed scroll that would
// retain the current scroll offset after inserting new items
// at the beginning of the list?

void main(List<String> args) {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.from(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.red,
          dynamicSchemeVariant: DynamicSchemeVariant.vibrant,
        ),
        useMaterial3: false,
      ),
      home: HomeScreen(),
    ),
  );
}

class FeedRepository extends ChangeNotifier {
  FeedRepository() {
    for (int i = 0; i < 50; i++) {
      addPost(i);
    }
  }

  final _posts = <String>[];

  List<String> get posts => UnmodifiableListView(_posts);

  Timer? _autoPost;
  int _autoPostCycle = 0;

  void addPost(int count) {
    final post = 'Post $_autoPostCycle :: $count';
    _posts.add(post);
    notifyListeners();
  }

  void start() {
    stop();
    ++_autoPostCycle;
    int count = 0;
    addPost(count++);
    _autoPost = Timer.periodic(const Duration(seconds: 1), (_) {
      addPost(count++);
    });
  }

  void stop() {
    _autoPost?.cancel();
    _autoPost = null;
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final feed = FeedRepository();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('News Feed'),
        actions: [
          PlayPauseButton(
            onPlayPause: (bool value) {
              print('onPlayPause: $value');
              if (value) {
                feed.start();
              } else {
                feed.stop();
              }
            },
          ),
        ],
      ),
      body: ListenableBuilder(
        listenable: feed,
        builder: (BuildContext context, Widget? child) {
          final posts = feed.posts;
          ScrollController a;
          ScrollPositionWithSingleContext b;
          return ListView.builder(
            reverse: true,
            itemCount: feed.posts.length,
            itemBuilder: (BuildContext context, int index) {
              final post = posts[index];
              return ListTile(
                key: Key(post),
                title: Text(post),
              );
            },
          );
        },
      ),
    );
  }
}

class PlayPauseButton extends StatefulWidget {
  const PlayPauseButton({
    super.key,
    required this.onPlayPause,
  });

  final void Function(bool play) onPlayPause;

  @override
  State<PlayPauseButton> createState() => _PlayPauseButtonState();
}

class _PlayPauseButtonState extends State<PlayPauseButton> with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

  bool _flag = false;

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

  void _onPressed() {
    _flag = !_flag;
    widget.onPlayPause(_flag);
    if (_flag) {
      _controller.forward();
    } else {
      _controller.reverse();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return IconButton(
      onPressed: _onPressed,
      icon: AnimatedIcon(
        icon: AnimatedIcons.play_pause,
        progress: _controller,
      ),
    );
  }
}