animated list one

Author: lohanidamodar

README.md

@@ -132,7 +132,7 @@ The code for Springy Widget is taken and refactored from (https://github.com/mat
 
 ## Animations
 
-<img src="screenshots/animated_bottom_nav.gif" height="480px" > <img src="screenshots/anim3.gif" height="480px" > <img src="screenshots/animation2.gif" height="480px" > <img src="screenshots/animation1.gif" height="480px" >
+<img src="screenshots/anim5.gif" height="480px" > <img src="screenshots/animated_bottom_nav.gif" height="480px" > <img src="screenshots/anim3.gif" height="480px" > <img src="screenshots/animation2.gif" height="480px" > <img src="screenshots/animation1.gif" height="480px" >
 
 ## Ecommerce
 

lib/core/presentation/routes.dart

@@ -2,6 +2,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_ui_challenges/core/data/models/menu.dart';
 import 'package:flutter_ui_challenges/src/pages/animations/anim4.dart';
+import 'package:flutter_ui_challenges/src/pages/animations/anim5.dart';
 import 'package:flutter_ui_challenges/src/pages/bike/bike_details.dart';
 import 'package:flutter_ui_challenges/src/pages/bike/home_page.dart';
 import 'package:flutter_ui_challenges/src/pages/blog/sports_news1.dart';
@@ -102,6 +103,8 @@ final List<dynamic> pages = [
           path: AnimationTwoPage.path),
       SubMenuItem("Animated Bottom Bar", AnimatedBottomBar(),
           path: AnimatedBottomBar.path),
+      SubMenuItem("Animated List One", AnimatedListOnePage(),
+          path: AnimatedListOnePage.path),
     ]),
     MenuItem(title: "Profile", icon: Icons.person, items: [
       SubMenuItem("Profile One", ProfileOnePage(), path: ProfileOnePage.path),

lib/src/pages/animations/anim5.dart

@@ -0,0 +1,94 @@
+/**
+ * Author: Damodar Lohani
+ * profile: https://github.com/lohanidamodar
+  */
+
+import 'package:flutter/material.dart';
+import 'package:flutter_ui_challenges/src/pages/bike/bike_details.dart';
+
+List<String> places = [
+  "Nuwakot",
+  "Dhaulagiri",
+  "Rara",
+  "Muktinath",
+  "Pashupatinath"
+];
+
+class AnimatedListOnePage extends StatefulWidget {
+  static final String path = "lib/src/pages/animations/anim5.dart";
+  @override
+  _AnimatedListOnePageState createState() => _AnimatedListOnePageState();
+}
+
+class _AnimatedListOnePageState extends State<AnimatedListOnePage> {
+  List<String> items;
+  GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
+
+  @override
+  void initState() {
+    items = ["Kathmandu", "Bhaktapur", "Pokhara", "Mount Everest"];
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("Animated List One"),
+      ),
+      backgroundColor: Colors.grey.shade300,
+      body: AnimatedList(
+        key: _listKey,
+        initialItemCount: items.length,
+        itemBuilder: (context, index, anim) {
+          return SlideTransition(
+            position: Tween<Offset>(begin: Offset(1, 0), end: Offset.zero)
+                .animate(anim),
+            child: BorderedContainer(
+              margin: const EdgeInsets.symmetric(
+                vertical: 4.0,
+                horizontal: 8.0,
+              ),
+              padding: const EdgeInsets.all(0),
+              child: ListTile(
+                title: Text(items[index]),
+                trailing: IconButton(
+                  icon: Icon(Icons.clear),
+                  onPressed: () {
+                    _listKey.currentState.removeItem(index,
+                        (context, animation) {
+                      String removedItem = items.removeAt(index);
+                      return SizeTransition(
+                        sizeFactor: animation,
+                        axis: Axis.vertical,
+                        child: BorderedContainer(
+                            margin: const EdgeInsets.symmetric(
+                              vertical: 4.0,
+                              horizontal: 8.0,
+                            ),
+                            padding: const EdgeInsets.all(0),
+                            child: ListTile(
+                              title: Text(removedItem),
+                            )),
+                      );
+                    });
+                    setState(() {});
+                  },
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+      floatingActionButton: FloatingActionButton(
+        child: Icon(Icons.add),
+        onPressed: () {
+          places.shuffle();
+          items.insert(items.length, places[0]);
+          _listKey.currentState.insertItem(items.length - 1);
+          setState(() {});
+        },
+      ),
+    );
+  }
+}