feat(example): improve icon page (#856)

.github/workflows/publish.yaml

@@ -4,18 +4,18 @@ on:
   push:
     branches:
       - main
-  workflow_dispatch:
 
 env:
-  FLUTTER_VERSION: 3.16.5
+  FLUTTER_VERSION: 3.16.9
 
 jobs:
   publish:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: subosito/flutter-action@v2
+      - uses: subosito/flutter-action@v1
         with:
+          channel: 'stable'
           flutter-version: ${{env.FLUTTER_VERSION}}
       - uses: bluefireteam/flutter-gh-pages@v7
         with:

example/lib/example.dart

@@ -7,14 +7,22 @@ import 'package:yaru/yaru.dart';
 import 'code_snippet_button.dart';
 import 'example_model.dart';
 import 'example_page_items.dart';
+import 'pages/icons_page/provider/icon_view_model.dart';
 
 class Example extends StatefulWidget {
   // ignore: unused_element
   const Example({super.key});
 
   static Widget create(BuildContext context) {
-    return ChangeNotifierProvider<ExampleModel>(
-      create: (_) => ExampleModel(getService<Connectivity>()),
+    return MultiProvider(
+      providers: [
+        ChangeNotifierProvider<ExampleModel>(
+          create: (_) => ExampleModel(getService<Connectivity>()),
+        ),
+        ChangeNotifierProvider(
+          create: (_) => IconViewModel(),
+        ),
+      ],
       child: const Example(),
     );
   }
@@ -62,7 +70,7 @@ class _MasterDetailPage extends StatelessWidget {
       length: pageItems.length,
       tileBuilder: (context, index, selected, availableWidth) => YaruMasterTile(
         leading: pageItems[index].iconBuilder(context, selected),
-        title: buildTitle(context, pageItems[index]),
+        title: Text(pageItems[index].title),
       ),
       pageBuilder: (context, index) => YaruDetailPage(
         appBar: YaruWindowTitleBar(

example/lib/example_page_items.dart

@@ -251,8 +251,9 @@ final examplePageItems = <PageItem>[
   ),
   PageItem(
     title: 'YaruIcons',
+    titleBuilder: createIconsPageAppBar,
     pageBuilder: (context) {
-      return IconsPage.create(context: context);
+      return const IconsPage();
     },
     iconBuilder: (context, selected) => selected
         ? const Icon(YaruIcons.placeholder_icon_filled)

example/lib/pages/icons_page/common/clickable_icon.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:yaru/yaru.dart';
 
 import '../icon_items.dart';
 import 'icon_dialog.dart';
@@ -18,6 +19,7 @@ class ClickableIcon extends StatelessWidget {
     return AspectRatio(
       aspectRatio: 1,
       child: InkWell(
+        borderRadius: BorderRadius.circular(kYaruButtonRadius),
         onTap: () => showDialog(
           context: context,
           builder: (context) => IconDialog(

example/lib/pages/icons_page/common/icon_dialog.dart

@@ -33,9 +33,8 @@ class IconDialog extends StatelessWidget {
         title: Text(beautifyIconName(iconItem.name)),
       ),
       children: [
-        Row(
-          mainAxisAlignment: MainAxisAlignment.center,
-          crossAxisAlignment: CrossAxisAlignment.end,
+        Wrap(
+          crossAxisAlignment: WrapCrossAlignment.center,
           children: [
             for (final size in _iconDialogSizes)
               Padding(

example/lib/pages/icons_page/common/icon_grid.dart

@@ -20,7 +20,12 @@ class IconGrid extends StatelessWidget {
       gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
         maxCrossAxisExtent: iconSize * 1.5,
       ),
-      padding: const EdgeInsets.all(8),
+      padding: const EdgeInsets.only(
+        top: 10,
+        bottom: 20,
+        left: 20,
+        right: 20,
+      ),
       itemCount: iconItems.length,
       itemBuilder: (context, index) {
         return Tooltip(

example/lib/pages/icons_page/common/icon_table.dart

@@ -19,40 +19,41 @@ class IconTable extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return ListView.builder(
-      padding: const EdgeInsets.all(16),
       itemCount: iconItems.length,
-      itemBuilder: (context, index) => Column(
-        children: [
-          Row(
-            children: [
-              SizedBox.square(
-                dimension: iconSize * 1.5,
-                child: ClickableIcon(
-                  iconItem: iconItems[index],
-                  iconSize: iconSize,
+      itemBuilder: (context, index) {
+        return Column(
+          children: [
+            Row(
+              children: [
+                SizedBox.square(
+                  dimension: iconSize * 1.5,
+                  child: ClickableIcon(
+                    iconItem: iconItems[index],
+                    iconSize: iconSize,
+                  ),
                 ),
-              ),
-              const SizedBox(
-                width: 16,
-              ),
-              Expanded(
-                child: SelectableText(
-                  beautifyIconName(iconItems[index].name),
-                  style: Theme.of(context).textTheme.bodySmall,
+                const SizedBox(
+                  width: 16,
                 ),
-              ),
-              Expanded(
-                child: IconUsage(
-                  usage: iconItems[index].usage,
-                  label: false,
-                  mainAxisAlignment: MainAxisAlignment.start,
+                Expanded(
+                  child: SelectableText(
+                    beautifyIconName(iconItems[index].name),
+                    style: Theme.of(context).textTheme.bodySmall,
+                  ),
                 ),
-              ),
-            ],
-          ),
-          if (index < iconItems.length - 1) const Divider(),
-        ],
-      ),
+                Expanded(
+                  child: IconUsage(
+                    usage: iconItems[index].usage,
+                    label: false,
+                    mainAxisAlignment: MainAxisAlignment.start,
+                  ),
+                ),
+              ],
+            ),
+            if (index < iconItems.length - 1) const Divider(),
+          ],
+        );
+      },
     );
   }
 }

example/lib/pages/icons_page/common/icon_usage.dart

@@ -30,15 +30,20 @@ class IconUsage extends StatelessWidget {
             width: 8,
           ),
         ],
-        Container(
-          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
-          decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(4),
-            color: Theme.of(context).highlightColor,
-          ),
-          child: SelectableText(
-            usage,
-            style: usageTextStyle,
+        Flexible(
+          child: Padding(
+            padding: const EdgeInsets.only(right: 20),
+            child: Container(
+              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(4),
+                color: Theme.of(context).highlightColor,
+              ),
+              child: SelectableText(
+                usage,
+                style: usageTextStyle,
+              ),
+            ),
           ),
         ),
       ],

example/lib/pages/icons_page/icon_items.dart

@@ -18,10 +18,17 @@ final List<IconItem> _staticIconItems = [
     IconItem(
       name: iconName,
       usage: 'YaruIcons.$iconName',
-      iconBuilder: (context, iconSize) => Icon(
-        YaruIcons.all[iconName]!,
-        size: iconSize,
-      ),
+      iconBuilder: (context, iconSize) {
+        final data = YaruIcons.all[iconName];
+
+        if (data == null) {
+          return const Placeholder();
+        }
+        return Icon(
+          data,
+          size: iconSize,
+        );
+      },
     ),
 ];