diff --git a/example/lib/pages/tabbed_page_page.dart b/example/lib/pages/tabbed_page_page.dart index 85fce83ea..c681ec7a2 100644 --- 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 { 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 index c72b2fb17..12b7828dd 100644 --- 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, + ), + ), ); } }