new: server tag animation

lib/data/store/setting.dart

@@ -9,11 +9,16 @@ class SettingStore extends PersistentStore {
         defaultValue: defaultPrimaryColor.value,
       );
 
-  StoreProperty<int> get serverStatusUpdateInterval =>
+  StoreProperty<int> get serverStatusUpdateInterval => property(
-      property('serverStatusUpdateInterval', defaultValue: defaultUpdateInterval,);
+        'serverStatusUpdateInterval',
+        defaultValue: defaultUpdateInterval,
+      );
 
   // Lanch page idx
-  StoreProperty<int> get launchPage => property('launchPage', defaultValue: defaultLaunchPageIdx,);
+  StoreProperty<int> get launchPage => property(
+        'launchPage',
+        defaultValue: defaultLaunchPageIdx,
+      );
 
   // Version of store db
   StoreProperty<int> get storeVersion =>

lib/view/page/server/tab.dart

@@ -2,12 +2,12 @@ import 'package:after_layout/after_layout.dart';
 import 'package:circle_chart/circle_chart.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
 import 'package:get_it/get_it.dart';
 import 'package:provider/provider.dart';
 import 'package:toolbox/core/extension/navigator.dart';
 import 'package:toolbox/core/extension/order.dart';
 import 'package:toolbox/core/utils/misc.dart';
-import 'package:toolbox/view/widget/fade_in.dart';
 
 import '../../../core/route.dart';
 import '../../../core/utils/ui.dart';
@@ -148,44 +148,50 @@ class _ServerPageState extends State<ServerPage>
                   _tag == null ||
                   (pro.servers[e]?.spi.tags?.contains(_tag) ?? false))
               .toList();
-          return FadeIn(
+          return AnimationLimiter(
-              key: ValueKey(_tag),
+            key: ValueKey(_tag),
-              child: ReorderableListView(
+              child: ReorderableListView.builder(
-                header: _buildTagsSwitcher(pro),
+            header: _buildTagsSwitcher(pro),
-                padding: const EdgeInsets.fromLTRB(7, 10, 7, 7),
+            padding: const EdgeInsets.fromLTRB(7, 10, 7, 7),
-                physics: const AlwaysScrollableScrollPhysics(),
+            physics: const AlwaysScrollableScrollPhysics(),
-                onReorder: (oldIndex, newIndex) => setState(() {
+            onReorder: (oldIndex, newIndex) => setState(() {
-                  pro.serverOrder.moveById(
+              pro.serverOrder.moveById(
-                    filtered[oldIndex],
+                filtered[oldIndex],
-                    filtered[newIndex],
+                filtered[newIndex],
-                    _settingStore.serverOrder,
+                _settingStore.serverOrder,
-                  );
+              );
-                }),
+            }),
-                children: filtered
+            itemBuilder: (context, index) =>
-                    .map((e) => _buildEachServerCard(pro.servers[e]))
+                _buildEachServerCard(pro.servers[filtered[index]], index),
-                    .toList(),
+            itemCount: filtered.length,
-              ));
+          ));
         },
       ),
     );
   }
 
-  Widget _buildEachServerCard(Server? si) {
+  Widget _buildEachServerCard(Server? si, int index) {
     if (si == null) {
       return placeholder;
     }
     return GestureDetector(
-      key: Key(si.spi.id),
+      key: Key(si.spi.id + (_tag ?? '')),
       onTap: () => AppRoute(
         ServerDetailPage(si.spi.id),
         'server detail page',
       ).go(context),
-      child: RoundRectCard(
+      child: AnimationConfiguration.staggeredList(
-        Padding(
+          position: index,
-          padding: const EdgeInsets.all(13),
+          duration: const Duration(milliseconds: 375),
-          child: _buildRealServerCard(si.status, si.state, si.spi),
+          child: SlideAnimation(
-        ),
+              verticalOffset: 50.0,
-      ),
+              child: FadeInAnimation(
+                  child: RoundRectCard(
+                Padding(
+                  padding: const EdgeInsets.all(13),
+                  child: _buildRealServerCard(si.status, si.state, si.spi),
+                ),
+              )))),
     );
   }
 

lib/view/page/snippet/list.dart

@@ -30,8 +30,10 @@ class _SnippetListPageState extends State<SnippetListPage> {
       floatingActionButton: FloatingActionButton(
         heroTag: 'snippet',
         child: const Icon(Icons.add),
-        onPressed: () =>
+        onPressed: () => AppRoute(
-            AppRoute(const SnippetEditPage(), 'snippet edit page',).go(context),
+          const SnippetEditPage(),
+          'snippet edit page',
+        ).go(context),
       ),
     );
   }

lib/view/widget/tag.dart

@@ -50,8 +50,11 @@ class TagEditor extends StatelessWidget {
           if (index < tags.length) {
             return _buildTagItem(context, tags[index], false);
           } else if (index > tags.length) {
-            return _buildTagItem(context,
+            return _buildTagItem(
-                tagSuggestions![index - tags.length - 1], true,);
+              context,
+              tagSuggestions![index - tags.length - 1],
+              true,
+            );
           }
           return const VerticalDivider();
         },

pubspec.lock

@@ -372,6 +372,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.14"
+  flutter_staggered_animations:
+    dependency: "direct main"
+    description:
+      name: flutter_staggered_animations
+      sha256: "81d3c816c9bb0dca9e8a5d5454610e21ffb068aedb2bde49d2f8d04f75538351"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
   flutter_test:
     dependency: "direct dev"
     description: flutter

pubspec.yaml

@@ -66,6 +66,7 @@ dependencies:
   highlight: ^0.7.0
   flutter_highlight: ^0.7.0
   code_text_field: ^1.1.0
+  flutter_staggered_animations: ^1.1.1
 
 dev_dependencies:
   flutter_native_splash: ^2.1.6