feat: Added Shimmer functionality.

mathrunet · Aug 10, 2023 · 7a0fcdf · 7a0fcdf
1 parent 82a6d19
commit 7a0fcdf
Show file tree

Hide file tree

Showing 6 changed files with 360 additions and 79 deletions.
diff --git a/packages/katana_ui/example/pubspec.lock b/packages/katana_ui/example/pubspec.lock
@@ -5,18 +5,18 @@ packages:
     dependency: transitive
     description:
       name: _fe_analyzer_shared
-      sha256: ae92f5d747aee634b87f89d9946000c2de774be1d6ac3e58268224348cd0101a
+      sha256: "58826e40314219b223f4723dd4205845040161cdc2df3e6a1cdceed5d8165084"
       url: "https://pub.dev"
     source: hosted
-    version: "61.0.0"
+    version: "63.0.0"
   analyzer:
     dependency: transitive
     description:
       name: analyzer
-      sha256: ea3d8652bda62982addfd92fdc2d0214e5f82e43325104990d4f4c4a2a313562
+      sha256: f85566ec7b3d25cbea60f7dd4f157c5025f2f19233ca4feeed33b616c78a26a3
       url: "https://pub.dev"
     source: hosted
-    version: "5.13.0"
+    version: "6.1.0"
   args:
     dependency: transitive
     description:
@@ -29,10 +29,10 @@ packages:
     dependency: transitive
     description:
       name: asn1lib
-      sha256: b74e3842a52c61f8819a1ec8444b4de5419b41a7465e69d4aa681445377398b0
+      sha256: "21afe4333076c02877d14f4a89df111e658a6d466cbfc802eb705eb91bd5adfd"
       url: "https://pub.dev"
     source: hosted
-    version: "1.4.1"
+    version: "1.5.0"
   async:
     dependency: transitive
     description:
@@ -239,10 +239,10 @@ packages:
     dependency: "direct dev"
     description:
       name: freezed
-      sha256: "2df89855fe181baae3b6d714dc3c4317acf4fccd495a6f36e5e00f24144c6c3b"
+      sha256: "83462cfc33dc9680533a7f3a4a6ab60aa94f287db5f4ee6511248c22833c497f"
       url: "https://pub.dev"
     source: hosted
-    version: "2.4.1"
+    version: "2.4.2"
   freezed_annotation:
     dependency: transitive
     description:
@@ -360,7 +360,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "2.2.1"
+    version: "2.3.0"
   lints:
     dependency: transitive
     description:
@@ -481,6 +481,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.4"
+  shimmer:
+    dependency: transitive
+    description:
+      name: shimmer
+      sha256: "5f88c883a22e9f9f299e5ba0e4f7e6054857224976a5d9f839d4ebdc94a14ac9"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.0"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -640,3 +648,4 @@ packages:
     version: "3.1.2"
 sdks:
   dart: ">=3.0.0 <4.0.0"
+  flutter: ">=1.9.1"
diff --git a/packages/katana_ui/lib/katana_ui.dart b/packages/katana_ui/lib/katana_ui.dart
@@ -13,6 +13,7 @@ import 'dart:async';
 
 // Flutter imports:
 import 'package:flutter/material.dart' hide Scaffold;
+import 'package:shimmer/shimmer.dart' as sm;
 
 // Package imports:
 import 'package:universal_platform/universal_platform.dart';
@@ -28,3 +29,4 @@ part 'ui/label.dart';
 part 'ui/line_tile.dart';
 part 'ui/periodic_scope.dart';
 part 'ui/chat_tile.dart';
+part 'ui/shimmer.dart';
diff --git a/packages/katana_ui/lib/ui/line_tile.dart b/packages/katana_ui/lib/ui/line_tile.dart
@@ -68,6 +68,9 @@ class LineTile extends ListTile {
     super.horizontalTitleGap,
     super.minVerticalPadding,
     super.minLeadingWidth,
+    this.shimmer = false,
+    this.shimmerBaseColor,
+    this.shimmerHighlightColor,
   });
 
   /// Widget to display next to the title.
