Inputs improvement (bdlukaa#38)

CHANGELOG.md

@@ -1,5 +1,11 @@
 Date format: DD/MM/YYYY
 
+## [next] - [10/06/2021]
+
+- Reworked the inputs api ([#36](https://github.com/bdlukaa/fluent_ui/issues/36)):
+  - A input can have multiple states. Now, if the widget is focused and pressed at the same time, it doesn't lose its focused border.
+  - Now, the focus is not requested twice when the button is pressed, only once. This fixes a bug introduced in a previous version that combo boxes items we're not being focused.
+
 ## [2.0.0] - [20/05/2021]
 
 - New way to disable the acrylic blur effect. Just wrap the acrylic widget in a `NoAcrylicBlurEffect` to have it disabled.

example/lib/main.dart

@@ -68,7 +68,6 @@ class MyApp extends StatelessWidget {
           debugShowCheckedModeBanner: false,
           initialRoute: '/',
           routes: {'/': (_) => MyHomePage()},
-          navigatorObservers: [ClearFocusOnPush()],
           theme: ThemeData(
             accentColor: appTheme.color,
             brightness: appTheme.mode == ThemeMode.system
@@ -88,16 +87,6 @@ class MyApp extends StatelessWidget {
   }
 }
 
-// This is the current solution for this. See https://github.com/flutter/flutter/issues/48464
-class ClearFocusOnPush extends NavigatorObserver {
-  @override
-  void didPush(Route route, Route? previousRoute) {
-    super.didPush(route, previousRoute);
-    final focus = FocusManager.instance.primaryFocus;
-    focus?.unfocus();
-  }
-}
-
 class MyHomePage extends StatefulWidget {
   const MyHomePage({Key? key}) : super(key: key);
 
@@ -212,8 +201,8 @@ class WindowButtons extends StatelessWidget {
       iconNormal: theme.inactiveColor,
       iconMouseDown: theme.inactiveColor,
       iconMouseOver: theme.inactiveColor,
-      mouseOver: ButtonThemeData.buttonColor(theme, ButtonStates.hovering),
-      mouseDown: ButtonThemeData.buttonColor(theme, ButtonStates.pressing),
+      mouseOver: ButtonThemeData.buttonColor(theme, [ButtonStates.hovering]),
+      mouseDown: ButtonThemeData.buttonColor(theme, [ButtonStates.pressing]),
     );
     final closeButtonColors = WindowButtonColors(
       mouseOver: Colors.red,

example/lib/screens/colors.dart

@@ -74,7 +74,7 @@ class ColorsPage extends StatelessWidget {
                 children: List.generate(22, (index) {
                   return buildColorBlock(
                     'Grey#${(index + 1) * 10}',
-                    Colors.grey[(index + 1) * 10]!,
+                    Colors.grey[(index + 1) * 10],
                   );
                 }),
               ),

example/lib/screens/inputs.dart

@@ -102,9 +102,7 @@ class _InputsPageState extends State<InputsPage> {
               controller: controller,
               child: Button(
                 child: Text('File'),
-                onPressed: () {
-                  controller.open = true;
-                },
+                onPressed: disabled ? null : () => controller.open = true,
               ),
             ),
           ),
@@ -157,20 +155,28 @@ class _InputsPageState extends State<InputsPage> {
             height: splitButtonHeight,
             child: SplitButtonBar(buttons: [
               Button(
-                child: SizedBox(
-                  height: splitButtonHeight,
-                  child: Container(
-                    color: context.theme.accentColor,
-                    height: 24,
-                    width: 24,
-                  ),
-                ),
+                builder: (context, states) {
+                  return SizedBox(
+                    height: splitButtonHeight,
+                    child: Container(
+                      color: states.isDisabled
+                          ? FluentTheme.of(context).accentColor.darker
+                          : context.theme.accentColor,
+                      height: 24,
+                      width: 24,
+                    ),
+                  );
+                },
                 onPressed: disabled ? null : () {},
               ),
               Button(
                 child: SizedBox(
                   height: splitButtonHeight,
-                  child: Icon(Icons.keyboard_arrow_down),
+                  child: Icon(
+                    Icons.keyboard_arrow_down,
+                    color:
+                        disabled ? FluentTheme.of(context).disabledColor : null,
+                  ),
                 ),
                 onPressed: disabled ? null : () {},
                 style: ButtonThemeData(padding: EdgeInsets.all(6)),

example/lib/screens/settings.dart

@@ -33,7 +33,7 @@ class Settings extends StatelessWidget {
           blurRadius: 10.0,
         ),
       ];
-      final border = Border.all(color: Colors.grey[100]!, width: 0.5);
+      final border = Border.all(color: Colors.grey[100], width: 0.5);
       if (context.theme.brightness == Brightness.light) {
         return BoxDecoration(
           color: Colors.white,

lib/fluent_ui.dart

@@ -27,7 +27,7 @@ export 'src/navigation/route.dart';
 
 export 'src/layout/page.dart';
 
-export 'src/controls/inputs/hover_button.dart';
+export 'src/controls/utils/hover_button.dart';
 export 'src/controls/inputs/button.dart';
 export 'src/controls/inputs/checkbox.dart';
 export 'src/controls/inputs/icon_button.dart';

lib/src/controls/form/combo_box.dart

@@ -4,6 +4,7 @@ import 'dart:ui' show window;
 import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter/material.dart' as m;
 
 import 'package:fluent_ui/fluent_ui.dart';
 
@@ -34,7 +35,7 @@ class _ComboboxMenuPainter extends CustomPainter {
     this.selectedIndex,
     required this.resize,
     required this.getSelectedItemOffset,
-  })   : _painter = BoxDecoration(
+  })  : _painter = BoxDecoration(
           // If you add an image here, you must provide a real
           // configuration in the paint() function and you must provide some sort
           // of onChanged callback here.
@@ -180,17 +181,14 @@ class _ComboboxItemButtonState<T> extends State<_ComboboxItemButton<T>> {
       opacity: opacity,
       child: HoverButton(
         autofocus: widget.itemIndex == widget.route.selectedIndex,
-        builder: (context, state) => Container(
+        builder: (context, states) => Container(
           decoration: BoxDecoration(
             color: () {
-              if (state.isFocused)
+              if (states.isFocused)
                 return FluentTheme.of(context).accentColor.resolveFrom(context);
               return ButtonThemeData.uncheckedInputColor(
                 FluentTheme.of(context),
-                () {
-                  if (state.isFocused) return ButtonStates.hovering;
-                  return state;
-                }(),
+                states,
               );
             }(),
           ),
@@ -1247,7 +1245,7 @@ class _ComboboxState<T> extends State<Combobox<T>> with WidgetsBindingObserver {
 
       switch (FluentTheme.of(context).brightness) {
         case Brightness.light:
-          return Colors.grey[190]!;
+          return Colors.grey[190];
         case Brightness.dark:
           return Colors.white.withOpacity(0.7);
       }
@@ -1256,7 +1254,7 @@ class _ComboboxState<T> extends State<Combobox<T>> with WidgetsBindingObserver {
 
       switch (FluentTheme.of(context).brightness) {
         case Brightness.light:
-          return Colors.grey[150]!;
+          return Colors.grey[150];
         case Brightness.dark:
           return Colors.white.withOpacity(0.10);
       }
@@ -1389,13 +1387,13 @@ class _ComboboxState<T> extends State<Combobox<T>> with WidgetsBindingObserver {
           focusNode: focusNode,
           autofocus: widget.autofocus,
           onPressed: _enabled ? _handleTap : null,
-          builder: (context, state) {
+          builder: (context, states) {
             return Container(
               decoration: kPickerDecorationBuilder(context, () {
                 if (_showHighlight)
-                  return ButtonStates.focused;
-                else if (state.isFocused) return ButtonStates.none;
-                return state;
+                  return [ButtonStates.focused];
+                else if (states.isFocused) return <ButtonStates>[];
+                return states;
               }()),
               child: result,
             );

lib/src/controls/form/pickers/date_picker.dart

@@ -192,7 +192,7 @@ class _DatePickerState extends State<DatePicker> {
         initControllers();
       },
       builder: (context, state) {
-        if (state == ButtonStates.disabled) state = ButtonStates.none;
+        if (state.isDisabled) state = <ButtonStates>[];
         final divider = Divider(
           direction: Axis.vertical,
           style: DividerThemeData(

lib/src/controls/form/pickers/pickers.dart

@@ -24,16 +24,16 @@ TextStyle? kPickerPopupTextStyle(BuildContext context) {
   return context.theme.typography.body?.copyWith(fontSize: 16);
 }
 
-Decoration kPickerDecorationBuilder(BuildContext context, ButtonStates state) {
+Decoration kPickerDecorationBuilder(BuildContext context, List<ButtonStates> states) {
   assert(debugCheckHasFluentTheme(context));
   return BoxDecoration(
     borderRadius: BorderRadius.circular(4.0),
     border: Border.all(
       color: () {
         late Color color;
-        if (state == ButtonStates.hovering) {
+        if (states.isHovering) {
           color = context.theme.inactiveColor;
-        } else if (state == ButtonStates.disabled) {
+        } else if (states.isDisabled) {
           color = context.theme.disabledColor;
         } else {
           color = context.theme.inactiveColor.withOpacity(0.75);
@@ -43,9 +43,9 @@ Decoration kPickerDecorationBuilder(BuildContext context, ButtonStates state) {
       width: 1.0,
     ),
     color: () {
-      if (state == ButtonStates.pressing)
+      if (states.isPressing)
         return context.theme.disabledColor.withOpacity(0.2);
-      else if (state == ButtonStates.focused) {
+      else if (states.isFocused) {
         return context.theme.disabledColor.withOpacity(0.2);
       }
     }(),

lib/src/controls/inputs/button.dart

@@ -3,7 +3,7 @@ import 'package:fluent_ui/fluent_ui.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
 
-import 'hover_button.dart';
+import '../utils/hover_button.dart';
 
 enum _ButtonType { def, icon, toggle }
 
@@ -202,7 +202,9 @@ class _ButtonState extends State<Button> {
           curve: style.animationCurve ?? Curves.linear,
           padding: style.padding,
           decoration: style.decoration!(state),
-          child: DefaultTextStyle(
+          child: AnimatedDefaultTextStyle(
+            duration: style.animationDuration ?? Duration.zero,
+            curve: style.animationCurve ?? Curves.linear,
             style: (style.textStyle?.call(state)) ?? TextStyle(),
             textAlign: TextAlign.center,
             child: widget.child ?? widget.builder!(context, state),
@@ -249,16 +251,16 @@ class ButtonThemeData with Diagnosticable {
       animationDuration: style.fastAnimationDuration,
       animationCurve: style.animationCurve,
       cursor: style.inputMouseCursor,
-      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
-      margin: EdgeInsets.all(4),
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+      margin: const EdgeInsets.all(4),
       decoration: (state) => BoxDecoration(
         borderRadius: BorderRadius.circular(2),
         color: buttonColor(style, state),
       ),
       scaleFactor: 0.95,
       textStyle: (state) =>
           style.typography.body?.copyWith(
-            color: state.isDisabled ? Colors.grey[100] : null,
+            color: state.isDisabled ? style.disabledColor : null,
           ) ??
           TextStyle(),
     );
@@ -307,53 +309,55 @@ class ButtonThemeData with Diagnosticable {
     ));
   }
 
-  static Color buttonColor(ThemeData style, ButtonStates state) {
+  static Color buttonColor(ThemeData style, List<ButtonStates> states) {
+    late Color color;
     if (style.brightness == Brightness.light) {
-      late Color color;
-      if (state.isDisabled)
+      if (states.isDisabled)
         color = style.disabledColor;
-      else if (state.isPressing)
-        color = Colors.grey[70]!;
-      else if (state.isHovering)
-        color = Colors.grey[40]!;
+      else if (states.isPressing)
+        color = Colors.grey[70];
+      else if (states.isHovering)
+        color = Colors.grey[40];
       else
-        color = Colors.grey[50]!;
+        color = Colors.grey[50];
       return color;
     } else {
-      late Color color;
-      if (state.isDisabled)
-        color = style.disabledColor;
-      else if (state.isPressing)
-        color = Color.fromARGB(255, 102, 102, 102);
-      else if (state.isHovering)
-        color = Colors.grey[150]!;
-      else
-        color = Color.fromARGB(255, 51, 51, 51);
+      if (states.isPressing) {
+        // Value eyeballed from Windows 10
+        color = Color(0xFF666666);
+      } else if (states.isHovering)
+        color = Colors.grey[170];
+      else {
+        // Value eyeballed from Windows 10
+        // Used when the state is not recieving any user
+        // interaction or is disabled
+        color = Color(0xFF333333);
+      }
       return color;
     }
   }
 
-  static Color checkedInputColor(ThemeData style, ButtonStates state) {
+  static Color checkedInputColor(ThemeData style, List<ButtonStates> states) {
     Color color = style.accentColor;
-    if (state.isDisabled)
+    if (states.isDisabled)
       return style.disabledColor;
-    else if (state.isHovering)
+    else if (states.isHovering)
       return color.withOpacity(0.70);
-    else if (state.isPressing) return color.withOpacity(0.90);
+    else if (states.isPressing) return color.withOpacity(0.90);
     return color;
   }
 
-  static Color uncheckedInputColor(ThemeData style, ButtonStates state) {
+  static Color uncheckedInputColor(ThemeData style, List<ButtonStates> states) {
     if (style.brightness == Brightness.light) {
-      if (state.isDisabled) return style.disabledColor;
-      if (state.isPressing) return Colors.grey[70]!;
-      if (state.isHovering) return Colors.grey[40]!;
-      return Colors.grey[40]!.withOpacity(0);
+      if (states.isDisabled) return style.disabledColor;
+      if (states.isPressing) return Colors.grey[70];
+      if (states.isHovering) return Colors.grey[40];
+      return Colors.grey[40].withOpacity(0);
     } else {
-      if (state.isDisabled) return style.disabledColor;
-      if (state.isPressing) return Colors.grey[130]!;
-      if (state.isHovering) return Colors.grey[150]!;
-      return Colors.grey[150]!.withOpacity(0);
+      if (states.isDisabled) return style.disabledColor;
+      if (states.isPressing) return Colors.grey[130];
+      if (states.isHovering) return Colors.grey[150];
+      return Colors.grey[150].withOpacity(0);
     }
   }
 }

lib/src/controls/inputs/checkbox.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
+import 'package:flutter/material.dart' as m;
+
 import 'package:fluent_ui/fluent_ui.dart';
 
 /// A check box is used to select or deselect action items. It can
@@ -69,8 +71,12 @@ class Checkbox extends StatelessWidget {
     properties.add(DiagnosticsProperty<CheckboxThemeData>('style', style));
     properties.add(StringProperty('semanticLabel', semanticLabel));
     properties.add(DiagnosticsProperty<FocusNode>('focusNode', focusNode));
-    properties.add(FlagProperty('autofocus',
-        value: autofocus, defaultValue: false, ifFalse: 'manual focus'));
+    properties.add(FlagProperty(
+      'autofocus',
+      value: autofocus,
+      defaultValue: false,
+      ifFalse: 'manual focus',
+    ));
   }
 
   @override