new: server tag animation

lib/data/store/setting.dart

@@ -9,11 +9,16 @@ class SettingStore extends PersistentStore {
         defaultValue: defaultPrimaryColor.value,
       );
 
-  StoreProperty<int> get serverStatusUpdateInterval =>
-      property('serverStatusUpdateInterval', defaultValue: defaultUpdateInterval,);
+  StoreProperty<int> get serverStatusUpdateInterval => property(
+        '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,9 +148,9 @@ class _ServerPageState extends State<ServerPage>
                   _tag == null ||
                   (pro.servers[e]?.spi.tags?.contains(_tag) ?? false))
               .toList();
-          return FadeIn(
+          return AnimationLimiter(
             key: ValueKey(_tag),
-              child: ReorderableListView(
+              child: ReorderableListView.builder(
             header: _buildTagsSwitcher(pro),
             padding: const EdgeInsets.fromLTRB(7, 10, 7, 7),
             physics: const AlwaysScrollableScrollPhysics(),
@@ -161,31 +161,37 @@ class _ServerPageState extends State<ServerPage>
                 _settingStore.serverOrder,
               );
             }),
-                children: filtered
-                    .map((e) => _buildEachServerCard(pro.servers[e]))
-                    .toList(),
+            itemBuilder: (context, index) =>
+                _buildEachServerCard(pro.servers[filtered[index]], index),
+            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: AnimationConfiguration.staggeredList(
+          position: index,
+          duration: const Duration(milliseconds: 375),
+          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: () =>
-            AppRoute(const SnippetEditPage(), 'snippet edit page',).go(context),
+        onPressed: () => AppRoute(
+          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,
-                tagSuggestions![index - tags.length - 1], true,);
+            return _buildTagItem(
+              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