@@ -90,62 +93,157 @@ class LineTile extends ListTile {
   /// タイトルとテキスト間のスペース。
   final double space;
 
+  /// Specify `true` to use shimmer effect.
+  ///
+  /// シマーエフェクトを利用する場合に`true`を指定します。
+  final bool shimmer;
+
+  /// Base color for shimmer effects.
+  ///
+  /// シマーエフェクトを利用する場合のベースカラー。
+  final Color? shimmerBaseColor;
+
+  /// Highlight color when using shimmer effect.
+  ///
+  /// シマーエフェクトを利用する場合のハイライトカラー。
+  final Color? shimmerHighlightColor;
+
   @override
   Widget build(BuildContext context) {
-    return ListTile(
-      leading: leading,
-      title: _buildTitle(context),
-      subtitle: subtitle,
-      trailing: trailing,
-      isThreeLine: isThreeLine,
-      dense: dense,
-      visualDensity: visualDensity,
-      shape: shape,
-      style: style,
-      selectedColor: selectedColor,
-      iconColor: iconColor,
-      textColor: textColor,
-      contentPadding: contentPadding,
-      enabled: enabled,
-      onTap: onTap,
-      onLongPress: onLongPress,
-      onFocusChange: onFocusChange,
-      mouseCursor: mouseCursor,
-      selected: selected,
-      focusColor: focusColor,
-      hoverColor: hoverColor,
-      splashColor: splashColor,
-      focusNode: focusNode,
-      autofocus: autofocus,
-      tileColor: tileColor,
-      selectedTileColor: selectedTileColor,
-      enableFeedback: enableFeedback,
-      horizontalTitleGap: horizontalTitleGap,
-      minVerticalPadding: minVerticalPadding,
-      minLeadingWidth: minLeadingWidth,
-    );
+    if (shimmer) {
+      return sm.Shimmer.fromColors(
+        baseColor: shimmerBaseColor ?? Theme.of(context).colorScheme.surface,
+        highlightColor:
+            shimmerHighlightColor ?? Theme.of(context).colorScheme.background,
+        child: ListTile(
+          leading: leading,
+          title: _buildTitle(context),
+          subtitle: subtitle != null
+              ? Container(
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(4),
+                    color: shimmerBaseColor ??
+                        Theme.of(context).colorScheme.surface,
+                  ),
+                  height: Theme.of(context)
+                          .listTileTheme
+                          .subtitleTextStyle
+                          ?.fontSize ??
+                      12,
+                  width: double.infinity,
+                )
+              : null,
+          trailing: trailing,
+          isThreeLine: isThreeLine,
+          dense: dense,
+          visualDensity: visualDensity,
+          shape: shape,
+          style: style,
+          selectedColor: selectedColor,
+          iconColor: iconColor,
+          textColor: textColor,
+          contentPadding: contentPadding,
+          enabled: enabled,
+          onTap: onTap,
+          onLongPress: onLongPress,
+          onFocusChange: onFocusChange,
+          mouseCursor: mouseCursor,
+          selected: selected,
+          focusColor: focusColor,
+          hoverColor: hoverColor,
+          splashColor: splashColor,
+          focusNode: focusNode,
+          autofocus: autofocus,
+          tileColor: tileColor,
+          selectedTileColor: selectedTileColor,
+          enableFeedback: enableFeedback,
+          horizontalTitleGap: horizontalTitleGap,
+          minVerticalPadding: minVerticalPadding,
+          minLeadingWidth: minLeadingWidth,
+        ),
+      );
+    } else {
+      return ListTile(
+        leading: leading,
+        title: _buildTitle(context),
+        subtitle: subtitle,
+        trailing: trailing,
+        isThreeLine: isThreeLine,
+        dense: dense,
+        visualDensity: visualDensity,
+        shape: shape,
+        style: style,
+        selectedColor: selectedColor,
+        iconColor: iconColor,
+        textColor: textColor,
+        contentPadding: contentPadding,
+        enabled: enabled,
+        onTap: onTap,
+        onLongPress: onLongPress,
+        onFocusChange: onFocusChange,
+        mouseCursor: mouseCursor,
+        selected: selected,
+        focusColor: focusColor,
+        hoverColor: hoverColor,
+        splashColor: splashColor,
+        focusNode: focusNode,
+        autofocus: autofocus,
+        tileColor: tileColor,
+        selectedTileColor: selectedTileColor,
+        enableFeedback: enableFeedback,
+        horizontalTitleGap: horizontalTitleGap,
+        minVerticalPadding: minVerticalPadding,
+        minLeadingWidth: minLeadingWidth,
+      );
+    }
   }
 
   Widget? _buildTitle(BuildContext context) {
-    if (title != null) {
-      if (text == null) {
-        return title;
-      }
-      return Row(
-        children: [
-          Expanded(
-            flex: titleFlex,
-            child: title!,
-          ),
-          SizedBox(width: space),
-          Flexible(
-            flex: textFlex,
-            child: text!,
-          ),
-        ],
+    if (shimmer) {
+      final mock = Container(
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(4),
+          color: shimmerBaseColor ?? Theme.of(context).colorScheme.surface,
+        ),
+        height: Theme.of(context).listTileTheme.titleTextStyle?.fontSize ?? 13,
+        width: double.infinity,
       );
+
+      if (title != null && text != null) {
+        return Row(
+          children: [
+            Expanded(
+              flex: titleFlex,
+              child: mock,
+            ),
+            SizedBox(width: space),
+            Flexible(flex: textFlex, child: mock),
+          ],
+        );
+      } else {
+        return mock;
+      }
     } else {
-      return text;
+      if (title != null) {
+        if (text == null) {
+          return title;
+        }
+        return Row(
+          children: [
+            Expanded(
+              flex: titleFlex,
+              child: title!,
+            ),
+            SizedBox(width: space),
+            Flexible(
+              flex: textFlex,
+              child: text!,
+            ),
+          ],
+        );
+      } else {
+        return text;
+      }
     }
   }
 }