Add multi select (#628)

* Add basic layout for multi-select

* First working prototype

* Add tests

* Improve FMultiSelectTag

* Add docs

* Prepare Forui for review

* Update macos-latest goldens

* Update windows-latest goldens

* Update forui_hooks/lib/src/select_controller_hook.dart

Co-authored-by: Copilot <[email protected]>

* Fix PR issues

* Update windows-latest goldens

* Refine FMultiSelect

---------

Co-authored-by: Pante <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: Pante

docs/app/docs/form/multi-select/page.mdx

@@ -14,6 +14,8 @@ It is a form-field and can therefore be used in a form.
 </LinkBadgeGroup>
 
 <Callout type="info">
+    For multi selections, consider using a [multi select](/docs/form/multi-select).
+
     For touch devices, a [select tile group](/docs/tile/select-tile-group) or
     [select menu tile](/docs/tile/select-menu-tile) is generally recommended over this.
 </Callout>
@@ -75,16 +77,15 @@ FSelect<String>(
   description: const Text('Select your country of residence'),
   hint: 'Choose a country',
   format: (value) => value.toUpperCase(),
-  divider: FItemDivider.none,
   onChange: (value) => print('Selected country: $value'),
   onSaved: (value) => print('Saved country: $value'),
-  style: FSelectStyle.inherit(...),
   autovalidateMode: AutovalidateMode.onUserInteraction,
   builder: (context, styles, child) => child!,
   prefixBuilder: (context, styles, _) => Icon(FIcons.globe),
   suffixBuilder: (context, styles, _) => Icon(FIcons.arrowDown),
   popoverConstraints: const FAutoWidthPortalConstraints(maxHeight: 400),
   clearable: true,
+  contentDivider: FItemDivider.none,
   contentScrollHandles: true,
   initialValue: 'ca',
   children: [
@@ -148,13 +149,13 @@ FSelect<User>.search(
   description: const Text('Search and select a user'),
   builder: (context, styles, child) => child!,
   format: (user) => '${user.firstName} ${user.lastName}',
-  divider: FItemDivider.none,
   hint: 'Search users...',
   popoverConstraints: const FAutoWidthPortalConstraints(maxHeight: 400),
   clearable: true,
   autoHide: false,
   onChange: (value) => print('Selected country: $value'),
   initialValue: 'value',
+  contentDivider: FItemDivider.none,
   contentScrollHandles: false,
   contentPhysics: const BouncingScrollPhysics(),
   emptyBuilder: (context, style, _) => Text('No results'),
@@ -191,13 +192,13 @@ FSelect<User>.searchFromMap(
   description: const Text('Search and select a user'),
   builder: (context, styles, child) => child!,
   format: (user) => '${user.firstName} ${user.lastName}',
-  divider: FItemDivider.none,
   hint: 'Search users...',
   popoverConstraints: const FAutoWidthPortalConstraints(maxHeight: 400),
   clearable: true,
   autoHide: false,
   onChange: (value) => print('Selected country: $value'),
   initialValue: 'value',
+  contentDivider: FItemDivider.none,
   contentScrollHandles: false,
   contentPhysics: const BouncingScrollPhysics(),
   emptyBuilder: (context, style, _) => Text('No results'),
@@ -359,7 +360,7 @@ FSelect<User>.searchFromMap(
       @override
       Widget build(BuildContext context) => FSelect<String>(
         hint: 'Select a level',
-        divider: FItemDivider.full,
+        contentDivider: FItemDivider.none,
         format: (s) => s,
         children: [
           FSelectSection.fromMap(
@@ -639,7 +640,7 @@ FSelect<User>.searchFromMap(
                 child: const Text('Submit'),
                 onPress: () {
                   if (_formKey.currentState!.validate()) {
-                    // Form is valid, do something with department.e
+                    // Form is valid, do something with department.
                   }
                 },
               ),

docs/app/docs/form/select/page.mdx

@@ -1,3 +1,17 @@
+## 0.15.0
+
+### `FMultiSelect` (new)
+* Add `FMultiSelect`.
+* Add `FMultiSelectController`.
+* Add `FMultiSelectStyle`.
+* Add `FMultiSelectTag`.
+
+
+### Others
+* Rename `FSelect.divider` to `FSelect.contentDivider`.
+* Change `FMultiValueNotifier` to be non-abstract.
+
+
 ### 0.14.1
 * Fix `FToaster`sometimes crashing due to an incorrect update of a late final variable.
 

forui/CHANGELOG.md

@@ -470,7 +470,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)";
-				DEVELOPMENT_TEAM = F6D9JYCK3Z;
+				DEVELOPMENT_TEAM = TKQ634K5JU;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
@@ -653,7 +653,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)";
-				DEVELOPMENT_TEAM = F6D9JYCK3Z;
+				DEVELOPMENT_TEAM = TKQ634K5JU;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
@@ -676,7 +676,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)";
-				DEVELOPMENT_TEAM = F6D9JYCK3Z;
+				DEVELOPMENT_TEAM = TKQ634K5JU;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (

forui/bin/commands/style/style.dart

@@ -27,28 +27,6 @@ class _SandboxState extends State<Sandbox> with SingleTickerProviderStateMixin {
 
   @override
   Widget build(BuildContext context) {
-    return Center(
-      child: FSelect<String>(
-        divider: FItemDivider.full,
-        format: (s) => s,
-        children: [
-          FSelectSection.fromMap(
-            label: const Text('Group 1'),
-            divider: FItemDivider.indented,
-            items: {
-              for (final item in ['1A', '1B']) item: item,
-            },
-          ),
-          FSelectSection.fromMap(
-            label: const Text('Group 2'),
-            items: {
-              for (final item in ['2A', '2B']) item: item,
-            },
-          ),
-          FSelectItem('Item 3', 'Item 3'),
-          FSelectItem('Item 4', 'Item 4'),
-        ],
-      ),
-    );
+    return Center(child: FMultiSelect<String>.fromMap(const {'1': '1', '2': '2', '3': '3', '4': '4'}));
   }
 }

forui/example/ios/Runner.xcodeproj/project.pbxproj

@@ -6,6 +6,8 @@
 	<true/>
 	<key>com.apple.security.cs.allow-jit</key>
 	<true/>
+	<key>com.apple.security.network.client</key>
+	<true/>
 	<key>com.apple.security.network.server</key>
 	<true/>
 </dict>

forui/example/lib/sandbox.dart

@@ -21,5 +21,6 @@
   "selectScrollDownSemanticsLabel": "Rol af",
   "paginationPreviousSemanticsLabel": "Vorige",
   "paginationNextSemanticsLabel": "Volgende",
-  "popoverSemanticsLabel": "Opspringer"
+  "popoverSemanticsLabel": "Opspringer",
+  "multiSelectHint": "Kies items"
 }

forui/example/macos/Runner/DebugProfile.entitlements

@@ -21,5 +21,6 @@
   "selectScrollDownSemanticsLabel": "ወደ ታች ሸብልል",
   "paginationPreviousSemanticsLabel": "ቀዳሚ",
   "paginationNextSemanticsLabel": "ቀጣይ",
-  "popoverSemanticsLabel": "ፖፖቨር"
+  "popoverSemanticsLabel": "ፖፖቨር",
+  "multiSelectHint": "ንጥሎች ይምረጡ"
 }

forui/lib/l10n/f_af.arb

@@ -20,5 +20,6 @@
   "selectScrollDownSemanticsLabel": "التمرير لأسفل",
   "paginationPrevious": "السابق",
   "paginationNext": "التالي",
-  "popoverSemanticsLabel": "منبثقة"
+  "popoverSemanticsLabel": "منبثقة",
+  "multiSelectHint": "حدد العناصر"
 }