chore(example): add a better YaruSplitButton example (#931)

ubuntu · Oct 11, 2024 · 9256145 · 9256145
1 parent 63e840a
commit 9256145
Showing 1 changed file with 101 additions and 52 deletions.
diff --git a/example/lib/pages/split_button_page.dart b/example/lib/pages/split_button_page.dart
@@ -1,8 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:yaru/yaru.dart';
 
-import '../common/space.dart';
-
 class SplitButtonPage extends StatefulWidget {
   const SplitButtonPage({super.key});
 
@@ -11,10 +9,11 @@ class SplitButtonPage extends StatefulWidget {
 }
 
 class _SplitButtonPageState extends State<SplitButtonPage> {
-  double width = 200.0;
+  double _width = 200.0;
 
   @override
   Widget build(BuildContext context) {
+    const contentWidth = 500.0;
     final items = List.generate(
       10,
       (index) {
@@ -31,60 +30,110 @@ class _SplitButtonPageState extends State<SplitButtonPage> {
       },
     );
 
+    final tiles = [
+      YaruTile(
+        title: const Text('YaruSplitButton()'),
+        subtitle: const Text('Regular version'),
+        trailing: YaruSplitButton(
+          onPressed: () => ScaffoldMessenger.of(context).showSnackBar(
+            const SnackBar(content: Text('Main Action')),
+          ),
+          items: items,
+          child: const Text('Main Action'),
+        ),
+      ),
+      YaruTile(
+        title: const Text('YaruSplitButton'),
+        subtitle: const Text('.filled()'),
+        trailing: YaruSplitButton.filled(
+          onPressed: () => ScaffoldMessenger.of(context).showSnackBar(
+            const SnackBar(content: Text('Main Action')),
+          ),
+          items: items,
+          child: const Text('Main Action'),
+        ),
+      ),
+      YaruTile(
+        title: const Text('YaruSplitButton'),
+        subtitle: const Text('outlined()'),
+        trailing: YaruSplitButton.outlined(
+          menuWidth: _width,
+          onPressed: () => ScaffoldMessenger.of(context)
+              .showSnackBar(const SnackBar(content: Text('Main Action'))),
+          items: items,
+          child: const Text('Main Action'),
+        ),
+      ),
+      YaruTile(
+        title: const Text('YaruSplitButton'),
+        subtitle: const Text(
+          'items: null, onOptionPressed: null',
+        ),
+        trailing: YaruSplitButton(
+          menuWidth: _width,
+          child: const Text('Main Action'),
+          onPressed: () => ScaffoldMessenger.of(context).showSnackBar(
+            const SnackBar(content: Text('Main Action')),
+          ),
+        ),
+      ),
+      YaruTile(
+        title: const Text('YaruSplitButton'),
+        subtitle: const Text('onPressed: null'),
+        trailing: YaruSplitButton(
+          menuWidth: _width,
+          items: items,
+          child: const Text('Main Action'),
+        ),
+      ),
+      YaruTile(
+        title: const Text('YaruSplitButton'),
+        subtitle:
+            const Text('items: null, onOptionPressed: null, onPressed: null'),
+        trailing: YaruSplitButton(
+          menuWidth: _width,
+          child: const Text('Main Action'),
+        ),
+      ),
+    ];
+    final row = Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Text('Menu width: ${_width.toInt()}'),
+        Expanded(
+          child: Slider(
+            min: 100,
+            max: 500,
+            value: _width,
+            onChanged: (v) => setState(() => _width = v),
+          ),
+        ),
+      ],
+    );
+
     return Center(
       child: Column(
         mainAxisSize: MainAxisSize.min,
-        children: space(
-          heightGap: 10,
-          children: [
-            YaruSplitButton(
-              onPressed: () => ScaffoldMessenger.of(context)
-                  .showSnackBar(const SnackBar(content: Text('Main Action'))),
-              items: items,
-              child: const Text('Main Action'),
-            ),
-            YaruSplitButton.filled(
-              onPressed: () => ScaffoldMessenger.of(context)
-                  .showSnackBar(const SnackBar(content: Text('Main Action'))),
-              items: items,
-              child: const Text('Main Action'),
-            ),
-            YaruSplitButton.outlined(
-              menuWidth: width,
-              onPressed: () => ScaffoldMessenger.of(context)
-                  .showSnackBar(const SnackBar(content: Text('Main Action'))),
-              items: items,
-              child: const Text('Main Action'),
-            ),
-            SizedBox(
-              width: 300,
-              child: Slider(
-                min: 100,
-                max: 500,
-                value: width,
-                onChanged: (v) => setState(() => width = v),
+        children: [
+          SizedBox(width: contentWidth, child: row),
+          Flexible(
+            child: YaruBorderContainer(
+              width: contentWidth,
+              margin: const EdgeInsets.all(kYaruPagePadding),
+              child: ListView.separated(
+                shrinkWrap: true,
+                itemCount: tiles.length,
+                itemBuilder: (context, index) => Padding(
+                  padding: const EdgeInsets.all(5.0),
+                  child: tiles.elementAt(index),
+                ),
+                separatorBuilder: (context, index) => index != tiles.length - 1
+                    ? const Divider()
+                    : const SizedBox.shrink(),
               ),
             ),
-            Center(
-              child: Text('Menu width: ${width.toInt()}'),
-            ),
-            YaruSplitButton(
-              menuWidth: width,
-              items: items,
-              child: const Text('Main Action'),
-            ),
-            YaruSplitButton(
-              menuWidth: width,
-              child: const Text('Main Action'),
-            ),
-            YaruSplitButton(
-              menuWidth: width,
-              child: const Text('Main Action'),
-              onPressed: () => ScaffoldMessenger.of(context)
-                  .showSnackBar(const SnackBar(content: Text('Main Action'))),
-            ),
-          ],
-        ),
+          ),
+        ],
       ),
     );
   }