opt: hide live users by default

lib/pages/dynamics/widgets/up_panel.dart

@@ -34,6 +34,7 @@ class _UpPanelState extends State<UpPanel> {
   List<LiveUserItem> liveList = [];
   static const itemPadding = EdgeInsets.symmetric(horizontal: 5, vertical: 0);
   late MyInfo userInfo;
+  RxBool showLiveUser = false.obs;
 
   void listFormat() {
     userInfo = widget.upData.myInfo!;
@@ -131,21 +132,70 @@ class _UpPanelState extends State<UpPanel> {
                         children: [
                           const SizedBox(width: 10),
                           if (liveList.isNotEmpty) ...[
-                            for (int i = 0; i < liveList.length; i++) ...[
+                            Obx(
-                              upItemBuild(liveList[i], i)
+                              () => AnimatedSwitcher(
-                            ],
+                                duration: const Duration(milliseconds: 300),
-                            VerticalDivider(
+                                transitionBuilder: (Widget child,
-                              indent: 20,
+                                    Animation<double> animation) {
-                              endIndent: 40,
+                                  return FadeTransition(
-                              width: 26,
+                                      opacity: animation, child: child);
-                              color: Theme.of(context)
+                                },
-                                  .colorScheme
+                                child: showLiveUser.value
-                                  .primary
+                                    ? Row(
-                                  .withOpacity(0.5),
+                                        key: ValueKey<bool>(showLiveUser.value),
+                                        children: [
+                                          for (int i = 0;
+                                              i < liveList.length;
+                                              i++)
+                                            UpItemWidget(
+                                              data: liveList[i],
+                                              index: i,
+                                              currentMid: currentMid,
+                                              onClickUp: onClickUp,
+                                              onClickUpAni: onClickUpAni,
+                                              itemPadding: itemPadding,
+                                              contentWidth: contentWidth,
+                                            )
+                                        ],
+                                      )
+                                    : SizedBox.shrink(
+                                        key: ValueKey<bool>(showLiveUser.value),
+                                      ),
+                              ),
+                            ),
+                            Obx(
+                              () => IconButton(
+                                onPressed: () {
+                                  showLiveUser.value = !showLiveUser.value;
+                                },
+                                icon: AnimatedSwitcher(
+                                  duration: const Duration(milliseconds: 300),
+                                  transitionBuilder: (Widget child,
+                                      Animation<double> animation) {
+                                    return ScaleTransition(
+                                        scale: animation, child: child);
+                                  },
+                                  child: Icon(
+                                    !showLiveUser.value
+                                        ? Icons.arrow_forward_ios_rounded
+                                        : Icons.arrow_back_ios_rounded,
+                                    key: ValueKey<bool>(showLiveUser.value),
+                                    size: 18,
+                                  ),
+                                ),
+                              ),
                             ),
                           ],
                           for (int i = 0; i < upList.length; i++) ...[
-                            upItemBuild(upList[i], i)
+                            UpItemWidget(
+                              data: upList[i],
+                              index: i,
+                              currentMid: currentMid,
+                              onClickUp: onClickUp,
+                              onClickUpAni: onClickUpAni,
+                              itemPadding: itemPadding,
+                              contentWidth: contentWidth,
+                            )
                           ],
                           const SizedBox(width: 10),
                         ],
@@ -165,8 +215,93 @@ class _UpPanelState extends State<UpPanel> {
           )),
     );
   }
+}
 
