YaruBanner: wrap inkwell in material for zindex (#189)

* YaruBanner: wrap inkwell in material for zindex - Inkwells paint over everything else if not wrap inside material this is problematic when used inside scrollviews Ref https://github.com/ubuntu-flutter-community/software/issues/121
ubuntu · Aug 30, 2022 · 83089f5 · 83089f5
1 parent b1b9e2e
commit 83089f5
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 63 deletions.
diff --git a/example/lib/pages/tabbed_page_page.dart b/example/lib/pages/tabbed_page_page.dart
@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:yaru_icons/yaru_icons.dart';
 import 'package:yaru_widgets/yaru_widgets.dart';
-import 'package:yaru_widgets_example/widgets/row_list.dart';
 
 class TabbedPagePage extends StatefulWidget {
   const TabbedPagePage({
@@ -22,7 +21,27 @@ class _TabbedPagePageState extends State<TabbedPagePage> {
         initialIndex: _initialIndex,
         views: [
           YaruPage(
-            children: [RowList()],
+            children: [
+              GridView(
+                shrinkWrap: true,
+                gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+                  mainAxisExtent: 110,
+                  mainAxisSpacing: 15,
+                  crossAxisSpacing: 15,
+                  maxCrossAxisExtent: 550,
+                ),
+                children: [
+                  for (int i = 0; i < 20; i++)
+                    YaruBanner(
+                      name: 'YaruBanner $i',
+                      summary: 'Description',
+                      fallbackIconData: YaruIcons.ubuntu_logo_large,
+                      icon: Image.asset('assets/ubuntuhero.jpg'),
+                      onTap: () => showAboutDialog(context: context),
+                    )
+                ],
+              )
+            ],
           ),
           YaruPage(children: [
             YaruSection(

diff --git a/lib/src/utilities/yaru_banner.dart b/lib/src/utilities/yaru_banner.dart
@@ -60,71 +60,76 @@ class YaruBanner extends StatelessWidget {
     final borderRadius = BorderRadius.circular(10);
 
     bool light = Theme.of(context).brightness == Brightness.light;
-    return InkWell(
-      onTap: onTap,
-      borderRadius: borderRadius,
-      hoverColor: Theme.of(context).colorScheme.onSurface.withOpacity(0.1),
-      child: surfaceTintColor != null
-          ? Stack(
-              children: [
-                _Banner(
-                  subtitleWidget: subtitleWidget,
-                  width: bannerWidth,
-                  borderRadius: borderRadius,
-                  color: surfaceTintColor!,
-                  title: name,
-                  summary: summary,
-                  elevation: light ? 4 : 6,
-                  icon: icon ??
-                      YaruSafeImage(
-                        url: url,
-                        fallBackIconData: fallbackIconData,
-                      ),
-                  titleTextOverflow: nameTextOverflow ?? TextOverflow.ellipsis,
-                  subTitleTextOverflow:
-                      summaryTextOverflow ?? TextOverflow.fade,
-                  mouseCursor: onTap != null ? SystemMouseCursors.click : null,
-                ),
-                if (watermark == true)
-                  Padding(
-                    padding: const EdgeInsets.only(right: 20),
-                    child: Align(
-                      alignment: Alignment.centerRight,
-                      child: Opacity(
-                        opacity: 0.1,
-                        child: SizedBox(
-                          height: 130,
-                          child: YaruSafeImage(
-                            url: url,
-                            fallBackIconData: fallbackIconData,
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: borderRadius,
+        hoverColor: Theme.of(context).colorScheme.onSurface.withOpacity(0.1),
+        child: surfaceTintColor != null
+            ? Stack(
+                children: [
+                  _Banner(
+                    subtitleWidget: subtitleWidget,
+                    width: bannerWidth,
+                    borderRadius: borderRadius,
+                    color: surfaceTintColor!,
+                    title: name,
+                    summary: summary,
+                    elevation: light ? 4 : 6,
+                    icon: icon ??
+                        YaruSafeImage(
+                          url: url,
+                          fallBackIconData: fallbackIconData,
+                        ),
+                    titleTextOverflow:
+                        nameTextOverflow ?? TextOverflow.ellipsis,
+                    subTitleTextOverflow:
+                        summaryTextOverflow ?? TextOverflow.fade,
+                    mouseCursor:
+                        onTap != null ? SystemMouseCursors.click : null,
+                  ),
+                  if (watermark == true)
+                    Padding(
+                      padding: const EdgeInsets.only(right: 20),
+                      child: Align(
+                        alignment: Alignment.centerRight,
+                        child: Opacity(
+                          opacity: 0.1,
+                          child: SizedBox(
+                            height: 130,
+                            child: YaruSafeImage(
+                              url: url,
+                              fallBackIconData: fallbackIconData,
+                            ),
                           ),
                         ),
                       ),
                     ),
-                  ),
-              ],
-            )
-          : _Banner(
-              subtitleWidget: subtitleWidget,
-              width: bannerWidth,
-              borderRadius: borderRadius,
-              color: light
-                  ? Theme.of(context).backgroundColor
-                  : Theme.of(context).colorScheme.onSurface.withOpacity(0.01),
-              elevation: light ? 2 : 1,
-              icon: icon ??
-                  YaruSafeImage(
-                    url: url,
-                    fallBackIconData: fallbackIconData,
-                    iconSize: 50,
-                  ),
-              title: name,
-              summary: summary,
-              titleTextOverflow: nameTextOverflow ?? TextOverflow.ellipsis,
-              subTitleTextOverflow:
-                  summaryTextOverflow ?? TextOverflow.ellipsis,
-              mouseCursor: onTap != null ? SystemMouseCursors.click : null,
-            ),
+                ],
+              )
+            : _Banner(
+                subtitleWidget: subtitleWidget,
+                width: bannerWidth,
+                borderRadius: borderRadius,
+                color: light
+                    ? Theme.of(context).backgroundColor
+                    : Theme.of(context).colorScheme.onSurface.withOpacity(0.01),
+                elevation: light ? 2 : 1,
+                icon: icon ??
+                    YaruSafeImage(
+                      url: url,
+                      fallBackIconData: fallbackIconData,
+                      iconSize: 50,
+                    ),
+                title: name,
+                summary: summary,
+                titleTextOverflow: nameTextOverflow ?? TextOverflow.ellipsis,
+                subTitleTextOverflow:
+                    summaryTextOverflow ?? TextOverflow.ellipsis,
+                mouseCursor: onTap != null ? SystemMouseCursors.click : null,
+              ),
+      ),
     );
   }
 }