RSM Prototype #2 Reorderable List Test

lib/main_animated_list.dart

@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Animated List',
+      home: AnimatedListSample(),
+    );
+  }
+}
+
+class AnimatedListSample extends StatefulWidget {
+  @override
+  _AnimatedListSampleState createState() => _AnimatedListSampleState();
+}
+
+class _AnimatedListSampleState extends State<AnimatedListSample> {
+  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
+  List<String> _items = List.generate(10, (index) => 'Item ${index + 1}');
+
+  void _onReorder(int oldIndex, int newIndex) {
+    setState(() {
+      if (newIndex > oldIndex) {
+        newIndex -= 1;
+      }
+      final String item = _items.removeAt(oldIndex);
+      _items.insert(newIndex, item);
+
+      _listKey.currentState!.removeItem(
+        oldIndex,
+        (context, animation) => _buildItem(item, animation),
+        duration: const Duration(milliseconds: 300),
+      );
+
+      _listKey.currentState!
+          .insertItem(newIndex, duration: const Duration(milliseconds: 300));
+    });
+  }
+
+  Widget _buildItem(String item, Animation<double> animation) {
+    return SizeTransition(
+      key: ValueKey(item),
+      sizeFactor: animation,
+      child: Card(
+        child: ListTile(
+          title: Text(item),
+          key: ValueKey<String>(item),
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text('Animated List')),
+      body: ReorderableListView(
+        key: _listKey,
+        onReorder: _onReorder,
+        children: _items
+            .map((item) => _buildItem(item, AlwaysStoppedAnimation<double>(1)))
+            .toList(),
+      ),
+    );
+  }
+}

lib/main_ideal_state_management_v1_prototype.dart

@@ -20,10 +20,10 @@ class MyApp extends StatefulWidget {
   const MyApp({super.key});
 
   @override
-  State<MyApp> createState() => _MyAppState();
+  State<MyApp> createState() => MyAppState();
 }
 
-class _MyAppState extends State<MyApp> {
+class MyAppState extends State<MyApp> {
   // @observable
   bool paidMember = false;
 
@@ -45,6 +45,10 @@ class _MyAppState extends State<MyApp> {
         1000, (index) => Todo(title: 'Todo $index', completed: false));
   }
 
+  void reorderList() {
+    todos.shuffle();
+  }
+
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
@@ -123,8 +127,10 @@ class _SliderCheckboxListTileState extends State<SliderCheckboxListTile> {
     return CheckboxListTile(
       value: todo.completed,
       onChanged: (value) {
+        print('On changed');
         todo.completed = value ?? false;
-        setState(() {});
+        context.findAncestorStateOfType<MyAppState>()?.reorderList();
+        // setState(() {});
       },
       controlAffinity: ListTileControlAffinity.leading,
       title: Text(todo.title),
@@ -169,7 +175,13 @@ class _CheckboxListTileWrapperState extends State<CheckboxListTileWrapper> {
     return CheckboxListTile(
       value: widget.todo.completed,
       onChanged: (value) {
+        print('On Changed');
         widget.todo.completed = value ?? false;
+        MyAppState? myAppState = context.findAncestorStateOfType<MyAppState>();
+        if (myAppState != null) {
+          myAppState.reorderList();
+          myAppState.setState(() {});
+        }
         setState(() {});
       },
       controlAffinity: ListTileControlAffinity.leading,