Some bug fixes

CHANGELOG.md

@@ -1,5 +1,13 @@
 Date format: DD/MM/YYYY
 
+## [next]
+
+- `DisableAcrylic` now fully disable transparency of its decendents `Acrylic`s ([#468](/~https://github.com/bdlukaa/fluent_ui/issues/468))
+- `Combobox.comboboxColor` is now correctly applied ([#468](/~https://github.com/bdlukaa/fluent_ui/issues/468))
+- Use the correct color for `DefaultToggleSwitchThumb` ([#463](/~https://github.com/bdlukaa/fluent_ui/issues/463)) 
+- Do not interpolate between infinite constraints on `TabView` ([#430](/~https://github.com/bdlukaa/fluent_ui/issues/430))
+- Do not rebuild the `TimePicker` popup when already rebuilding ([#437](/~https://github.com/bdlukaa/fluent_ui/issues/437))
+
 ## [4.0.0-pre.3] - Top navigation and auto suggestions - [13/08/2022]
 
 - `NavigationView` mode fixes:

example/lib/main.dart

@@ -250,6 +250,18 @@ class _MyHomePageState extends State<MyHomePage> with WindowListener {
       title: const Text('Icons'),
     ),
   ];
+  final List<NavigationPaneItem> footerItems = [
+    PaneItemSeparator(),
+    PaneItem(
+      icon: const Icon(FluentIcons.settings),
+      title: const Text('Settings'),
+    ),
+    _LinkPaneItemAction(
+      icon: const Icon(FluentIcons.open_source),
+      title: const Text('Source code'),
+      link: '/~https://github.com/bdlukaa/fluent_ui',
+    ),
+  ];
   late List<NavigationPaneItem> items = originalItems;
 
   final content = <Page>[
@@ -295,7 +307,7 @@ class _MyHomePageState extends State<MyHomePage> with WindowListener {
         if (searchValue.isEmpty) {
           items = originalItems;
         } else {
-          items = originalItems
+          items = [...originalItems, ...footerItems]
               .whereType<PaneItem>()
               .where((item) {
                 assert(item.title is Text);
@@ -339,39 +351,38 @@ class _MyHomePageState extends State<MyHomePage> with WindowListener {
             ),
           );
         }(),
-        actions: Row(
-          mainAxisAlignment: MainAxisAlignment.end,
-          children: [
-            ToggleSwitch(
-              content: const Text('Dark Mode'),
-              checked: FluentTheme.of(context).brightness.isDark,
-              onChanged: (v) {
-                if (v) {
-                  appTheme.mode = ThemeMode.dark;
-                } else {
-                  appTheme.mode = ThemeMode.light;
-                }
-              },
-            ),
-            if (!kIsWeb) const WindowButtons(),
-          ],
-        ),
+        actions: Row(mainAxisAlignment: MainAxisAlignment.end, children: [
+          ToggleSwitch(
+            content: const Text('Dark Mode'),
+            checked: FluentTheme.of(context).brightness.isDark,
+            onChanged: (v) {
+              if (v) {
+                appTheme.mode = ThemeMode.dark;
+              } else {
+                appTheme.mode = ThemeMode.light;
+              }
+            },
+          ),
+          if (!kIsWeb) const WindowButtons(),
+        ]),
       ),
       pane: NavigationPane(
         selected: () {
           // if not searching, return the current index
           if (searchValue.isEmpty) return index;
 
           final indexOnScreen = items.indexOf(
-            originalItems.whereType<PaneItem>().elementAt(index),
+            [...originalItems, ...footerItems]
+                .whereType<PaneItem>()
+                .elementAt(index),
           );
           if (indexOnScreen.isNegative) return null;
           return indexOnScreen;
         }(),
         onChanged: (i) {
           // If searching, the values will have different indexes
           if (searchValue.isNotEmpty) {
-            final equivalentIndex = originalItems
+            final equivalentIndex = [...originalItems, ...footerItems]
                 .whereType<PaneItem>()
                 .toList()
                 .indexOf(items[i] as PaneItem);
@@ -408,18 +419,7 @@ class _MyHomePageState extends State<MyHomePage> with WindowListener {
           focusNode: searchFocusNode,
         ),
         autoSuggestBoxReplacement: const Icon(FluentIcons.search),
-        footerItems: [
-          PaneItemSeparator(),
-          PaneItem(
-            icon: const Icon(FluentIcons.settings),
-            title: const Text('Settings'),
-          ),
-          _LinkPaneItemAction(
-            icon: const Icon(FluentIcons.open_source),
-            title: const Text('Source code'),
-            link: '/~https://github.com/bdlukaa/fluent_ui',
-          ),
-        ],
+        footerItems: searchValue.isNotEmpty ? [] : footerItems,
       ),
       content: NavigationBody(
         index: index,

example/lib/screens/forms/combobox.dart

@@ -19,6 +19,11 @@ class ComboboxPage extends ScrollablePage {
     'Green': Colors.green,
     'Red': Colors.red,
     'Yellow': Colors.yellow,
+    'Grey': Colors.grey,
+    'Magenta': Colors.magenta,
+    'Orange': Colors.orange,
+    'purple': Colors.purple,
+    'teal': Colors.teal,
   };
 
   @override
@@ -41,6 +46,7 @@ class ComboboxPage extends ScrollablePage {
                 SizedBox(
                   width: 200,
                   child: Combobox<String>(
+                    comboboxColor: colors[selectedColor],
                     value: selectedColor,
                     items: colors.entries.map((e) {
                       return ComboboxItem(

example/lib/screens/navigation/tab_view.dart

@@ -30,12 +30,9 @@ class TabViewPage extends ScrollablePage {
       ),
       onClosed: () {
         setState(() {
-          final tabIndex = tabs!.indexOf(tab);
           tabs!.remove(tab);
 
-          if (tabIndex == currentIndex && currentIndex > 0) {
-            currentIndex--;
-          }
+          if (currentIndex > 0) currentIndex--;
         });
       },
     );

example/pubspec.lock

@@ -91,7 +91,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "4.0.0-pre.2"
+    version: "4.0.0-pre.3"
   flutter:
     dependency: "direct main"
     description: flutter

lib/src/controls/form/combo_box.dart

@@ -34,14 +34,15 @@ class _ComboboxMenuPainter extends CustomPainter {
     required this.resize,
     required this.getSelectedItemOffset,
     Color borderColor = Colors.black,
+    Color? backgroundColor,
   })  : _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.
           // color: color,
           borderRadius: const BorderRadius.all(kComboboxRadius),
           border: Border.all(width: 1.0, color: borderColor),
-          // color: backgroundColor,
+          color: backgroundColor,
         ).createBoxPainter(),
         super(repaint: resize);
 
@@ -292,6 +293,7 @@ class _ComboboxMenuState<T> extends State<_ComboboxMenu<T>> {
           // elevation: route.elevation.toDouble(),
           borderColor:
               FluentTheme.of(context).resources.surfaceStrokeColorFlyout,
+          backgroundColor: widget.comboboxColor,
         ),
         child: ClipRRect(
           clipper: _ComboboxResizeClipper(
@@ -808,6 +810,8 @@ class ComboboxItem<T> extends _ComboboxItemContainer {
 /// shows the currently selected item as well as an arrow that opens a menu for
 /// selecting another item.
 ///
+/// ![Combobox Popup preview](https://docs.microsoft.com/en-us/windows/apps/design/controls/images/combo-box-list-item-state.png)
+///
 /// The type `T` is the type of the [value] that each combobox item represents.
 /// All the entries in a given menu must represent values with consistent types.
 /// Typically, an enum is used. Each [ComboboxItem] in [items] must be
@@ -829,6 +833,7 @@ class ComboboxItem<T> extends _ComboboxItemContainer {
 /// See also:
 ///
 ///  * [ComboboxItem], the class used to represent the [items].
+///  * <https://docs.microsoft.com/en-us/windows/apps/design/controls/combo-box>
 class Combobox<T> extends StatefulWidget {
   /// Creates a combobox button.
   ///
@@ -851,8 +856,7 @@ class Combobox<T> extends StatefulWidget {
   /// The [autofocus] argument must not be null.
   ///
   /// The [comboboxColor] argument specifies the background color of the
-  /// combobox when it is open. If it is null, the current theme's
-  /// [ThemeData.canvasColor] will be used instead.
+  /// combobox when it is open. If it is null, the default [Acrylic] color is used.
   Combobox({
     Key? key,
     required this.items,
@@ -874,8 +878,6 @@ class Combobox<T> extends StatefulWidget {
     this.focusNode,
     this.autofocus = false,
     this.comboboxColor,
-    // When adding new arguments, consider adding similar arguments to
-    // ComboboxFormField.
   })  : assert(
           items == null ||
               items.isEmpty ||
@@ -924,7 +926,6 @@ class Combobox<T> extends StatefulWidget {
   /// this widget is displayed as a placeholder for the combobox button's value.
   final Widget? disabledHint;
 
-  /// {@template fluent_ui.comboboxButton.onChanged}
   /// Called when the user selects an item.
   ///
   /// If the [onChanged] callback is null or the list of [Combobox.items]
@@ -933,7 +934,6 @@ class Combobox<T> extends StatefulWidget {
   /// will display the [Combobox.disabledHint] widget if it is non-null.
   /// If [Combobox.disabledHint] is also null but [Combobox.placeholder] is
   /// non-null, [Combobox.placeholder] will instead be displayed.
-  /// {@endtemplate}
   final ValueChanged<T?>? onChanged;
 
   /// Called when the combobox button is tapped.
@@ -1044,8 +1044,7 @@ class Combobox<T> extends StatefulWidget {
   /// ```
   /// {@end-tool}
   ///
-  /// Defaults to the [TextTheme.subtitle1] value of the current
-  /// [ThemeData.textTheme] of the current [Theme].
+  /// Defaults to the [Typography.body] value of the closest [ThemeData]
   final TextStyle? style;
 
   /// The widget to use for the comobo box button's icon.
@@ -1097,8 +1096,7 @@ class Combobox<T> extends StatefulWidget {
 
   /// The background color of the combobox.
   ///
-  /// If it is not provided, the theme's [ThemeData.canvasColor] will be used
-  /// instead.
+  /// If it is not provided, the default [Acrylic] color is used.
   final Color? comboboxColor;
 
   @override

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

@@ -339,10 +339,44 @@ class _TimePickerContentPopup extends StatefulWidget {
 class __TimePickerContentPopupState extends State<_TimePickerContentPopup> {
   bool get isAm => widget.amPmController.selectedItem == 0;
 
-  late DateTime localDate = widget.date;
+  late DateTime localDate;
+
+  @override
+  void initState() {
+    super.initState();
+    localDate = widget.date;
+    final possibleMinutes = List.generate(
+      60 ~/ widget.minuteIncrement,
+      (index) => (index * widget.minuteIncrement),
+    );
+    if (!possibleMinutes.contains(localDate.minute)) {
+      localDate = DateTime(
+        localDate.year,
+        localDate.month,
+        localDate.day,
+        localDate.hour,
+        getClosestMinute(possibleMinutes, localDate.minute),
+        localDate.second,
+        localDate.millisecond,
+        localDate.microsecond,
+      );
+    }
+  }
 
   void handleDateChanged(DateTime time) {
-    setState(() => localDate = time);
+    localDate = time;
+    Future.delayed(const Duration(milliseconds: 1), () {
+      if (mounted) setState(() {});
+    });
+  }
+
+  int getClosestMinute(List<int> possibleMinutes, int goal) {
+    return possibleMinutes
+        .reduce(
+          (prev, curr) =>
+              (curr - goal).abs() < (prev - goal).abs() ? curr : prev,
+        )
+        .clamp(0, 59);
   }
 
   @override
@@ -535,7 +569,7 @@ class __TimePickerContentPopupState extends State<_TimePickerContentPopup> {
                       ),
                     ],
                     onSelectedItemChanged: (index) {
-                      setState(() {});
+                      // setState(() {});
                       int hour = localDate.hour;
                       final isAm = index == 0;
                       if (!widget.use24Format) {

lib/src/controls/inputs/radio_button.dart

@@ -24,8 +24,7 @@ import 'package:flutter/rendering.dart';
 ///   * [Slider], which let the user lie within a range of values,
 ///     (for example, 10, 20, 30, ... 100).
 ///   * [Checkbox], which let the user select multiple options.
-///   * [ComboBox], which let the user select multiple options, when
-///     there's more than eight options.
+///   * [Combobox], which let the user select multiple options from a popup
 ///   * <https://docs.microsoft.com/en-us/windows/apps/design/controls/radio-button>
 class RadioButton extends StatelessWidget {
   /// Creates a radio button.