Version 0.1.1

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [0.1.1]
+* Implemented `Label` ([#61](https://github.com/GroovinChip/macos_ui/issues/61))
+* Capacity Indicator now works as expected ([#49](https://github.com/GroovinChip/macos_ui/issues/49))
+* Clear button is now aligned to text ([#82](https://github.com/GroovinChip/macos_ui/issues/82))
+
 ## [0.1.0]
 * pub.dev release
 
@@ -12,7 +17,7 @@
 * Implement `TextField`
 
 ## [0.0.10]
-* Revamp `Scaffold` [#26] (https://github.com/GroovinChip/macos_ui/issues/26)
+* Revamp `Scaffold` [#26](https://github.com/GroovinChip/macos_ui/issues/26)
 
 ## [0.0.9+1]
 * `CapacityIndicator` colors can now be set on its constructor

example/lib/main.dart

@@ -100,7 +100,10 @@ class _DemoState extends State<Demo> {
                     padding: const EdgeInsets.symmetric(horizontal: 8.0),
                     child: TextField(
                       prefix: Padding(
-                        padding: const EdgeInsets.symmetric(horizontal: 4.0),
+                        padding: const EdgeInsets.symmetric(
+                          horizontal: 4.0,
+                          vertical: 2.0,
+                        ),
                         child: Icon(CupertinoIcons.search),
                       ),
                       placeholder: 'Type some text here',
@@ -113,20 +116,30 @@ class _DemoState extends State<Demo> {
                     ),
                   ),
                   const SizedBox(height: 20),
-                  Padding(
-                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
-                    child: TextField.borderless(
-                      prefix: Padding(
-                        padding: const EdgeInsets.symmetric(horizontal: 4.0),
-                        child: Icon(CupertinoIcons.search),
-                      ),
-                      placeholder: 'Type some text here',
+                  Label(
+                    icon: Icon(
+                      CupertinoIcons.tag,
+                      color: CupertinoColors.activeBlue,
+                    ),
+                    text: SelectableText('A borderless textfield: '),
+                    child: Expanded(
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                        child: TextField.borderless(
+                          prefix: Padding(
+                            padding:
+                                const EdgeInsets.symmetric(horizontal: 4.0),
+                            child: Icon(CupertinoIcons.search),
+                          ),
+                          placeholder: 'Type some text here',
 
-                      /// If both suffix and clear button mode is provided,
-                      /// suffix will override the clear button.
-                      suffix: Text('SUFFIX'),
-                      // clearButtonMode: OverlayVisibilityMode.always,
-                      maxLines: null,
+                          /// If both suffix and clear button mode is provided,
+                          /// suffix will override the clear button.
+                          suffix: Text('SUFFIX'),
+                          // clearButtonMode: OverlayVisibilityMode.always,
+                          maxLines: null,
+                        ),
+                      ),
                     ),
                   ),
                 ],

example/pubspec.lock

@@ -73,7 +73,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.1.0"
+    version: "0.1.1"
   matcher:
     dependency: transitive
     description:

lib/macos_ui.dart

@@ -22,6 +22,7 @@ export 'src/indicators/capacity_indicators.dart';
 export 'src/indicators/progress_indicators.dart';
 export 'src/indicators/rating_indicator.dart';
 export 'src/indicators/relevance_indicator.dart';
+export 'src/labels/label.dart';
 export 'src/labels/tooltip.dart';
 export 'src/layout/content_area.dart';
 export 'src/layout/resizable_pane.dart';

lib/src/fields/text_field.dart

@@ -1089,7 +1089,7 @@ class _TextFieldState extends State<TextField>
       valueListenable: _effectiveController,
       child: editableText,
       builder: (BuildContext context, TextEditingValue? text, Widget? child) {
-        return Row(children: <Widget>[
+        return Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
           // Insert a prefix at the front if the prefix visibility mode matches
           // the current text state.
           if (_showPrefixWidget(text!)) widget.prefix!,
@@ -1137,7 +1137,10 @@ class _TextFieldState extends State<TextField>
                       }
                     : null,
                 child: Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 6.0),
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 6.0,
+                    vertical: 4.0,
+                  ),
                   child: Icon(
                     CupertinoIcons.clear_thick_circled,
                     size: 18.0,

lib/src/indicators/capacity_indicators.dart

@@ -90,12 +90,9 @@ class CapacityIndicator extends StatelessWidget {
     properties.add(StringProperty('semanticLabel', semanticLabel));
   }
 
-  void _handleUpdate(Offset lp) {
-    double value = discrete ? lp.dx / splits : lp.dx;
-    if (value.isNegative)
-      value = 0;
-    else if (value > 100) value = 100;
-    onChanged?.call(value);
+  void _handleUpdate(Offset lp, double width) {
+    double value = (lp.dx / width) * splits;
+    onChanged?.call(value.clamp(0.0, 100.0));
   }
 
   @override
@@ -106,45 +103,59 @@ class CapacityIndicator extends StatelessWidget {
       value: value.toStringAsFixed(2),
       child: Container(
         constraints: BoxConstraints(minWidth: _kCapacityIndicatorMinWidth),
-        child: GestureDetector(
-          onPanStart: (event) => _handleUpdate(event.localPosition),
-          onPanUpdate: (event) => _handleUpdate(event.localPosition),
-          onPanDown: (event) => _handleUpdate(event.localPosition),
-          child: discrete
-              ? LayoutBuilder(builder: (context, consts) {
-                  double width = consts.biggest.width;
-                  if (width.isInfinite) width = 100;
-                  final splitWidth = width / splits;
-                  final fillToIndex = (100 - -(value - 100)) * (splits / 10);
-                  return SizedBox(
-                    width: width,
-                    child: Row(
-                      children: List.generate(splits, (index) {
-                        return Container(
-                          padding: EdgeInsets.only(
-                            right: index == splits - 1 ? 0 : 2.0,
-                          ),
-                          width: splitWidth,
-                          child: CapacityIndicatorCell(
-                            value: value > 0 && fillToIndex / 10 >= index
-                                ? 100
-                                : 0,
-                            backgroundColor: backgroundColor,
-                            borderColor: borderColor,
-                            color: color,
-                          ),
-                        );
-                      }),
-                    ),
-                  );
-                })
-              : CapacityIndicatorCell(
+        child: LayoutBuilder(builder: (context, consts) {
+          double width = consts.maxWidth;
+          if (width.isInfinite) width = 100;
+          final splitWidth = width / splits;
+          if (discrete) {
+            final fillToIndex = value / splits - 1;
+            return SizedBox(
+              width: width,
+              child: GestureDetector(
+                onPanStart: (event) =>
+                    _handleUpdate(event.localPosition, splitWidth),
+                onPanUpdate: (event) =>
+                    _handleUpdate(event.localPosition, splitWidth),
+                onPanDown: (event) =>
+                    _handleUpdate(event.localPosition, splitWidth),
+                child: Row(
+                  children: List.generate(splits, (index) {
+                    return Container(
+                      padding: EdgeInsets.only(
+                        right: index == splits - 1 ? 0 : 2.0,
+                      ),
+                      width: splitWidth,
+                      child: CapacityIndicatorCell(
+                        value: value > 0 && fillToIndex >= index ? 100 : 0,
+                        backgroundColor: backgroundColor,
+                        borderColor: borderColor,
+                        color: color,
+                      ),
+                    );
+                  }),
+                ),
+              ),
+            );
+          } else {
+            return SizedBox(
+              width: width,
+              child: GestureDetector(
+                onPanStart: (event) =>
+                    _handleUpdate(event.localPosition, splitWidth),
+                onPanUpdate: (event) =>
+                    _handleUpdate(event.localPosition, splitWidth),
+                onPanDown: (event) =>
+                    _handleUpdate(event.localPosition, splitWidth),
+                child: CapacityIndicatorCell(
                   value: value,
                   backgroundColor: backgroundColor,
                   borderColor: borderColor,
                   color: color,
                 ),
-        ),
+              ),
+            );
+          }
+        }),
       ),
     );
   }

lib/src/labels/label.dart

@@ -0,0 +1,55 @@
+import 'package:macos_ui/macos_ui.dart';
+import 'package:macos_ui/src/library.dart';
+
+/// A label is a static text field that describes an onscreen interface
+/// element or provides a short message. Although people can’t edit labels,
+/// they can sometimes copy label contents.
+///
+/// ![Label Example](https://developer.apple.com/design/human-interface-guidelines/macos/images/labels.png)
+class Label extends StatelessWidget {
+  /// Creates a label.
+  const Label({
+    Key? key,
+    this.icon,
+    required this.text,
+    this.child,
+  }) : super(key: key);
+
+  /// The icon used by the label. If non-null, it's rendered horizontally
+  /// before [text].
+  ///
+  /// Usually an [Icon].
+  final Widget? icon;
+
+  /// The text of the label. Usually a [Text]. To make it selectable, use
+  /// [SelectableText] instead
+  final Widget text;
+
+  /// The widget at the right of [text].
+  final Widget? child;
+
+  @override
+  Widget build(BuildContext context) {
+    assert(debugCheckHasMacosTheme(context));
+    final theme = MacosTheme.of(context);
+    final text = DefaultTextStyle(
+      style: (theme.typography?.body ?? TextStyle()).copyWith(
+        color: DynamicColorX.macosResolve(CupertinoColors.label, context),
+        fontWeight: FontWeight.w500,
+      ),
+      child: this.text,
+    );
+    return Row(mainAxisSize: MainAxisSize.min, children: [
+      if (icon != null)
+        Padding(
+          padding: EdgeInsets.only(right: 6),
+          child: IconTheme(
+            data: IconThemeData(size: theme.typography?.body?.fontSize ?? 24),
+            child: icon!,
+          ),
+        ),
+      text,
+      if (child != null) child!,
+    ]);
+  }
+}

lib/src/library.dart

@@ -18,5 +18,6 @@ export 'package:flutter/material.dart'
         Scrollbar,
         VerticalDivider,
         Divider,
+        SelectableText,
         kElevationToShadow;
 export 'package:flutter/widgets.dart';

pubspec.yaml

@@ -1,6 +1,6 @@
 name: macos_ui
 description: Flutter widgets and themes implementing the current macOS design language.
-version: 0.1.0
+version: 0.1.1
 homepage: 'https://github.com/GroovinChip/macos_ui'
 
 environment: