New feature added to generator utility

[gslender]

Adds a new generated output of a meta_icon_mapping.dart with a Map string terms (from the json) and associated FontAwesomeIconMetadata objects to facilitate quick/easy search and use of icons. A sample app has also been built using this to showcase the search feature.

[gslender]

Here is the sample app that showcases the new feature !!

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:font_awesome_flutter/meta_icon_mapping.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  static const String kAppTitle = 'Flutter FontAwesome Viewer';

  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: kAppTitle,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        cupertinoOverrideTheme: const CupertinoThemeData(
          primaryColor: Colors.white54,
        ),
      ),
      home: const MyHomePage(title: kAppTitle),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _showSearch = false;
  double _iconSize = 48;
  List<FontAwesomeIconMetadata> searchedIconsList = [];

  @override
  void initState() {
    super.initState();
    searchedIconsList = faIconMetaMapping.values.toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          title: _showSearch ? _searchField() : Text(widget.title),
          actions: [
            _showSearch
                ? IconButton(
                    onPressed: () {
                      setState(() {
                        searchedIconsList = faIconMetaMapping.values.toList();
                        _showSearch = false;
                      });
                    },
                    icon: const FaIcon(FontAwesomeIcons.solidTimesCircle))
                : IconButton(
                    onPressed: () {
                      setState(() {
                        _showSearch = true;
                      });
                    },
                    icon: const FaIcon(FontAwesomeIcons.search))
          ],
        ),
        body: Column(
          children: [
            Expanded(
                child: Container(
                    color: Colors.white,
                    child: ListView.separated(
                        separatorBuilder: (context, index) => const Divider(),
                        itemCount: searchedIconsList.length,
                        itemBuilder: (context, index) {
                          final FontAwesomeIconMetadata meta = searchedIconsList[index];
                          final List<IconData> iconFamilyList = meta.icons;
                          Widget iconFamily = Container(
                              color: Colors.transparent,
                              child: OverflowBar(
                                  alignment: MainAxisAlignment.spaceEvenly,
                                  overflowAlignment: OverflowBarAlignment.center,
                                  overflowSpacing: 10,
                                  children: iconFamilyList.map<Widget>((faicon) {
                                    return Card(
                                      margin: const EdgeInsets.all(1),
                                      child: Padding(
                                          padding: const EdgeInsets.all(4),
                                          child: faicon is IconDataDuotone
                                              ? FaDuotoneIcon(
                                                  faicon,
                                                  primaryColor: Colors.red.shade600,
                                                  secondaryColor: Colors.blue.shade600,
                                                  size: _iconSize,
                                                )
                                              : FaIcon(faicon, size: _iconSize)),
                                    );
                                  }).toList()));
                          return Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.start,
                              mainAxisSize: MainAxisSize.max,
                              children: [
                                iconFamily,
                                SizedBox(
                                  height: 40,
                                  child: Center(child: Text(meta.label)),
                                )
                              ]);
                        }))),
            SafeArea(
                child: Container(
              width: double.infinity,
              height: 40,
              color: Colors.black,
              child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
                Text(
                  "${searchedIconsList.length} icons",
                  style: const TextStyle(color: Colors.white, fontSize: 18),
                ),
                Slider(
                    min: 12,
                    max: 130,
                    value: _iconSize,
                    onChanged: (value) {
                      setState(() {
                        _iconSize = value;
                      });
                    })
              ]),
            ))
          ],
        ));
  }

  Widget _searchField() {
    return Theme(
        data: Theme.of(context).copyWith(
            textSelectionTheme: const TextSelectionThemeData(
          selectionHandleColor: Colors.lightBlue,
          selectionColor: Colors.lightBlue,
        )),
        child: TextFormField(
          cursorColor: Colors.white,
          onChanged: (value) {
            setState(() {
              searchedIconsList = getIconsMetaListFromSearch(value);
            });
          },
          style: const TextStyle(color: Colors.white, fontSize: 18),
          decoration: InputDecoration(
              label: const Text("Search..."),
              labelStyle: TextStyle(color: Colors.lightBlue.shade200),
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.lightBlue.shade200),
              ),
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.lightBlue.shade200),
              )),
        ));
  }
}

[gslender]

Also published the sample app to the Apple AppStore !!

https://apps.apple.com/au/app/flutter-fontawesome-viewer/id1605286238

[michaelspiss]

Hi @gslender! Thank you so much for your contribution. I'm very sorry to tell you that font awesome is going to completely remove the icons.json with the next update to v6 in a few weeks. They are pushing their GraphQL API which you can search with, but it does not provide the search terms field for icons.

This is a very displeasing change by FA, which I seriously cannot understand.

So I'm sorry to reject your pull request. Be assured it's not because I think it wouldn't be a good addition, but because font awesome already broke it.

[gslender]

So you won't mind if I fork and resubmit this work to pub.dev for people like me who won't be migrating to v6 and will continue to use Pro on v5 but would like full use of the fontawesome features that do exist? I don't see enough benefits in v6 to upgrade anyway

[michaelspiss]

This package is published under the MIT license, which permits you to do pretty much anything you want with it, as long as you credit the original authors. So yes, you are more than welcome to create your own, custom version and publish it!

[gslender]

Chatting with Dave Gandy (founder of FA) and he mentioned they are looking to add the icons.json back into V6, so maybe this topic isn't closed?

[michaelspiss]

Please keep me updated on any information regarding the metadata file. It would be a huge relief if they kept it. And yes, should they decide to keep it, I'll definitely have a look at this pull request!