diff --git a/CHANGELOG.md b/CHANGELOG.md index 2cdfc315..3489415b 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/example/lib/main.dart b/example/lib/main.dart index 365ff996..1d81004f 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -116,20 +116,30 @@ class _DemoState extends State { ), ), 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, + ), + ), ), ), ], diff --git a/lib/macos_ui.dart b/lib/macos_ui.dart index 5a801b1d..aa493448 100644 --- a/lib/macos_ui.dart +++ b/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'; diff --git a/lib/src/labels/label.dart b/lib/src/labels/label.dart new file mode 100644 index 00000000..84287d4c --- /dev/null +++ b/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!, + ]); + } +} diff --git a/lib/src/library.dart b/lib/src/library.dart index 95f2ed1d..381a38b4 100644 --- a/lib/src/library.dart +++ b/lib/src/library.dart @@ -18,5 +18,6 @@ export 'package:flutter/material.dart' Scrollbar, VerticalDivider, Divider, + SelectableText, kElevationToShadow; export 'package:flutter/widgets.dart';