From 4576df3e2b4b8ad17e7836f4932e4cbcc1046fed Mon Sep 17 00:00:00 2001 From: harshvsb1105 Date: Sat, 24 Apr 2021 11:10:13 +0530 Subject: [PATCH 1/5] Implemented Help Button --- example/lib/main.dart | 3 + lib/macos_ui.dart | 17 +- lib/src/buttons/help_button.dart | 209 +++++++++++++++++++++++++ lib/src/buttons/help_button_theme.dart | 87 ++++++++++ lib/src/styles/macos_theme_data.dart | 17 +- lib/src/util.dart | 9 ++ 6 files changed, 333 insertions(+), 9 deletions(-) create mode 100644 lib/src/buttons/help_button.dart create mode 100644 lib/src/buttons/help_button_theme.dart diff --git a/example/lib/main.dart b/example/lib/main.dart index 30d4d2b5..209bebe2 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -60,6 +60,9 @@ class _DemoState extends State { value: value, onChanged: (v) => setState(() => value = v), ), + HelpButton( + onPressed: (){}, + ), Padding( padding: const EdgeInsets.all(8.0), child: CapacityIndicator( diff --git a/lib/macos_ui.dart b/lib/macos_ui.dart index e00752dc..09633c90 100644 --- a/lib/macos_ui.dart +++ b/lib/macos_ui.dart @@ -6,13 +6,13 @@ export 'package:flutter/cupertino.dart' show CupertinoColors, CupertinoDynamicColor, CupertinoIcons; export 'package:flutter/material.dart' show - Brightness, - ThemeMode, - Feedback, - DefaultMaterialLocalizations, - PageTransitionsBuilder, - FlutterLogo, - CircleAvatar; + Brightness, + ThemeMode, + Feedback, + DefaultMaterialLocalizations, + PageTransitionsBuilder, + FlutterLogo, + CircleAvatar; export 'package:flutter/cupertino.dart' show CupertinoColors, CupertinoDynamicColor, CupertinoIcons; @@ -45,3 +45,6 @@ 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/buttons/help_button.dart'; +export 'src/buttons/help_button_theme.dart'; + diff --git a/lib/src/buttons/help_button.dart b/lib/src/buttons/help_button.dart new file mode 100644 index 00000000..f36fa7aa --- /dev/null +++ b/lib/src/buttons/help_button.dart @@ -0,0 +1,209 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter/cupertino.dart' + show CupertinoColors, CupertinoDynamicColor, CupertinoIcons; +import '../../macos_ui.dart'; + + +/// A macOS-style button. +class HelpButton extends StatefulWidget { + const HelpButton({ + Key? key, + this.color, + this.disabledColor, + this.onPressed, + this.pressedOpacity = 0.4, + this.alignment = Alignment.center, + }) : assert(pressedOpacity == null || + (pressedOpacity >= 0.0 && pressedOpacity <= 1.0)), + super(key: key); + + /// The color of the button's background. + final Color? color; + + /// The color of the button's background when the button is disabled. + /// + /// Ignored if the [HelpButton] doesn't also have a [color]. + /// + /// Defaults to [CupertinoColors.quaternarySystemFill] when [color] is + /// specified. Must not be null. + final Color? disabledColor; + + /// The callback that is called when the button is tapped or otherwise activated. + /// + /// If this is set to null, the button will be disabled. + final VoidCallback? onPressed; + + /// The opacity that the button will fade to when it is pressed. + /// The button will have an opacity of 1.0 when it is not pressed. + /// + /// This defaults to 0.4. If null, opacity will not change on pressed if using + /// your own custom effects is desired. + final double? pressedOpacity; + + /// The alignment of the button's [child]. + /// + /// Typically buttons are sized to be just big enough to contain the child and its + /// [padding]. If the button's size is constrained to a fixed size, for example by + /// enclosing it with a [SizedBox], this property defines how the child is aligned + /// within the available space. + /// + /// Always defaults to [Alignment.center]. + final AlignmentGeometry alignment; + + /// Whether the button is enabled or disabled. Buttons are disabled by default. To + /// enable a button, set its [onPressed] property to a non-null value. + bool get enabled => onPressed != null; + + @override + _HelpButtonState createState() => _HelpButtonState(); +} + +class _HelpButtonState extends State + with SingleTickerProviderStateMixin { + // Eyeballed values. Feel free to tweak. + static const Duration kFadeOutDuration = Duration(milliseconds: 10); + static const Duration kFadeInDuration = Duration(milliseconds: 100); + final Tween _opacityTween = Tween(begin: 1.0); + + late AnimationController _animationController; + late Animation _opacityAnimation; + + @override + void initState() { + super.initState(); + _animationController = AnimationController( + duration: const Duration(milliseconds: 200), + value: 0.0, + vsync: this, + ); + _opacityAnimation = _animationController + .drive(CurveTween(curve: Curves.decelerate)) + .drive(_opacityTween); + _setTween(); + } + + @override + void didUpdateWidget(HelpButton old) { + super.didUpdateWidget(old); + _setTween(); + } + + void _setTween() { + _opacityTween.end = widget.pressedOpacity ?? 1.0; + } + + @override + void dispose() { + _animationController.dispose(); + super.dispose(); + } + + bool _buttonHeldDown = false; + + void _handleTapDown(TapDownDetails event) { + if (!_buttonHeldDown) { + _buttonHeldDown = true; + _animate(); + } + } + + void _handleTapUp(TapUpDetails event) { + if (_buttonHeldDown) { + _buttonHeldDown = false; + _animate(); + } + } + + void _handleTapCancel() { + if (_buttonHeldDown) { + _buttonHeldDown = false; + _animate(); + } + } + + void _animate() { + if (_animationController.isAnimating) return; + final bool wasHeldDown = _buttonHeldDown; + final TickerFuture ticker = _buttonHeldDown + ? _animationController.animateTo(1.0, duration: kFadeOutDuration) + : _animationController.animateTo(0.0, duration: kFadeInDuration); + ticker.then((void value) { + if (mounted && wasHeldDown != _buttonHeldDown) _animate(); + }); + } + + + @override + Widget build(BuildContext context) { + + final bool enabled = widget.enabled; + final MacosThemeData theme = MacosTheme.of(context); + final Color? backgroundColor = widget.color == null + ? theme.helpButtonTheme.color + : CupertinoDynamicColor.maybeResolve(widget.color, context); + + final Color? disabledColor = widget.disabledColor == null + ? theme.helpButtonTheme.disabledColor + : CupertinoDynamicColor.maybeResolve(widget.disabledColor, context); + + final Color? foregroundColor = widget.enabled + ? iconLuminance(backgroundColor!, theme.brightness!.isDark) + : theme.brightness!.isDark + ? Color.fromRGBO(255, 255, 255, 0.25) + : Color.fromRGBO(0, 0, 0, 0.25); + + return GestureDetector( + behavior: HitTestBehavior.opaque, + onTapDown: enabled ? _handleTapDown : null, + onTapUp: enabled ? _handleTapUp : null, + onTapCancel: enabled ? _handleTapCancel : null, + onTap: widget.onPressed, + child: Semantics( + button: true, + child: ConstrainedBox( + constraints: BoxConstraints( + minWidth: 20, + minHeight: 20, + ), + child: FadeTransition( + opacity: _opacityAnimation, + child: DecoratedBox( + decoration: BoxDecoration( + shape: BoxShape.circle, + color: !enabled + ? CupertinoDynamicColor.resolve(disabledColor!, context) + : backgroundColor, + boxShadow: [ + BoxShadow( + color: Color.fromRGBO(0, 0, 0, 0.1), + offset: Offset(-0.1, -0.1), + ), + BoxShadow( + color: Color.fromRGBO(0, 0, 0, 0.1), + offset: Offset(0.1, 0.1), + ), + BoxShadow( + color: CupertinoColors.tertiarySystemFill, + offset: Offset(0, 0), + ), + ],), + child: Padding( + padding: EdgeInsets.all(8), + child: Align( + alignment: widget.alignment, + widthFactor: 1.0, + heightFactor: 1.0, + child: Icon( + CupertinoIcons.question, + color: foregroundColor, + ), + ), + ), + ), + ), + ), + ), + ); + } +} diff --git a/lib/src/buttons/help_button_theme.dart b/lib/src/buttons/help_button_theme.dart new file mode 100644 index 00000000..6d5919e7 --- /dev/null +++ b/lib/src/buttons/help_button_theme.dart @@ -0,0 +1,87 @@ +import 'package:flutter/foundation.dart'; +import 'package:macos_ui/macos_ui.dart'; + +/// Overrides the default style of its [HelpButton] descendants. +/// +/// See also: +/// +/// * [HelpButtonThemeData], which is used to configure this theme. +class HelpButtonTheme extends InheritedTheme { + /// Create a [HelpButtonTheme]. + /// + /// The [data] parameter must not be null. + const HelpButtonTheme({ + Key? key, + required this.data, + required Widget child, + }) : super(key: key, child: child); + + /// The configuration of this theme. + final HelpButtonThemeData data; + + /// The closest instance of this class that encloses the given context. + /// + /// If there is no enclosing [HelpButtonTheme] widget, then + /// [MacosThemeData.helpButtonTheme] is used. + /// + /// Typical usage is as follows: + /// + /// ```dart + /// HelpButtonTheme theme = HelpButtonTheme.of(context); + /// ``` + static HelpButtonThemeData of(BuildContext context) { + final HelpButtonTheme? buttonTheme = + context.dependOnInheritedWidgetOfExactType(); + return buttonTheme?.data ?? MacosTheme.of(context).helpButtonTheme; + } + + @override + Widget wrap(BuildContext context, Widget child) { + return HelpButtonTheme(data: data, child: child); + } + + @override + bool updateShouldNotify(HelpButtonTheme oldWidget) => data != oldWidget.data; +} + +/// A style that overrides the default appearance of +/// [HelpButton]s when it's used with [HelpButtonTheme] or with the +/// overall [MacosTheme]'s [MacosThemeData.helpButtonTheme]. +/// +/// See also: +/// +/// * [HelpButtonTheme], the theme which is configured with this class. +/// * [MacosThemeData.helpButtonTheme], which can be used to override the default +/// style for [HelpButton]s below the overall [MacosTheme]. +class HelpButtonThemeData with Diagnosticable { + /// Creates a [HelpButtonThemeData]. + /// + /// The [style] may be null. + const HelpButtonThemeData({ + required this.color, + required this.disabledColor, + }); + + /// The default background color for [HelpButton] + final Color color; + + /// The default disabled color for [HelpButton] + final Color disabledColor; + + HelpButtonThemeData copyWith(HelpButtonThemeData? themeData) { + if (themeData == null) { + return this; + } + return HelpButtonThemeData( + color: themeData.color, + disabledColor: themeData.disabledColor, + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties.add(DiagnosticsProperty('color', color)); + properties.add(DiagnosticsProperty('disabledColor', disabledColor)); + } +} diff --git a/lib/src/styles/macos_theme_data.dart b/lib/src/styles/macos_theme_data.dart index 2f5e46aa..5091515e 100644 --- a/lib/src/styles/macos_theme_data.dart +++ b/lib/src/styles/macos_theme_data.dart @@ -1,6 +1,4 @@ import 'package:flutter/foundation.dart'; -import 'package:macos_ui/src/buttons/push_button_theme.dart'; - import '../../macos_ui.dart'; /// Styling specifications for a [MacosTheme]. @@ -23,6 +21,7 @@ class MacosThemeData with Diagnosticable { Duration? mediumAnimationDuration, Typography? typography, PushButtonThemeData? pushButtonTheme, + HelpButtonThemeData? helpButtonTheme, }) { final Brightness _brightness = brightness ?? Brightness.light; final bool isDark = _brightness == Brightness.dark; @@ -42,6 +41,14 @@ class MacosThemeData with Diagnosticable { ? Color.fromRGBO(255, 255, 255, 0.1) : Color.fromRGBO(244, 245, 245, 1.0), ); + helpButtonTheme ??= HelpButtonThemeData( + color: isDark + ? Color.fromRGBO(255, 255, 255, 0.1) + : Color.fromRGBO(244, 245, 245, 1.0), + disabledColor: isDark + ? Color.fromRGBO(255, 255, 255, 0.1) + : Color.fromRGBO(244, 245, 245, 1.0), + ); return MacosThemeData._raw( brightness: _brightness, @@ -51,6 +58,7 @@ class MacosThemeData with Diagnosticable { mediumAnimationDuration: mediumAnimationDuration, typography: typography, pushButtonTheme: pushButtonTheme, + helpButtonTheme: helpButtonTheme, ); } @@ -62,6 +70,7 @@ class MacosThemeData with Diagnosticable { required this.mediumAnimationDuration, required this.typography, required this.pushButtonTheme, + required this.helpButtonTheme, }); // todo: documentation @@ -99,6 +108,9 @@ class MacosThemeData with Diagnosticable { /// The default style for [PushButton]s below the overall [MacosTheme]. final PushButtonThemeData pushButtonTheme; + /// The default style for [HelpButton]s below the overall [MacosTheme]. + final HelpButtonThemeData helpButtonTheme; + MacosThemeData resolveFrom(BuildContext context) { /*Color? convertColor(Color? color) => CupertinoDynamicColor.maybeResolve(color, context);*/ @@ -111,6 +123,7 @@ class MacosThemeData with Diagnosticable { mediumAnimationDuration: mediumAnimationDuration, typography: typography, pushButtonTheme: pushButtonTheme, + helpButtonTheme: helpButtonTheme, ); } } diff --git a/lib/src/util.dart b/lib/src/util.dart index 3068cedf..68c91df5 100644 --- a/lib/src/util.dart +++ b/lib/src/util.dart @@ -17,3 +17,12 @@ Color textLuminance(Color backgroundColor) { ? CupertinoColors.black : CupertinoColors.white; } + +Color iconLuminance(Color backgroundColor, bool isDark ) { + return !isDark ? backgroundColor.computeLuminance() > 0.5 + ? CupertinoColors.black + : CupertinoColors.white + : backgroundColor.computeLuminance() < 0.5 + ? CupertinoColors.black + : CupertinoColors.white; +} \ No newline at end of file From a5d974a96772cdb6fd51f954eec95050691c8eff Mon Sep 17 00:00:00 2001 From: harshvsb1105 Date: Mon, 26 Apr 2021 10:32:42 +0530 Subject: [PATCH 2/5] Implemented Help Button --- CHANGELOG.md | 3 ++ example/lib/main.dart | 2 +- lib/macos_ui.dart | 46 ++++++++++++------------ lib/src/buttons/help_button.dart | 49 +++++++++++++------------- lib/src/buttons/help_button_theme.dart | 2 +- lib/src/buttons/switch.dart | 3 +- lib/src/styles/macos_theme_data.dart | 1 + lib/src/util.dart | 15 ++++---- 8 files changed, 61 insertions(+), 60 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e7ac639d..17149b06 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +## [0.0.8] +* Implemented 'HelpButton' + ## [0.0.7] * Implemented `Checkbox` * Implemented `RadioButton` diff --git a/example/lib/main.dart b/example/lib/main.dart index 209bebe2..bab1f663 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -61,7 +61,7 @@ class _DemoState extends State { onChanged: (v) => setState(() => value = v), ), HelpButton( - onPressed: (){}, + onPressed: () {}, ), Padding( padding: const EdgeInsets.all(8.0), diff --git a/lib/macos_ui.dart b/lib/macos_ui.dart index 09633c90..ac14294b 100644 --- a/lib/macos_ui.dart +++ b/lib/macos_ui.dart @@ -1,50 +1,48 @@ library macos_ui; -/// todo: package-level docs -export 'package:flutter/widgets.dart'; export 'package:flutter/cupertino.dart' show CupertinoColors, CupertinoDynamicColor, CupertinoIcons; -export 'package:flutter/material.dart' - show - Brightness, - ThemeMode, - Feedback, - DefaultMaterialLocalizations, - PageTransitionsBuilder, - FlutterLogo, - CircleAvatar; - export 'package:flutter/cupertino.dart' show CupertinoColors, CupertinoDynamicColor, CupertinoIcons; +export 'package:flutter/material.dart' + show + Brightness, + ThemeMode, + Feedback, + DefaultMaterialLocalizations, + PageTransitionsBuilder, + FlutterLogo, + CircleAvatar; +/// todo: package-level docs +export 'package:flutter/widgets.dart'; +export 'src/buttons/checkbox.dart'; +export 'src/buttons/help_button.dart'; +export 'src/buttons/help_button_theme.dart'; export 'src/buttons/push_button.dart'; export 'src/buttons/push_button_theme.dart'; +export 'src/buttons/radio_button.dart'; +export 'src/buttons/switch.dart'; export 'src/buttons/switch.dart'; export 'src/buttons/switch.dart'; export 'src/buttons/switch.dart'; export 'src/buttons/switch.dart'; +export 'src/indicators/capacity_indicators.dart'; +export 'src/indicators/progress_indicators.dart'; export 'src/indicators/progress_indicators.dart'; export 'src/indicators/progress_indicators.dart'; +export 'src/indicators/rating_indicator.dart'; +export 'src/indicators/relevance_indicator.dart'; +export 'src/layout/scaffold.dart'; export 'src/layout/scaffold.dart'; export 'src/layout/scaffold.dart'; export 'src/layout/scaffold.dart'; export 'src/macos_app.dart'; export 'src/macos_app.dart'; +export 'src/styles/colors.dart'; export 'src/styles/macos_theme.dart'; export 'src/styles/macos_theme_data.dart'; export 'src/styles/typography.dart'; -export 'src/buttons/radio_button.dart'; -export 'src/buttons/checkbox.dart'; -export 'src/layout/scaffold.dart'; -export 'src/buttons/switch.dart'; export 'src/styles/typography.dart'; -export 'src/styles/colors.dart'; export 'src/util.dart'; export 'src/util.dart'; -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/buttons/help_button.dart'; -export 'src/buttons/help_button_theme.dart'; - diff --git a/lib/src/buttons/help_button.dart b/lib/src/buttons/help_button.dart index f36fa7aa..2093714c 100644 --- a/lib/src/buttons/help_button.dart +++ b/lib/src/buttons/help_button.dart @@ -1,9 +1,9 @@ -import 'package:flutter/foundation.dart'; -import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart' show CupertinoColors, CupertinoDynamicColor, CupertinoIcons; -import '../../macos_ui.dart'; +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import '../../macos_ui.dart'; /// A macOS-style button. class HelpButton extends StatefulWidget { @@ -133,10 +133,8 @@ class _HelpButtonState extends State }); } - @override Widget build(BuildContext context) { - final bool enabled = widget.enabled; final MacosThemeData theme = MacosTheme.of(context); final Color? backgroundColor = widget.color == null @@ -150,8 +148,8 @@ class _HelpButtonState extends State final Color? foregroundColor = widget.enabled ? iconLuminance(backgroundColor!, theme.brightness!.isDark) : theme.brightness!.isDark - ? Color.fromRGBO(255, 255, 255, 0.25) - : Color.fromRGBO(0, 0, 0, 0.25); + ? Color.fromRGBO(255, 255, 255, 0.25) + : Color.fromRGBO(0, 0, 0, 0.25); return GestureDetector( behavior: HitTestBehavior.opaque, @@ -170,24 +168,25 @@ class _HelpButtonState extends State opacity: _opacityAnimation, child: DecoratedBox( decoration: BoxDecoration( - shape: BoxShape.circle, - color: !enabled - ? CupertinoDynamicColor.resolve(disabledColor!, context) - : backgroundColor, - boxShadow: [ - BoxShadow( - color: Color.fromRGBO(0, 0, 0, 0.1), - offset: Offset(-0.1, -0.1), - ), - BoxShadow( - color: Color.fromRGBO(0, 0, 0, 0.1), - offset: Offset(0.1, 0.1), - ), - BoxShadow( - color: CupertinoColors.tertiarySystemFill, - offset: Offset(0, 0), - ), - ],), + shape: BoxShape.circle, + color: !enabled + ? CupertinoDynamicColor.resolve(disabledColor!, context) + : backgroundColor, + boxShadow: [ + BoxShadow( + color: Color.fromRGBO(0, 0, 0, 0.1), + offset: Offset(-0.1, -0.1), + ), + BoxShadow( + color: Color.fromRGBO(0, 0, 0, 0.1), + offset: Offset(0.1, 0.1), + ), + BoxShadow( + color: CupertinoColors.tertiarySystemFill, + offset: Offset(0, 0), + ), + ], + ), child: Padding( padding: EdgeInsets.all(8), child: Align( diff --git a/lib/src/buttons/help_button_theme.dart b/lib/src/buttons/help_button_theme.dart index 6d5919e7..961cfe19 100644 --- a/lib/src/buttons/help_button_theme.dart +++ b/lib/src/buttons/help_button_theme.dart @@ -31,7 +31,7 @@ class HelpButtonTheme extends InheritedTheme { /// ``` static HelpButtonThemeData of(BuildContext context) { final HelpButtonTheme? buttonTheme = - context.dependOnInheritedWidgetOfExactType(); + context.dependOnInheritedWidgetOfExactType(); return buttonTheme?.data ?? MacosTheme.of(context).helpButtonTheme; } diff --git a/lib/src/buttons/switch.dart b/lib/src/buttons/switch.dart index 78bbc656..9c3270a3 100644 --- a/lib/src/buttons/switch.dart +++ b/lib/src/buttons/switch.dart @@ -1,8 +1,7 @@ +import 'package:flutter/cupertino.dart' as c; import 'package:flutter/gestures.dart'; import 'package:macos_ui/macos_ui.dart'; -import 'package:flutter/cupertino.dart' as c; - /// A switch is a visual toggle between two mutually exclusive /// states — on and off. A switch shows that it's on when the /// accent color is visible and off when the switch appears colorless. diff --git a/lib/src/styles/macos_theme_data.dart b/lib/src/styles/macos_theme_data.dart index 5091515e..0218022e 100644 --- a/lib/src/styles/macos_theme_data.dart +++ b/lib/src/styles/macos_theme_data.dart @@ -1,4 +1,5 @@ import 'package:flutter/foundation.dart'; + import '../../macos_ui.dart'; /// Styling specifications for a [MacosTheme]. diff --git a/lib/src/util.dart b/lib/src/util.dart index 68c91df5..acd35f86 100644 --- a/lib/src/util.dart +++ b/lib/src/util.dart @@ -18,11 +18,12 @@ Color textLuminance(Color backgroundColor) { : CupertinoColors.white; } -Color iconLuminance(Color backgroundColor, bool isDark ) { - return !isDark ? backgroundColor.computeLuminance() > 0.5 - ? CupertinoColors.black - : CupertinoColors.white +Color iconLuminance(Color backgroundColor, bool isDark) { + return !isDark + ? backgroundColor.computeLuminance() > 0.5 + ? CupertinoColors.black + : CupertinoColors.white : backgroundColor.computeLuminance() < 0.5 - ? CupertinoColors.black - : CupertinoColors.white; -} \ No newline at end of file + ? CupertinoColors.black + : CupertinoColors.white; +} From c681a1d849907a7e480f93366590450be235db78 Mon Sep 17 00:00:00 2001 From: harshvsb1105 Date: Wed, 28 Apr 2021 10:45:02 +0530 Subject: [PATCH 3/5] Implemented Help Button --- lib/src/buttons/help_button.dart | 30 ++++++++++++++------------ lib/src/buttons/help_button_theme.dart | 4 ++-- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/lib/src/buttons/help_button.dart b/lib/src/buttons/help_button.dart index 2093714c..42d7f0b1 100644 --- a/lib/src/buttons/help_button.dart +++ b/lib/src/buttons/help_button.dart @@ -1,19 +1,21 @@ -import 'package:flutter/cupertino.dart' - show CupertinoColors, CupertinoDynamicColor, CupertinoIcons; import 'package:flutter/foundation.dart'; -import 'package:flutter/material.dart'; - import '../../macos_ui.dart'; -/// A macOS-style button. +/// A help button appears within a view and opens app-specific help documentation when clicked. +/// For help documentation creation guidance, see Help. All help buttons are circular, +/// consistently sized buttons that contain a question mark icon. Whenever possible, +/// open a help topic related to the current context. For example, +/// the Rules pane of Mail preferences includes a help button. +/// When clicked, it opens directly to a Rules preferences help topic. class HelpButton extends StatefulWidget { + ///pressedOpacity, if non-null, must be in the range if 0.0 to 1.0 const HelpButton({ Key? key, this.color, this.disabledColor, this.onPressed, this.pressedOpacity = 0.4, - this.alignment = Alignment.center, + this.alignment = Alignment.center, this.semanticLabel, }) : assert(pressedOpacity == null || (pressedOpacity >= 0.0 && pressedOpacity <= 1.0)), super(key: key); @@ -26,7 +28,7 @@ class HelpButton extends StatefulWidget { /// Ignored if the [HelpButton] doesn't also have a [color]. /// /// Defaults to [CupertinoColors.quaternarySystemFill] when [color] is - /// specified. Must not be null. + /// specified. final Color? disabledColor; /// The callback that is called when the button is tapped or otherwise activated. @@ -51,6 +53,9 @@ class HelpButton extends StatefulWidget { /// Always defaults to [Alignment.center]. final AlignmentGeometry alignment; + ///Provides a textual description of the button. + final String? semanticLabel; + /// Whether the button is enabled or disabled. Buttons are disabled by default. To /// enable a button, set its [onPressed] property to a non-null value. bool get enabled => onPressed != null; @@ -137,13 +142,9 @@ class _HelpButtonState extends State Widget build(BuildContext context) { final bool enabled = widget.enabled; final MacosThemeData theme = MacosTheme.of(context); - final Color? backgroundColor = widget.color == null - ? theme.helpButtonTheme.color - : CupertinoDynamicColor.maybeResolve(widget.color, context); + final Color? backgroundColor = DynamicColorX.macosResolve(widget.color ?? theme.helpButtonTheme.color, context); - final Color? disabledColor = widget.disabledColor == null - ? theme.helpButtonTheme.disabledColor - : CupertinoDynamicColor.maybeResolve(widget.disabledColor, context); + final Color? disabledColor = DynamicColorX.macosResolve(widget.disabledColor ?? theme.helpButtonTheme.disabledColor, context); final Color? foregroundColor = widget.enabled ? iconLuminance(backgroundColor!, theme.brightness!.isDark) @@ -158,6 +159,7 @@ class _HelpButtonState extends State onTapCancel: enabled ? _handleTapCancel : null, onTap: widget.onPressed, child: Semantics( + label: widget.semanticLabel, button: true, child: ConstrainedBox( constraints: BoxConstraints( @@ -170,7 +172,7 @@ class _HelpButtonState extends State decoration: BoxDecoration( shape: BoxShape.circle, color: !enabled - ? CupertinoDynamicColor.resolve(disabledColor!, context) + ? DynamicColorX.macosResolve(disabledColor!, context) : backgroundColor, boxShadow: [ BoxShadow( diff --git a/lib/src/buttons/help_button_theme.dart b/lib/src/buttons/help_button_theme.dart index 961cfe19..6d1b0acb 100644 --- a/lib/src/buttons/help_button_theme.dart +++ b/lib/src/buttons/help_button_theme.dart @@ -81,7 +81,7 @@ class HelpButtonThemeData with Diagnosticable { @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties.add(DiagnosticsProperty('color', color)); - properties.add(DiagnosticsProperty('disabledColor', disabledColor)); + properties.add(ColorProperty('color', color)); + properties.add(ColorProperty('disabledColor', disabledColor)); } } From aab8e080ae030fdb42f8946f828449f65eb91e0d Mon Sep 17 00:00:00 2001 From: harshvsb1105 Date: Sat, 1 May 2021 09:37:40 +0530 Subject: [PATCH 4/5] Implemented Help Button --- CHANGELOG.md | 2 +- example/pubspec.lock | 2 +- lib/src/buttons/help_button.dart | 9 ++++++--- pubspec.yaml | 2 +- 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 17149b06..09e06a6d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,4 @@ -## [0.0.8] +## [0.0.9] * Implemented 'HelpButton' ## [0.0.7] diff --git a/example/pubspec.lock b/example/pubspec.lock index 631f806c..417b621c 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -73,7 +73,7 @@ packages: path: ".." relative: true source: path - version: "0.0.7" + version: "0.0.9" matcher: dependency: transitive description: diff --git a/lib/src/buttons/help_button.dart b/lib/src/buttons/help_button.dart index 42d7f0b1..50910d3b 100644 --- a/lib/src/buttons/help_button.dart +++ b/lib/src/buttons/help_button.dart @@ -15,7 +15,8 @@ class HelpButton extends StatefulWidget { this.disabledColor, this.onPressed, this.pressedOpacity = 0.4, - this.alignment = Alignment.center, this.semanticLabel, + this.alignment = Alignment.center, + this.semanticLabel, }) : assert(pressedOpacity == null || (pressedOpacity >= 0.0 && pressedOpacity <= 1.0)), super(key: key); @@ -142,9 +143,11 @@ class _HelpButtonState extends State Widget build(BuildContext context) { final bool enabled = widget.enabled; final MacosThemeData theme = MacosTheme.of(context); - final Color? backgroundColor = DynamicColorX.macosResolve(widget.color ?? theme.helpButtonTheme.color, context); + final Color? backgroundColor = DynamicColorX.macosResolve( + widget.color ?? theme.helpButtonTheme.color, context); - final Color? disabledColor = DynamicColorX.macosResolve(widget.disabledColor ?? theme.helpButtonTheme.disabledColor, context); + final Color? disabledColor = DynamicColorX.macosResolve( + widget.disabledColor ?? theme.helpButtonTheme.disabledColor, context); final Color? foregroundColor = widget.enabled ? iconLuminance(backgroundColor!, theme.brightness!.isDark) diff --git a/pubspec.yaml b/pubspec.yaml index 61ff8371..05ec2a06 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: macos_ui description: Implements Apple's macOS Design System in Flutter. Based on the official documentation. -version: 0.0.7 +version: 0.0.9 homepage: 'https://github.com/GroovinChip/macos_ui' environment: From 59787aa7174b9484a395e8c69dbb14d91465e20a Mon Sep 17 00:00:00 2001 From: harshvsb1105 Date: Sat, 1 May 2021 21:16:31 +0530 Subject: [PATCH 5/5] Implemented Help Button --- lib/macos_ui.dart | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/macos_ui.dart b/lib/macos_ui.dart index ac14294b..60d331ee 100644 --- a/lib/macos_ui.dart +++ b/lib/macos_ui.dart @@ -13,6 +13,7 @@ export 'package:flutter/material.dart' PageTransitionsBuilder, FlutterLogo, CircleAvatar; + /// todo: package-level docs export 'package:flutter/widgets.dart';