Fluent Icons gallery showcase

Updated FluentIcons Update "close" icon to "chrome_close" ("close" is now missing)
bdlukaa · Dec 30, 2021 · b53288b · b53288b
1 parent 13bc913
commit b53288b
Show file tree

Hide file tree

Showing 13 changed files with 2,514 additions and 284 deletions.
diff --git a/bin/fabric-icons.json b/bin/fabric-icons.json
diff --git a/bin/icon_generator.dart b/bin/icon_generator.dart
@@ -41,8 +41,25 @@ void main(List<String> args) async {
       "  static const IconData ${glyph.name} = IconData(0x${glyph.codepoint}, fontFamily: 'FluentIcons', fontPackage: 'fluent_ui');",
     );
   }
+
+  // NEW Map of all glyphs (adds iteration capabilities)
+  dartFileBuffer.writeln(
+    "  static const Map<String,IconData> allIcons = {"
+  );
+  for (final Glyph glyph in glyphs) {
+    dartFileBuffer.writeln(
+      "    '${glyph.name}': ${glyph.name},",
+    );
+  }
+  dartFileBuffer.writeln(
+      "  };"
+  );
+
+
   dartFileBuffer.writeln("}");
 
+
+
   await File("lib/src/icons.dart").writeAsString(dartFileBuffer.toString());
 }
 

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -1,3 +1,4 @@
+import 'package:example/screens/icons.dart';
 import 'package:fluent_ui/fluent_ui.dart';
 import 'package:flutter/foundation.dart';
 
@@ -224,6 +225,10 @@ class _MyHomePageState extends State<MyHomePage> {
             icon: const Icon(FluentIcons.color),
             title: const Text('Colors'),
           ),
