🐛 Fix AssetPickerAppBar (#520)

- Fix unhandled child semantics with the app bar title.
- Fix styles around the app bar and other widgets.

Author: AlexV525

CHANGELOG.md

@@ -4,7 +4,15 @@ that can be found in the LICENSE file. -->
 
 # Changelog
 
-See the [Migration Guide](guides/migration_guide.md) for the details of breaking changes between versions.
+> [!IMPORTANT]  
+> See the [Migration Guide](guides/migration_guide.md) for the details of breaking changes between versions.
+
+## 9.0.0-dev.2
+
+### Fixes
+
+- Fix unhandled child semantics with the app bar title.
+- Fix styles around the app bar and other widgets.
 
 ## 9.0.0-dev.1
 

lib/src/delegates/asset_picker_builder_delegate.dart

@@ -929,7 +929,6 @@ class DefaultAssetPickerBuilderDelegate
   @override
   AssetPickerAppBar appBar(BuildContext context) {
     final AssetPickerAppBar appBar = AssetPickerAppBar(
-      backgroundColor: theme.appBarTheme.backgroundColor,
       title: Semantics(
         onTapHint: semanticsTextDelegate.sActionSwitchPathLabel,
         child: pathEntitySelector(context),

lib/src/delegates/asset_picker_viewer_builder_delegate.dart

@@ -948,7 +948,7 @@ class DefaultAssetPickerViewerBuilderDelegate
                 ? SystemUiOverlayStyle.light
                 : SystemUiOverlayStyle.dark),
         child: Material(
-          color: themeData.colorScheme.onSecondary,
+          color: themeData.scaffoldBackgroundColor,
           child: Stack(
             children: <Widget>[
               Positioned.fill(child: _pageViewBuilder(context)),

lib/src/widget/asset_picker_app_bar.dart

@@ -102,6 +102,8 @@ class AssetPickerAppBar extends StatelessWidget implements PreferredSizeWidget {
   @override
   Widget build(BuildContext context) {
     final ThemeData theme = Theme.of(context);
+    final AppBarTheme appBarTheme = theme.appBarTheme;
+
     final Widget? titleWidget;
     if (centerTitle) {
       titleWidget = Center(child: title);
@@ -118,7 +120,10 @@ class AssetPickerAppBar extends StatelessWidget implements PreferredSizeWidget {
             PositionedDirectional(
               top: 0.0,
               bottom: 0.0,
-              child: leading ?? const BackButton(),
+              child: IconTheme.merge(
+                data: appBarTheme.iconTheme ?? theme.iconTheme,
+                child: leading ?? const BackButton(),
+              ),
             ),
           if (titleWidget != null)
             PositionedDirectional(
@@ -131,7 +136,8 @@ class AssetPickerAppBar extends StatelessWidget implements PreferredSizeWidget {
                     ? Alignment.center
                     : AlignmentDirectional.centerStart,
                 child: DefaultTextStyle(
-                  style: theme.textTheme.titleLarge!.copyWith(fontSize: 23.0),
+                  style: appBarTheme.titleTextStyle ??
+                      theme.textTheme.titleLarge!.copyWith(fontSize: 23.0),
                   maxLines: 1,
                   softWrap: false,
                   overflow: TextOverflow.ellipsis,
@@ -146,9 +152,15 @@ class AssetPickerAppBar extends StatelessWidget implements PreferredSizeWidget {
               top: 0.0,
               end: 0.0,
               height: _barHeight,
-              child: Padding(
-                padding: actionsPadding ?? EdgeInsets.zero,
-                child: Row(mainAxisSize: MainAxisSize.min, children: actions!),
+              child: IconTheme.merge(
+                data: appBarTheme.actionsIconTheme ?? theme.iconTheme,
+                child: Padding(
+                  padding: actionsPadding ?? EdgeInsets.zero,
+                  child: Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: actions!,
+                  ),
+                ),
               ),
             ),
         ],
@@ -172,20 +184,19 @@ class AssetPickerAppBar extends StatelessWidget implements PreferredSizeWidget {
       );
     }
 
-    final AppBarTheme appBarTheme = theme.appBarTheme;
-
     /// Apply the icon theme data.
     child = IconTheme.merge(
       data: iconTheme ?? appBarTheme.iconTheme ?? theme.iconTheme,
       child: child,
     );
 
     // Set [SystemUiOverlayStyle] according to the brightness.
+    final Color effectiveBackgroundColor = backgroundColor ??
+        appBarTheme.backgroundColor ??
+        theme.colorScheme.surface;
     final Brightness effectiveBrightness = brightness ??
         appBarTheme.systemOverlayStyle?.statusBarBrightness ??
         theme.brightness;
-    final Color effectiveBackgroundColor =
-        backgroundColor ?? theme.colorScheme.surface;
     final SystemUiOverlayStyle overlayStyle = appBarTheme.systemOverlayStyle ??
         SystemUiOverlayStyle(
           statusBarColor: effectiveBackgroundColor,
@@ -199,7 +210,7 @@ class AssetPickerAppBar extends StatelessWidget implements PreferredSizeWidget {
     );
 
     final Widget result = Material(
-      // Wrap to ensure the child rendered correctly
+      // Wrap to ensure the child rendered correctly.
       color: Color.lerp(
         effectiveBackgroundColor,
         Colors.transparent,
@@ -209,7 +220,11 @@ class AssetPickerAppBar extends StatelessWidget implements PreferredSizeWidget {
       child: child,
     );
     return semanticsBuilder?.call(result) ??
-        Semantics(sortKey: const OrdinalSortKey(0), child: result);
+        Semantics(
+          sortKey: const OrdinalSortKey(0),
+          explicitChildNodes: true,
+          child: result,
+        );
   }
 }
 

pubspec.yaml

@@ -1,5 +1,5 @@
 name: wechat_assets_picker
-version: 9.0.0-dev.1
+version: 9.0.0-dev.2
 description: |
   An image picker (also with videos and audio)
   for Flutter projects based on WeChat's UI,