Support Cupertino Icons and Colors (#2433)

* cupertino icons * cupertino colors * rename getMaterialIcon -> parseIcon * .lower() on Map key * parse cupertinoColor * fetch from stable flutter branch * update fetch-url
flet-dev · Jan 20, 2024 · 0c45658 · 0c45658
1 parent c20e168
commit 0c45658
Show file tree

Hide file tree

Showing 24 changed files with 2,928 additions and 79 deletions.
diff --git a/package/lib/src/controls/cupertino_navigation_bar.dart b/package/lib/src/controls/cupertino_navigation_bar.dart
@@ -8,10 +8,10 @@ import '../models/app_state.dart';
 import '../models/control.dart';
 import '../models/controls_view_model.dart';
 import '../protocol/update_control_props_payload.dart';
+import '../utils/borders.dart';
 import '../utils/colors.dart';
 import '../utils/icons.dart';
 import 'create_control.dart';
-import '../utils/borders.dart';
 
 class CupertinoNavigationBarControl extends StatefulWidget {
   final Control? parent;
@@ -87,11 +87,11 @@ class _CupertinoNavigationBarControlState
                 var label = destView.control.attrString("label", "")!;
 
                 var icon =
-                    getMaterialIcon(destView.control.attrString("icon", "")!);
+                    parseIcon(destView.control.attrString("icon", "")!);
                 var iconContentCtrls =
                     destView.children.where((c) => c.name == "icon_content");
 
-                var selectedIcon = getMaterialIcon(
+                var selectedIcon = parseIcon(
                     destView.control.attrString("selectedIcon", "")!);
                 var selectedIconContentCtrls = destView.children
                     .where((c) => c.name == "selected_icon_content");

diff --git a/package/lib/src/controls/date_picker.dart b/package/lib/src/controls/date_picker.dart
@@ -62,9 +62,9 @@ class _DatePickerControlState extends State<DatePickerControl> {
             orElse: () => DatePickerEntryMode.calendar);
     String? fieldHintText = widget.control.attrString("fieldHintText");
     String? fieldLabelText = widget.control.attrString("fieldLabelText");
-    IconData? switchToCalendarEntryModeIcon = getMaterialIcon(
+    IconData? switchToCalendarEntryModeIcon = parseIcon(
         widget.control.attrString("switchToCalendarEntryModeIcon", "")!);
-    IconData? switchToInputEntryModeIcon = getMaterialIcon(
+    IconData? switchToInputEntryModeIcon = parseIcon(
         widget.control.attrString("switchToInputEntryModeIcon", "")!);
 
     //Locale locale;

diff --git a/package/lib/src/controls/elevated_button.dart b/package/lib/src/controls/elevated_button.dart
@@ -59,7 +59,7 @@ class _ElevatedButtonControlState extends State<ElevatedButtonControl> {
 
     String text = widget.control.attrString("text", "")!;
     String url = widget.control.attrString("url", "")!;
-    IconData? icon = getMaterialIcon(widget.control.attrString("icon", "")!);
+    IconData? icon = parseIcon(widget.control.attrString("icon", "")!);
     Color? iconColor = HexColor.fromString(
         Theme.of(context), widget.control.attrString("iconColor", "")!);
     var contentCtrls = widget.children.where((c) => c.name == "content");

diff --git a/package/lib/src/controls/floating_action_button.dart b/package/lib/src/controls/floating_action_button.dart
@@ -28,7 +28,7 @@ class FloatingActionButtonControl extends StatelessWidget {
     debugPrint("FloatingActionButtonControl build: ${control.id}");
 
     String? text = control.attrString("text");
-    IconData? icon = getMaterialIcon(control.attrString("icon", "")!);
+    IconData? icon = parseIcon(control.attrString("icon", "")!);
     String url = control.attrString("url", "")!;
     String? urlTarget = control.attrString("urlTarget");
     Color? bgColor = HexColor.fromString(

diff --git a/package/lib/src/controls/form_field.dart b/package/lib/src/controls/form_field.dart
@@ -46,11 +46,11 @@ InputDecoration buildInputDecoration(BuildContext context, Control control,
     ((b) => b.name == control.attrString("border", "")!.toLowerCase()),
     orElse: () => FormFieldInputBorder.outline,
   );
-  var icon = getMaterialIcon(control.attrString("icon", "")!);
+  var icon = parseIcon(control.attrString("icon", "")!);
 
-  var prefixIcon = getMaterialIcon(control.attrString("prefixIcon", "")!);
+  var prefixIcon = parseIcon(control.attrString("prefixIcon", "")!);
   var prefixText = control.attrString("prefixText");
-  var suffixIcon = getMaterialIcon(control.attrString("suffixIcon", "")!);
+  var suffixIcon = parseIcon(control.attrString("suffixIcon", "")!);
   var suffixText = control.attrString("suffixText");
 
   var bgcolor = HexColor.fromString(

diff --git a/package/lib/src/controls/icon.dart b/package/lib/src/controls/icon.dart
@@ -23,7 +23,7 @@ class IconControl extends StatelessWidget {
     return constrainedControl(
         context,
         Icon(
-          getMaterialIcon(name),
+          parseIcon(name),
           size: size,
           color: color,
         ),

diff --git a/package/lib/src/controls/icon_button.dart b/package/lib/src/controls/icon_button.dart
@@ -55,9 +55,9 @@ class _IconButtonControlState extends State<IconButtonControl> {
   Widget build(BuildContext context) {
     debugPrint("Button build: ${widget.control.id}");
 
-    IconData? icon = getMaterialIcon(widget.control.attrString("icon", "")!);
+    IconData? icon = parseIcon(widget.control.attrString("icon", "")!);
     IconData? selectedIcon =
-        getMaterialIcon(widget.control.attrString("selectedIcon", "")!);
+        parseIcon(widget.control.attrString("selectedIcon", "")!);
     Color? iconColor = HexColor.fromString(
         Theme.of(context), widget.control.attrString("iconColor", "")!);
     Color? selectedIconColor = HexColor.fromString(

diff --git a/package/lib/src/controls/navigation_bar.dart b/package/lib/src/controls/navigation_bar.dart
@@ -9,10 +9,10 @@ import '../models/app_state.dart';
 import '../models/control.dart';
 import '../models/controls_view_model.dart';
 import '../protocol/update_control_props_payload.dart';
+import '../utils/borders.dart';
 import '../utils/colors.dart';
 import '../utils/icons.dart';
 import 'create_control.dart';
-import '../utils/borders.dart';
 import 'cupertino_navigation_bar.dart';
 
 class NavigationBarControl extends StatefulWidget {
@@ -108,11 +108,11 @@ class _NavigationBarControlState extends State<NavigationBarControl> {
                 var label = destView.control.attrString("label", "")!;
 
                 var icon =
-                    getMaterialIcon(destView.control.attrString("icon", "")!);
+                    parseIcon(destView.control.attrString("icon", "")!);
                 var iconContentCtrls =
                     destView.children.where((c) => c.name == "icon_content");
 
-                var selectedIcon = getMaterialIcon(
+                var selectedIcon = parseIcon(
                     destView.control.attrString("selectedIcon", "")!);
                 var selectedIconContentCtrls = destView.children
                     .where((c) => c.name == "selected_icon_content");

diff --git a/package/lib/src/controls/navigation_drawer.dart b/package/lib/src/controls/navigation_drawer.dart
@@ -7,11 +7,11 @@ import '../models/app_state.dart';
 import '../models/control.dart';
 import '../models/controls_view_model.dart';
 import '../protocol/update_control_props_payload.dart';
+import '../utils/borders.dart';
 import '../utils/colors.dart';
+import '../utils/edge_insets.dart';
 import '../utils/icons.dart';
 import 'create_control.dart';
-import '../utils/borders.dart';
-import '../utils/edge_insets.dart';
 
 class NavigationDrawerControl extends StatefulWidget {
   final Control? parent;
@@ -74,10 +74,10 @@ class _NavigationDrawerControlState extends State<NavigationDrawerControl> {
           List<Widget> children = viewModel.controlViews.map((destView) {
             if (destView.control.type == "navigationdrawerdestination") {
               var icon =
-                  getMaterialIcon(destView.control.attrString("icon", "")!);
+                  parseIcon(destView.control.attrString("icon", "")!);
               var iconContentCtrls =
                   destView.children.where((c) => c.name == "icon_content");
-              var selectedIcon = getMaterialIcon(
+              var selectedIcon = parseIcon(
                   destView.control.attrString("selectedIcon", "")!);
               var selectedIconContentCtrls = destView.children
                   .where((c) => c.name == "selected_icon_content");

diff --git a/package/lib/src/controls/navigation_rail.dart b/package/lib/src/controls/navigation_rail.dart
@@ -128,12 +128,12 @@ class _NavigationRailControlState extends State<NavigationRailControl> {
                     var labelContentCtrls = destView.children
                         .where((c) => c.name == "label_content");
 
-                    var icon = getMaterialIcon(
+                    var icon = parseIcon(
                         destView.control.attrString("icon", "")!);
                     var iconContentCtrls = destView.children
                         .where((c) => c.name == "icon_content");
 
-                    var selectedIcon = getMaterialIcon(
+                    var selectedIcon = parseIcon(
                         destView.control.attrString("selectedIcon", "")!);
                     var selectedIconContentCtrls = destView.children
                         .where((c) => c.name == "selected_icon_content");

diff --git a/package/lib/src/controls/outlined_button.dart b/package/lib/src/controls/outlined_button.dart
@@ -57,7 +57,7 @@ class _OutlinedButtonControlState extends State<OutlinedButtonControl> {
     final server = FletAppServices.of(context).server;
 
     String text = widget.control.attrString("text", "")!;
-    IconData? icon = getMaterialIcon(widget.control.attrString("icon", "")!);
+    IconData? icon = parseIcon(widget.control.attrString("icon", "")!);
     Color? iconColor = HexColor.fromString(
         Theme.of(context), widget.control.attrString("iconColor", "")!);
     var contentCtrls = widget.children.where((c) => c.name == "content");

diff --git a/package/lib/src/controls/popup_menu_button.dart b/package/lib/src/controls/popup_menu_button.dart
@@ -27,7 +27,7 @@ class PopupMenuButtonControl extends StatelessWidget {
 
     final server = FletAppServices.of(context).server;
 
-    var icon = getMaterialIcon(control.attrString("icon", "")!);
+    var icon = parseIcon(control.attrString("icon", "")!);
     var tooltip = control.attrString("tooltip");
     var contentCtrls =
         children.where((c) => c.name == "content" && c.isVisible);
@@ -63,7 +63,7 @@ class PopupMenuButtonControl extends StatelessWidget {
               itemBuilder: (BuildContext context) =>
                   viewModel.controlViews.map((cv) {
                     var itemIcon =
-                        getMaterialIcon(cv.control.attrString("icon", "")!);
+                        parseIcon(cv.control.attrString("icon", "")!);
                     var text = cv.control.attrString("text", "")!;
                     var checked = cv.control.attrBool("checked");
                     var contentCtrls =

diff --git a/package/lib/src/controls/tabs.dart b/package/lib/src/controls/tabs.dart
@@ -188,7 +188,7 @@ class _TabsControlState extends State<TabsControl>
               tabs: viewModel.controlViews.map((tabView) {
                 var text = tabView.control.attrString("text");
                 var icon =
-                    getMaterialIcon(tabView.control.attrString("icon", "")!);
+                    parseIcon(tabView.control.attrString("icon", "")!);
                 var tabContentCtrls = tabView.children
                     .where((c) => c.name == "tab_content" && c.isVisible);
 

diff --git a/package/lib/src/controls/text_button.dart b/package/lib/src/controls/text_button.dart
@@ -57,7 +57,7 @@ class _TextButtonControlState extends State<TextButtonControl> {
     final server = FletAppServices.of(context).server;
 
     String text = widget.control.attrString("text", "")!;
-    IconData? icon = getMaterialIcon(widget.control.attrString("icon", "")!);
+    IconData? icon = parseIcon(widget.control.attrString("icon", "")!);
     Color? iconColor = HexColor.fromString(
         Theme.of(context), widget.control.attrString("iconColor", "")!);
     var contentCtrls = widget.children.where((c) => c.name == "content");

diff --git a/package/lib/src/utils/colors.dart b/package/lib/src/utils/colors.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 
+import 'cupertino_colors.dart';
 import 'numbers.dart';
 
 Color? _getThemeColor(ThemeData theme, String colorName) {
@@ -184,6 +185,12 @@ extension HexColor on Color {
       return shadedColor ?? primaryColor;
     }
 
+    // find cupertino color
+    Color? cupertinoColor = cupertinoColors[name.toLowerCase()];
+    if (cupertinoColor != null) {
+      return cupertinoColor;
+    }
+
     // accent color
     MaterialAccentColor? accentColor =
         _materialAccentColors[name.toLowerCase()];

diff --git a/package/lib/src/utils/cupertino_colors.dart b/package/lib/src/utils/cupertino_colors.dart
@@ -0,0 +1,76 @@
+import 'package:flutter/cupertino.dart';
+
+// Bash script to generate colors list
+//
+/*
+
+url='https://raw.githubusercontent.com/flutter/flutter/stable/packages/flutter/lib/src/cupertino/colors.dart'
+output_file="$HOME/cupertino_colors.txt"
+
+echo "Map<String, Color> cupertinoColors = {" > "$output_file"
+
+curl -s $url | python -c '
+import re
+
+for line in __import__("sys").stdin:
+    match1 = re.search(r"static const CupertinoDynamicColor ([a-zA-Z0-9_]+)", line)
+    match2 = re.search(r"static const Color ([a-zA-Z0-9_]+)", line)
+    if match1:
+        print("\"{}\": CupertinoColors.{}, ".format(match1.group(1).lower(), match1.group(1)))
+    elif match2:
+        print("\"{}\": CupertinoColors.{}, ".format(match2.group(1).lower(), match2.group(1)))
+
+' >> "$output_file"
+
+echo "};" >> "$output_file"
+
+*/
+
+Map<String, Color> cupertinoColors = {
+"activeblue": CupertinoColors.activeBlue,
+"activegreen": CupertinoColors.activeGreen,
+"activeorange": CupertinoColors.activeOrange,
+"white": CupertinoColors.white,
+"black": CupertinoColors.black,
+"lightbackgroundgray": CupertinoColors.lightBackgroundGray,
+"extralightbackgroundgray": CupertinoColors.extraLightBackgroundGray,
+"darkbackgroundgray": CupertinoColors.darkBackgroundGray,
+"inactivegray": CupertinoColors.inactiveGray,
+"destructivered": CupertinoColors.destructiveRed,
+"systemblue": CupertinoColors.systemBlue,
+"systemgreen": CupertinoColors.systemGreen,
+"systemmint": CupertinoColors.systemMint,
+"systemindigo": CupertinoColors.systemIndigo,
+"systemorange": CupertinoColors.systemOrange,
+"systempink": CupertinoColors.systemPink,
+"systembrown": CupertinoColors.systemBrown,
+"systempurple": CupertinoColors.systemPurple,
+"systemred": CupertinoColors.systemRed,
+"systemteal": CupertinoColors.systemTeal,
+"systemcyan": CupertinoColors.systemCyan,
+"systemyellow": CupertinoColors.systemYellow,
+"systemgrey": CupertinoColors.systemGrey,
+"systemgrey2": CupertinoColors.systemGrey2,
+"systemgrey3": CupertinoColors.systemGrey3,
+"systemgrey4": CupertinoColors.systemGrey4,
+"systemgrey5": CupertinoColors.systemGrey5,
+"systemgrey6": CupertinoColors.systemGrey6,
+"label": CupertinoColors.label,
+"secondarylabel": CupertinoColors.secondaryLabel,
+"tertiarylabel": CupertinoColors.tertiaryLabel,
+"quaternarylabel": CupertinoColors.quaternaryLabel,
+"systemfill": CupertinoColors.systemFill,
+"secondarysystemfill": CupertinoColors.secondarySystemFill,
+"tertiarysystemfill": CupertinoColors.tertiarySystemFill,
+"quaternarysystemfill": CupertinoColors.quaternarySystemFill,
+"placeholdertext": CupertinoColors.placeholderText,
+"systembackground": CupertinoColors.systemBackground,
+"secondarysystembackground": CupertinoColors.secondarySystemBackground,
+"tertiarysystembackground": CupertinoColors.tertiarySystemBackground,
+"systemgroupedbackground": CupertinoColors.systemGroupedBackground,
+"secondarysystemgroupedbackground": CupertinoColors.secondarySystemGroupedBackground,
+"tertiarysystemgroupedbackground": CupertinoColors.tertiarySystemGroupedBackground,
+"separator": CupertinoColors.separator,
+"opaqueseparator": CupertinoColors.opaqueSeparator,
+"link": CupertinoColors.link,
+};