+          PaneItem(
+            icon: const Icon(FluentIcons.icon_sets_flag),
+            title: const Text('Icons'),
+          ),
           PaneItem(
             icon: const Icon(FluentIcons.plain_text),
             title: const Text('Typography'),
@@ -268,6 +273,7 @@ class _MyHomePageState extends State<MyHomePage> {
         const InputsPage(),
         const Forms(),
         ColorsPage(controller: colorsController),
+        const IconsPage(),
         const TypographyPage(),
         const Mobile(),
         const Others(),

diff --git a/example/lib/screens/forms.dart b/example/lib/screens/forms.dart
@@ -87,7 +87,7 @@ class _FormsState extends State<Forms> {
             suffixMode: OverlayVisibilityMode.always,
             minHeight: 100,
             suffix: IconButton(
-              icon: const Icon(FluentIcons.close),
+              icon:  const Icon(FluentIcons.chrome_close),
               onPressed: () {
                 _clearController.clear();
               },

diff --git a/example/lib/screens/icons.dart b/example/lib/screens/icons.dart
@@ -0,0 +1,108 @@
+import 'package:clipboard/clipboard.dart';
+import 'package:fluent_ui/fluent_ui.dart';
+
+import 'settings.dart';
+
+class IconsPage extends StatefulWidget {
+  const IconsPage({Key? key}) : super(key: key);
+
+  @override
+  _IconsPageState createState() => _IconsPageState();
+}
+
+class _IconsPageState extends State<IconsPage> {
+  String filterText = "";
+
+  @override
+  Widget build(BuildContext context) {
+    assert(debugCheckHasFluentTheme(context));
+    return ScaffoldPage(
+      header: PageHeader(
+        title: const Text('Fluent Icons Gallery showcase'),
+        commandBar: SizedBox(
+          width: 240.0,
+          child: Tooltip(
+            message: 'Filter by name',
+            child: TextBox(
+              header: 'Search',
+              suffix: const Icon(FluentIcons.search),
+              placeholder: 'Type to filter icons by name (ex: "logo")',
+              onChanged: (value) => setState(() {
+                filterText = value;
+              }),
+            ),
+          ),
+        ),
+      ),
+      content: Padding(
+        padding: EdgeInsets.symmetric(
+          horizontal: PageHeader.horizontalPadding(context),
+        ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const Divider(
+              style: DividerThemeData(horizontalMargin: EdgeInsets.zero),
+            ),
+            const InfoBar(
+              title: Text("Useful info:"),
+              content:
+                  Text("Use the upper right search box to filter the icons. You can also click on any icon to copy its name to the clipboard!"),
+            ),
+            Expanded(
+              child: GridView.extent(
+                  maxCrossAxisExtent: 150,
+                  mainAxisSpacing: 10,
+                  crossAxisSpacing: 10,
+                  children: FluentIcons.allIcons.entries
+                      .where((element) =>
+                          filterText.isEmpty ||
+                          // Remove "_"
+                          element.key
+                              .replaceAll("_", "")
+                              // toLowerCase
+                              .toLowerCase()
+                              .contains(filterText
+                                  .toLowerCase()
+                                  // Remove spaces
+                                  .replaceAll(" ", "")))
+                      .map((e) => GestureDetector(
+                            onTap: () =>
+                                FlutterClipboard.copy('FluentIcons.${e.key}')
+                                    .then(
+                              (_) => showSnackbar(
+                                context,
+                                Snackbar(
+                                  content: Text(
+                                      'Copied "FluentIcons.${e.key}" to the clipboard!'),
+                                  extended: true,
+                                ),
+                              ),
+                            ),
+                            child: Column(
+                              mainAxisAlignment: MainAxisAlignment.center,
+                              children: [
+                                Icon(
+                                  e.value,
+                                  size: 40,
+                                ),
+                                Padding(
+                                  padding: const EdgeInsets.only(top: 8.0),
+                                  child: Text(
+                                    e.key,
+                                    textAlign: TextAlign.center,
+                                    overflow: TextOverflow.fade,
+                                  ),
+                                )
+                              ],
+                            ),
+                          ))
+                      .toList()),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -78,6 +78,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.3.1"
+  clipboard:
+    dependency: "direct main"
+    description:
+      name: clipboard
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.3"
   clock:
     dependency: transitive
     description:

diff --git a/example/pubspec.yaml b/example/pubspec.yaml
@@ -19,6 +19,7 @@ dependencies:
   flutter_acrylic: ^0.1.0
   url_strategy: ^0.2.0
   url_launcher: ^6.0.15
+  clipboard: ^0.1.3
 
 dev_dependencies:
   flutter_test:

diff --git a/fonts/FluentIcons.ttf b/fonts/FluentIcons.ttf
diff --git a/lib/src/controls/form/auto_suggest_box.dart b/lib/src/controls/form/auto_suggest_box.dart
@@ -179,7 +179,7 @@ class _AutoSuggestBoxState<T> extends State<AutoSuggestBox<T>> {
             Padding(
               padding: const EdgeInsets.only(left: 2.0),
               child: IconButton(
-                icon: const Icon(FluentIcons.close),
+                icon: const Icon(FluentIcons.chrome_close),
                 onPressed: () {
                   controller.clear();
                   focusNode.unfocus();

diff --git a/lib/src/controls/form/pickers/pickers.dart b/lib/src/controls/form/pickers/pickers.dart
@@ -106,7 +106,7 @@ class YesNoPickerControl extends StatelessWidget {
             margin: const EdgeInsets.all(4.0),
             height: kOneLineTileHeight / 1.2,
             child: Button(
-              child: const Icon(FluentIcons.close),
+              child: const Icon(FluentIcons.chrome_close),
               onPressed: onCancel,
               style: style(),
             ),

diff --git a/lib/src/controls/navigation/tab_view.dart b/lib/src/controls/navigation/tab_view.dart
@@ -523,7 +523,7 @@ class Tab {
     Key? key,
     this.icon = const FlutterLogo(),
     required this.text,
-    this.closeIcon = FluentIcons.close,
+    this.closeIcon = FluentIcons.chrome_close,
     this.onClosed,
     this.semanticLabel,
   });

diff --git a/lib/src/controls/surfaces/info_bar.dart b/lib/src/controls/surfaces/info_bar.dart
@@ -285,7 +285,7 @@ class InfoBarThemeData with Diagnosticable {
           boxShadow: kElevationToShadow[2],
         );
       },
-      closeIcon: FluentIcons.close,
+      closeIcon: FluentIcons.chrome_close,
       closeIconSize: 16.0,
       icon: (severity) {
         switch (severity) {