Implement Label

CHANGELOG.md

@@ -1,4 +1,5 @@
 ## [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))
 

example/lib/main.dart

@@ -116,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,
+                        ),
+                      ),
                     ),
                   ),
                 ],

lib/macos_ui.dart

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

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';