Add AppBanner from the software app

Fixes #169

example/lib/example_page_items.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:yaru_icons/yaru_icons.dart';
 import 'package:yaru_widgets/yaru_widgets.dart';
+import 'package:yaru_widgets_example/pages/banner_page.dart';
 import 'package:yaru_widgets_example/pages/carousel_page.dart';
 import 'package:yaru_widgets_example/pages/check_box_row_page.dart';
 import 'package:yaru_widgets_example/pages/color_disk_page.dart';
@@ -189,4 +190,9 @@ final examplePageItems = <YaruPageItem>[
     builder: (context) => DraggablePage(),
     iconData: YaruIcons.drag_handle,
   ),
+  YaruPageItem(
+    titleBuilder: (context) => Text('YaruBanner'),
+    builder: (context) => BannerPage(),
+    iconData: YaruIcons.image,
+  )
 ];

example/lib/pages/banner_page.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:yaru_icons/yaru_icons.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+
+class BannerPage extends StatelessWidget {
+  const BannerPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return YaruPage(
+      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),
+              )
+          ],
+        ),
+      ],
+    );
+  }
+}

lib/src/yaru_banner.dart

@@ -0,0 +1,154 @@
+import 'package:flutter/material.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+
+/// A colorable [Card] with a border which is tap-able via an [onTap] callback.
+class YaruBanner extends StatelessWidget {
+  const YaruBanner({
+    Key? key,
+    this.onTap,
+    this.surfaceTintColor,
+    this.watermark = false,
+    required this.name,
+    this.summary,
+    this.url,
+    this.icon,
+    required this.fallbackIconData,
+  }) : super(key: key);
+
+  /// The name of the card
+  final String name;
+
+  /// A summary string shown in the second line.
+  final String? summary;
+
+  /// The url to include a [YaruSafeImage].
+  final String? url;
+
+  /// An optional callback
+  final Function()? onTap;
+  final Color? surfaceTintColor;
+  final bool watermark;
+  final Widget? icon;
+  final IconData fallbackIconData;
+
+  @override
+  Widget build(BuildContext context) {
+    final borderRadius = BorderRadius.circular(10);
+
+    bool light = Theme.of(context).brightness == Brightness.light;
+    return InkWell(
+      onTap: onTap,
+      borderRadius: borderRadius,
+      hoverColor: Theme.of(context).primaryColor.withOpacity(0.3),
+      child: surfaceTintColor != null
+          ? Stack(
+              children: [
+                _Banner(
+                  borderRadius: borderRadius,
+                  color: surfaceTintColor!,
+                  title: name,
+                  summary: summary,
+                  elevation: light ? 4 : 6,
+                  icon: icon ??
+                      YaruSafeImage(
+                        url: url,
+                        fallBackIconData: fallbackIconData,
+                      ),
+                  textOverflow: 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(
+              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,
+              textOverflow: TextOverflow.ellipsis,
+              mouseCursor: onTap != null ? SystemMouseCursors.click : null,
+            ),
+    );
+  }
+}
+
+class _Banner extends StatelessWidget {
+  const _Banner({
+    Key? key,
+    required this.color,
+    required this.title,
+    this.summary,
+    required this.elevation,
+    required this.icon,
+    required this.borderRadius,
+    required this.textOverflow,
+    this.mouseCursor,
+  }) : super(key: key);
+
+  final Color color;
+  final String title;
+  final String? summary;
+  final double elevation;
+  final Widget icon;
+  final BorderRadius borderRadius;
+  final TextOverflow textOverflow;
+  final MouseCursor? mouseCursor;
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      shadowColor: Colors.transparent,
+      surfaceTintColor: color,
+      elevation: elevation,
+      shape: RoundedRectangleBorder(
+        borderRadius: borderRadius,
+        side: BorderSide(color: Theme.of(context).dividerColor, width: 1),
+      ),
+      child: Align(
+        alignment: Alignment.centerLeft,
+        child: SizedBox(
+          width: 370,
+          child: ListTile(
+            mouseCursor: mouseCursor,
+            subtitle: summary != null && summary!.isNotEmpty
+                ? Text(summary!, overflow: textOverflow)
+                : null,
+            title: Text(
+              title,
+              style: const TextStyle(fontSize: 20),
+            ),
+            leading: SizedBox(
+              width: 60,
+              child: icon,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/src/yaru_safe_image.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+
+class YaruSafeImage extends StatelessWidget {
+  const YaruSafeImage({
+    Key? key,
+    required this.url,
+    this.filterQuality = FilterQuality.medium,
+    this.fit = BoxFit.fitHeight,
+    this.fallBackIconData = Icons.image,
+    this.iconSize = 65,
+  }) : super(key: key);
+
+  final String? url;
+  final FilterQuality filterQuality;
+  final BoxFit fit;
+  final IconData fallBackIconData;
+  final double iconSize;
+
+  @override
+  Widget build(BuildContext context) {
+    final fallbackIcon = Icon(fallBackIconData, size: iconSize);
+    if (url == null) return fallbackIcon;
+    return Image.network(
+      url!,
+      filterQuality: filterQuality,
+      fit: fit,
+      frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
+        return frame == null ? fallbackIcon : child;
+      },
+      errorBuilder: (context, error, stackTrace) => fallbackIcon,
+    );
+  }
+}

lib/yaru_widgets.dart

@@ -2,6 +2,7 @@ library yaru_widgets;
 
 export 'src/ubuntu_logo.dart';
 export 'src/yaru_alert_dialog.dart';
+export 'src/yaru_banner.dart';
 export 'src/yaru_carousel.dart';
 export 'src/yaru_checkbox_row.dart';
 export 'src/yaru_color_disk.dart';
@@ -21,6 +22,7 @@ export 'src/yaru_page_item.dart';
 export 'src/yaru_round_icon_button.dart';
 export 'src/yaru_round_toggle_button.dart';
 export 'src/yaru_row.dart';
+export 'src/yaru_safe_image.dart';
 export 'src/yaru_search_app_bar.dart';
 export 'src/yaru_section.dart';
 export 'src/yaru_selectable_container.dart';