fix: left align, don't default height

ubuntu · Oct 8, 2024 · 3433d7b · 3433d7b
1 parent 6ee266b
commit 3433d7b
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 41 deletions.
diff --git a/example/lib/common/space.dart b/example/lib/common/space.dart
@@ -0,0 +1,20 @@
+import 'package:flutter/widgets.dart';
+
+List<Widget> space({
+  required Iterable<Widget> children,
+  double? widthGap,
+  double? heightGap,
+  int skip = 1,
+}) =>
+    children
+        .expand(
+          (item) sync* {
+            yield SizedBox(
+              width: widthGap,
+              height: heightGap,
+            );
+            yield item;
+          },
+        )
+        .skip(skip)
+        .toList();
diff --git a/example/lib/pages/split_button_page.dart b/example/lib/pages/split_button_page.dart
@@ -1,9 +1,18 @@
 import 'package:flutter/material.dart';
 import 'package:yaru/yaru.dart';
 
-class SplitButtonPage extends StatelessWidget {
+import '../common/space.dart';
+
+class SplitButtonPage extends StatefulWidget {
   const SplitButtonPage({super.key});
 
+  @override
+  State<SplitButtonPage> createState() => _SplitButtonPageState();
+}
+
+class _SplitButtonPageState extends State<SplitButtonPage> {
+  double width = 200.0;
+
   @override
   Widget build(BuildContext context) {
     final items = List.generate(
@@ -25,28 +34,51 @@ class SplitButtonPage extends StatelessWidget {
     return Center(
       child: Column(
         mainAxisSize: MainAxisSize.min,
-        children: [
-          YaruSplitButton(
-            onPressed: () => ScaffoldMessenger.of(context)
-                .showSnackBar(const SnackBar(content: Text('Main Action'))),
-            items: items,
-            child: const Text('Main Action'),
-          ),
-          const SizedBox(height: 10),
-          YaruSplitButton.filled(
-            onPressed: () => ScaffoldMessenger.of(context)
-                .showSnackBar(const SnackBar(content: Text('Main Action'))),
-            items: items,
-            child: const Text('Main Action'),
-          ),
-          const SizedBox(height: 10),
-          YaruSplitButton.outlined(
-            onPressed: () => ScaffoldMessenger.of(context)
-                .showSnackBar(const SnackBar(content: Text('Main Action'))),
-            items: items,
-            child: const Text('Main Action'),
-          ),
-        ],
+        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),
+              ),
+            ),
+            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'),
+            ),
+          ],
+        ),
       ),
     );
   }

diff --git a/lib/src/widgets/yaru_split_button.dart b/lib/src/widgets/yaru_split_button.dart
@@ -13,7 +13,7 @@ class YaruSplitButton extends StatelessWidget {
     this.onOptionsPressed,
     this.icon,
     this.radius,
-    this.menuWidth = menuDefaultWidth,
+    this.menuWidth,
   }) : _variant = _YaruSplitButtonVariant.elevated;
 
   const YaruSplitButton.filled({
@@ -24,7 +24,7 @@ class YaruSplitButton extends StatelessWidget {
     this.onOptionsPressed,
     this.icon,
     this.radius,
-    this.menuWidth = menuDefaultWidth,
+    this.menuWidth,
   }) : _variant = _YaruSplitButtonVariant.filled;
 
   const YaruSplitButton.outlined({
@@ -35,7 +35,7 @@ class YaruSplitButton extends StatelessWidget {
     this.onOptionsPressed,
     this.icon,
     this.radius,
-    this.menuWidth = menuDefaultWidth,
+    this.menuWidth,
   }) : _variant = _YaruSplitButtonVariant.outlined;
 
   final _YaruSplitButtonVariant _variant;
@@ -45,17 +45,10 @@ class YaruSplitButton extends StatelessWidget {
   final Widget? icon;
   final List<PopupMenuEntry<Object?>>? items;
   final double? radius;
-  final double menuWidth;
-
-  static const menuDefaultWidth = 148.0;
+  final double? menuWidth;
 
   @override
   Widget build(BuildContext context) {
-    assert(
-      items?.isNotEmpty == true && onOptionsPressed == null ||
-          items == null && onOptionsPressed != null,
-    );
-
     // TODO: fix common_themes to use a fixed size for buttons instead of fiddling around with padding
     // then we can rely on this size here
     const size = Size.square(36);
@@ -71,8 +64,12 @@ class YaruSplitButton extends StatelessWidget {
     );
 
     final dropdownShape = switch (_variant) {
-      _YaruSplitButtonVariant.outlined =>
-        const NonUniformRoundedRectangleBorder(hideLeftSide: true),
+      _YaruSplitButtonVariant.outlined => NonUniformRoundedRectangleBorder(
+          hideLeftSide: true,
+          borderRadius: BorderRadius.all(
+            defaultRadius,
+          ),
+        ),
       _ => RoundedRectangleBorder(
           borderRadius: BorderRadius.only(
             topRight: defaultRadius,
@@ -88,10 +85,12 @@ class YaruSplitButton extends StatelessWidget {
                   position: _menuPosition(context),
                   items: items!,
                   menuPadding: EdgeInsets.symmetric(vertical: defaultRadius.x),
-                  constraints: BoxConstraints(
-                    minWidth: menuWidth,
-                    maxWidth: menuWidth,
-                  ),
+                  constraints: menuWidth == null
+                      ? null
+                      : BoxConstraints(
+                          minWidth: menuWidth!,
+                          maxWidth: menuWidth!,
+                        ),
                 )
             : null);
 
@@ -168,7 +167,7 @@ class YaruSplitButton extends StatelessWidget {
           ancestor: overlay,
         ),
         bar.localToGlobal(
-          bar.size.bottomLeft(offset),
+          bar.size.bottomRight(offset),
           ancestor: overlay,
         ),
       ),