feat: refresh example app (#170)

- Use handy_window;
- Use YaruWindowTitleBar;
- Fix search input focus issue;
- Various refactoring.

Fixes #140, #134

example/lib/main.dart

@@ -1,12 +1,11 @@
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
 import 'package:yaru/yaru.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
 
-import 'src/example.dart';
-import 'src/provider/icon_size_provider.dart';
-import 'src/provider/search_provider.dart';
+import 'src/app.dart';
 
-void main() {
+Future<void> main() async {
+  await YaruWindowTitleBar.ensureInitialized();
   runApp(_MyApp());
 }
 
@@ -19,16 +18,8 @@ class _MyApp extends StatelessWidget {
         debugShowCheckedModeBanner: false,
         theme: yaru.theme,
         darkTheme: yaru.darkTheme,
-        home: MultiProvider(
-          providers: [
-            ChangeNotifierProvider(
-              create: (_) => IconViewProvider(),
-            ),
-            ChangeNotifierProvider(
-              create: (_) => SearchProvider(),
-            ),
-          ],
-          builder: (context, child) => const Example(),
+        home: App.create(
+          context: context,
         ),
       ),
     );

example/lib/src/app.dart

@@ -0,0 +1,134 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:yaru_icons/yaru_icons.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+
+import 'icon_items.dart';
+import 'icon_view.dart';
+import 'provider/icon_view_model.dart';
+
+class App extends StatefulWidget {
+  const App({super.key});
+
+  static Widget create({
+    required BuildContext context,
+  }) {
+    return ChangeNotifierProvider(
+      create: (_) => IconViewModel(),
+      child: const App(),
+    );
+  }
+
+  @override
+  State<App> createState() => _AppState();
+}
+
+class _AppState extends State<App> {
+  @override
+  Widget build(BuildContext context) {
+    final iconSize = context.select<IconViewModel, double>((m) => m.iconSize);
+    final isMinIconSize =
+        context.select<IconViewModel, bool>((m) => m.isMinIconSize);
+    final isMaxIconSize =
+        context.select<IconViewModel, bool>((m) => m.isMaxIconSize);
+    final gridView = context.select<IconViewModel, bool>((m) => m.gridView);
+    final searchActive =
+        context.select<IconViewModel, bool>((m) => m.searchActive);
+
+    return Scaffold(
+      appBar: YaruWindowTitleBar(
+        title: YaruSearchTitleField(
+          searchActive: searchActive,
+          width: 250,
+          title: const Text(
+            'Flutter Yaru Icons Demo',
+          ),
+          onSearchActive: context.read<IconViewModel>().toggleSearch,
+          onClear: context.read<IconViewModel>().toggleSearch,
+          onChanged: context.read<IconViewModel>().onSearchChanged,
+        ),
+        actions: [
+          Tooltip(
+            message: gridView ? 'Toggle list view' : 'Toggle grid view',
+            child: IconButton(
+              onPressed: context.read<IconViewModel>().toggleGridView,
+              icon: gridView
+                  ? const Icon(YaruIcons.unordered_list)
+                  : const Icon(YaruIcons.app_grid),
+            ),
+          ),
+          Tooltip(
+            message: 'Decrease icon size',
+            child: IconButton(
+              onPressed: isMinIconSize
+                  ? null
+                  : context.read<IconViewModel>().decreaseIconSize,
+              icon: const Icon(YaruIcons.minus),
+            ),
+          ),
+          Text('${iconSize.truncate()}px'),
+          Tooltip(
+            message: 'Increase icon size',
+            child: IconButton(
+              onPressed: isMaxIconSize
+                  ? null
+                  : context.read<IconViewModel>().increaseIconSize,
+              icon: const Icon(YaruIcons.plus),
+            ),
+          ),
+        ],
+      ),
+      body: YaruNavigationPage(
+        length: 3,
+        itemBuilder: (context, index, selected) {
+          const style = YaruNavigationRailStyle.labelled;
+
+          switch (index) {
+            case 0:
+              return YaruNavigationRailItem(
+                icon: const Icon(YaruIcons.image),
+                label: const Text('Static icons'),
+                tooltip: 'Static icons',
+                style: style,
+              );
+            case 1:
+              return YaruNavigationRailItem(
+                icon: const Icon(YaruIcons.video),
+                label: const Text('Animated icons'),
+                tooltip: 'Animated icons',
+                style: style,
+              );
+            case 2:
+              return YaruNavigationRailItem(
+                icon: const Icon(YaruIcons.rule_and_pen),
+                label: const Text('Widget icons'),
+                tooltip: 'Widget icons',
+                style: style,
+              );
+            default:
+              throw 'Invalid index';
+          }
+        },
+        pageBuilder: (context, index) {
+          List<IconItem> iconItems;
+
+          switch (index) {
+            case 0:
+              iconItems = IconItems.static;
+              break;
+            case 1:
+              iconItems = IconItems.animated;
+              break;
+            case 2:
+              iconItems = IconItems.widget;
+              break;
+            default:
+              throw 'Invalid index';
+          }
+
+          return IconView(iconItems: iconItems);
+        },
+      ),
+    );
+  }
+}

example/lib/src/common/clickable_icon.dart

@@ -1,22 +1,20 @@
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
 
-import '../provider/icon_size_provider.dart';
+import '../icon_items.dart';
 import 'icon_dialog.dart';
-import 'icon_item.dart';
 
 class ClickableIcon extends StatelessWidget {
   const ClickableIcon({
     super.key,
     required this.iconItem,
+    required this.iconSize,
   });
 
   final IconItem iconItem;
+  final double iconSize;
 
   @override
   Widget build(BuildContext context) {
-    final iconViewProvider = Provider.of<IconViewProvider>(context);
-
     return AspectRatio(
       aspectRatio: 1,
       child: InkWell(
@@ -29,7 +27,7 @@ class ClickableIcon extends StatelessWidget {
         child: Center(
           child: iconItem.iconBuilder(
             context,
-            iconViewProvider.iconSize,
+            iconSize,
           ),
         ),
       ),

example/lib/src/common/icon_dialog.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:yaru_widgets/yaru_widgets.dart';
 
+import '../icon_items.dart';
 import '../utils.dart';
-import 'icon_item.dart';
 import 'icon_usage.dart';
 
 const _iconDialogSizes = [

example/lib/src/common/icon_grid.dart

@@ -1,35 +1,38 @@
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
 
-import '../provider/icon_size_provider.dart';
+import '../icon_items.dart';
 import '../utils.dart';
 import 'clickable_icon.dart';
-import 'icon_item.dart';
 
 class IconGrid extends StatelessWidget {
   const IconGrid({
     super.key,
     required this.iconItems,
+    required this.iconSize,
   });
 
   final List<IconItem> iconItems;
+  final double iconSize;
 
   @override
   Widget build(BuildContext context) {
-    final iconViewProvider = Provider.of<IconViewProvider>(context);
-
     return GridView.builder(
       gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
-        maxCrossAxisExtent: iconViewProvider.iconSize * 1.5,
+        maxCrossAxisExtent: iconSize * 1.5,
       ),
       padding: const EdgeInsets.all(8),
       itemCount: iconItems.length,
-      itemBuilder: (context, index) => Tooltip(
-        verticalOffset: iconViewProvider.iconSize / 2,
-        waitDuration: const Duration(milliseconds: 250),
-        message: beautifyIconName(iconItems[index].name),
-        child: ClickableIcon(iconItem: iconItems[index]),
-      ),
+      itemBuilder: (context, index) {
+        return Tooltip(
+          verticalOffset: iconSize / 2,
+          waitDuration: const Duration(milliseconds: 250),
+          message: beautifyIconName(iconItems[index].name),
+          child: ClickableIcon(
+            iconItem: iconItems[index],
+            iconSize: iconSize,
+          ),
+        );
+      },
     );
   }
 }

example/lib/src/common/icon_table.dart

@@ -1,25 +1,23 @@
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
 
-import '../provider/icon_size_provider.dart';
+import '../icon_items.dart';
 import '../utils.dart';
 import 'clickable_icon.dart';
-import 'icon_item.dart';
 import 'icon_usage.dart';
 
 @immutable
 class IconTable extends StatelessWidget {
   const IconTable({
     super.key,
     required this.iconItems,
+    required this.iconSize,
   });
 
   final List<IconItem> iconItems;
+  final double iconSize;
 
   @override
   Widget build(BuildContext context) {
-    final iconViewProvider = Provider.of<IconViewProvider>(context);
-
     return ListView.builder(
       padding: const EdgeInsets.all(16),
       itemCount: iconItems.length,
@@ -28,8 +26,11 @@ class IconTable extends StatelessWidget {
           Row(
             children: [
               SizedBox.square(
-                dimension: iconViewProvider.iconSize * 1.5,
-                child: ClickableIcon(iconItem: iconItems[index]),
+                dimension: iconSize * 1.5,
+                child: ClickableIcon(
+                  iconItem: iconItems[index],
+                  iconSize: iconSize,
+                ),
               ),
               const SizedBox(
                 width: 16,