-  Widget upItemBuild(data, i) {
+class _SliverHeaderDelegate extends SliverPersistentHeaderDelegate {
+  _SliverHeaderDelegate({required this.height, required this.child});
+
+  final double height;
+  final Widget child;
+
+  @override
+  Widget build(
+      BuildContext context, double shrinkOffset, bool overlapsContent) {
+    return child;
+  }
+
+  @override
+  double get maxExtent => height;
+
+  @override
+  double get minExtent => height;
+
+  @override
+  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
+      true;
+}
+
+class UpPanelSkeleton extends StatelessWidget {
+  const UpPanelSkeleton({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView.builder(
+      scrollDirection: Axis.horizontal,
+      physics: const NeverScrollableScrollPhysics(),
+      itemCount: 10,
+      itemBuilder: ((context, index) {
+        return Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 0),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Container(
+                width: 50,
+                height: 50,
+                decoration: BoxDecoration(
+                  color: Theme.of(context).colorScheme.onInverseSurface,
+                  borderRadius: BorderRadius.circular(50),
+                ),
+              ),
+              Container(
+                margin: const EdgeInsets.only(top: 6),
+                width: 45,
+                height: 12,
+                color: Theme.of(context).colorScheme.onInverseSurface,
+              ),
+            ],
+          ),
+        );
+      }),
+    );
+  }
+}
+
+class UpItemWidget extends StatelessWidget {
+  final dynamic data;
+  final int index;
+  final RxInt currentMid;
+  final Function(dynamic, int) onClickUp;
+  final Function(dynamic, int) onClickUpAni;
+  // final Function() feedBack;
+  final EdgeInsets itemPadding;
+  final double contentWidth;
+
+  const UpItemWidget({
+    Key? key,
+    required this.data,
+    required this.index,
+    required this.currentMid,
+    required this.onClickUp,
+    required this.onClickUpAni,
+    // required this.feedBack,
+    required this.itemPadding,
+    required this.contentWidth,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
     return InkWell(
       onTap: () {
         feedBack();
@@ -174,9 +309,9 @@ class _UpPanelState extends State<UpPanel> {
           EasyThrottle.throttle('follow', const Duration(milliseconds: 300),
               () {
             if (GlobalDataCache().enableDynamicSwitch) {
-              onClickUp(data, i);
+              onClickUp(data, index);
             } else {
-              onClickUpAni(data, i);
+              onClickUpAni(data, index);
             }
           });
         } else if (data.type == 'live') {
@@ -251,13 +386,12 @@ class _UpPanelState extends State<UpPanel> {
                       softWrap: false,
                       textAlign: TextAlign.center,
                       style: TextStyle(
-                          color: currentMid.value == data.mid
+                        color: currentMid.value == data.mid
-                              ? Theme.of(context).colorScheme.primary
+                            ? Theme.of(context).colorScheme.primary
-                              : Theme.of(context).colorScheme.outline,
+                            : Theme.of(context).colorScheme.outline,
-                          fontSize: Theme.of(context)
+                        fontSize:
-                              .textTheme
+                            Theme.of(context).textTheme.labelMedium!.fontSize,
-                              .labelMedium!
+                      ),
-                              .fontSize),
                     ),
                   ),
                 ),
@@ -269,64 +403,3 @@ class _UpPanelState extends State<UpPanel> {
     );
   }
 }
-
-class _SliverHeaderDelegate extends SliverPersistentHeaderDelegate {
-  _SliverHeaderDelegate({required this.height, required this.child});
-
-  final double height;
-  final Widget child;
-
-  @override
-  Widget build(
-      BuildContext context, double shrinkOffset, bool overlapsContent) {
-    return child;
-  }
-
-  @override
-  double get maxExtent => height;
-
-  @override
-  double get minExtent => height;
-
-  @override
-  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
-      true;
-}
-
-class UpPanelSkeleton extends StatelessWidget {
-  const UpPanelSkeleton({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return ListView.builder(
-      scrollDirection: Axis.horizontal,
-      physics: const NeverScrollableScrollPhysics(),
-      itemCount: 10,
-      itemBuilder: ((context, index) {
-        return Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 0),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              Container(
-                width: 50,
-                height: 50,
-                decoration: BoxDecoration(
-                  color: Theme.of(context).colorScheme.onInverseSurface,
-                  borderRadius: BorderRadius.circular(50),
-                ),
-              ),
-              Container(
-                margin: const EdgeInsets.only(top: 6),
-                width: 45,
-                height: 12,
-                color: Theme.of(context).colorScheme.onInverseSurface,
-              ),
-            ],
-          ),
-        );
-      }),
-    );
-  }
-}