Migrate buttons in HomeAlbum to m3 chips

app/lib/material3.dart

@@ -4,6 +4,7 @@ class M3 extends ThemeExtension<M3> {
   const M3({
     required this.seed,
     required this.checkbox,
+    required this.assistChip,
     required this.filterChip,
     required this.listTile,
   });
@@ -14,12 +15,14 @@ class M3 extends ThemeExtension<M3> {
   M3 copyWith({
     Color? seed,
     M3Checkbox? checkbox,
+    M3AssistChip? assistChip,
     M3FilterChip? filterChip,
     M3ListTile? listTile,
   }) =>
       M3(
         seed: seed ?? this.seed,
         checkbox: checkbox ?? this.checkbox,
+        assistChip: assistChip ?? this.assistChip,
         filterChip: filterChip ?? this.filterChip,
         listTile: listTile ?? this.listTile,
       );
@@ -32,6 +35,7 @@ class M3 extends ThemeExtension<M3> {
     return M3(
       seed: Color.lerp(seed, other.seed, t)!,
       checkbox: checkbox.lerp(other.checkbox, t),
+      assistChip: assistChip.lerp(other.assistChip, t),
       filterChip: filterChip.lerp(other.filterChip, t),
       listTile: listTile.lerp(other.listTile, t),
     );
@@ -39,6 +43,7 @@ class M3 extends ThemeExtension<M3> {
 
   final Color seed;
   final M3Checkbox checkbox;
+  final M3AssistChip assistChip;
   final M3FilterChip filterChip;
   final M3ListTile listTile;
 }
@@ -77,6 +82,44 @@ class M3CheckboxDisabled {
   final Color container;
 }
 
+class M3AssistChip {
+  const M3AssistChip({
+    required this.enabled,
+  });
+
+  M3AssistChip lerp(M3AssistChip? other, double t) {
+    if (other is! M3AssistChip) {
+      return this;
+    }
+    return M3AssistChip(
+      enabled: enabled.lerp(other.enabled, t),
+    );
+  }
+
+  final M3AssistChipEnabled enabled;
+}
+
+class M3AssistChipEnabled {
+  const M3AssistChipEnabled({
+    required this.container,
+    required this.containerElevated,
+  });
+
+  M3AssistChipEnabled lerp(M3AssistChipEnabled? other, double t) {
+    if (other is! M3AssistChipEnabled) {
+      return this;
+    }
+    return M3AssistChipEnabled(
+      container: Color.lerp(container, other.container, t)!,
+      containerElevated:
+          Color.lerp(containerElevated, other.containerElevated, t)!,
+    );
+  }
+
+  final Color container;
+  final Color containerElevated;
+}
+
 class M3FilterChip {
   const M3FilterChip({
     required this.disabled,

app/lib/theme.dart

@@ -1,7 +1,6 @@
 import 'dart:ui';
 
 import 'package:flutter/material.dart';
-import 'package:logging/logging.dart';
 import 'package:nc_photos/material3.dart';
 import 'package:nc_photos/pref.dart';
 
@@ -200,6 +199,12 @@ ThemeData _applyColorScheme(ColorScheme colorScheme, Color seedColor) {
             container: colorScheme.onSurface.withOpacity(.38),
           ),
         ),
+        assistChip: M3AssistChip(
+          enabled: M3AssistChipEnabled(
+            container: Colors.transparent,
+            containerElevated: colorScheme.surface,
+          ),
+        ),
         filterChip: M3FilterChip(
           disabled: M3FilterChipDisabled(
             containerSelected: colorScheme.onSurface.withOpacity(.12),
@@ -216,5 +221,3 @@ ThemeData _applyColorScheme(ColorScheme colorScheme, Color seedColor) {
     ],
   );
 }
-
-final _log = Logger("theme");

app/lib/widget/home_albums.dart

@@ -1,5 +1,4 @@
 import 'dart:async';
-import 'dart:ui';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -17,6 +16,7 @@ import 'package:nc_photos/entity/file.dart';
 import 'package:nc_photos/event/event.dart';
 import 'package:nc_photos/exception_util.dart' as exception_util;
 import 'package:nc_photos/k.dart' as k;
+import 'package:nc_photos/material3.dart';
 import 'package:nc_photos/object_extension.dart';
 import 'package:nc_photos/platform/features.dart' as features;
 import 'package:nc_photos/pref.dart';
@@ -127,7 +127,6 @@ class _HomeAlbumsState extends State<HomeAlbums>
                   padding: const EdgeInsets.symmetric(horizontal: 8),
                   sliver: buildItemStreamList(
                     maxCrossAxisExtent: 256,
-                    mainAxisSpacing: 6,
                     childBorderRadius: BorderRadius.zero,
                     indicatorAlignment: const Alignment(-.92, -.92),
                   ),
@@ -540,34 +539,45 @@ class _ButtonListItem extends _ListItem {
   get staggeredTile => const StaggeredTile.fit(1);
 
   @override
-  buildWidget(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 8),
-      child: ClipRRect(
-        borderRadius: BorderRadius.circular(8),
-        child: Material(
-          type: MaterialType.transparency,
-          child: InkWell(
+  Widget buildWidget(BuildContext context) => _ButtonListItemView(
+        icon: icon,
+        label: label,
         onTap: _onTap,
-            child: Container(
-              decoration: BoxDecoration(
-                border: Border.all(
-                  color: Theme.of(context).colorScheme.outline,
-                  width: 1,
+        isShowIndicator: isShowIndicator,
+      );
+
+  final IconData icon;
+  final String label;
+  final bool isShowIndicator;
+
+  final VoidCallback? _onTap;
+}
+
+class _ButtonListItemView extends StatelessWidget {
+  const _ButtonListItemView({
+    required this.icon,
+    required this.label,
+    this.onTap,
+    this.isShowIndicator = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Theme(
+      data: Theme.of(context).copyWith(
+        canvasColor: M3.of(context).assistChip.enabled.container,
       ),
-                borderRadius: BorderRadius.circular(8),
-              ),
-              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
-              child: Row(
+      child: Padding(
+        padding: const EdgeInsets.all(4),
+        child: ActionChip(
+          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+          labelPadding: const EdgeInsetsDirectional.fromSTEB(8, 0, 0, 0),
+          // specify icon size explicitly to workaround size flickering during
+          // theme transition
+          avatar: Icon(icon, size: 18),
+          label: Row(
             children: [
-                  Icon(icon),
-                  const SizedBox(width: 8),
-                  Expanded(
-                    child: Text(
-                      label,
-                      style: Theme.of(context).textTheme.labelLarge,
-                    ),
-                  ),
+              Expanded(child: Text(label)),
               if (isShowIndicator)
                 Icon(
                   Icons.circle,
@@ -576,8 +586,7 @@ class _ButtonListItem extends _ListItem {
                 ),
             ],
           ),
-            ),
-          ),
+          onPressed: onTap,
         ),
       ),
     );
@@ -585,9 +594,8 @@ class _ButtonListItem extends _ListItem {
 
   final IconData icon;
   final String label;
+  final VoidCallback? onTap;
   final bool isShowIndicator;
-
-  final VoidCallback? _onTap;
 }
 
 class _SeparatorListItem extends _ListItem {