How to make an IconPicker, a Widget to list icons for the user to pick

Question

I'd like to use an IconPicker where the user can search for an Icon and select it. If I search for "arrow" it would give me: arrow_upward, arrow_back, arrow_back_ios and so on. Can you link me a library that can do this? or give an idea of how I can accomplish that?

I've looked everywhere, the only one I could find it was this: https://pub.dev/packages/flutter_picker. But it doesn't have the search option.

Answer 1

I just published the exact package you need here:

https://pub.dev/packages/flutter_iconpicker

have fun :)

Answer 2

So this one does not have a search, but may help others looking for a icon picker in Flutter. This was something I was dreading making myself but ended up being relatively easy.

IconPicker Widget:

import 'package:flutter/material.dart';

class IconPicker extends StatelessWidget {
  static List<IconData> icons = [
    Icons.ac_unit,
    Icons.access_alarm,
    Icons.access_time,
    // all the icons you want to include
  ];

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 5,
      children: <Widget>[
        for (var icon in icons)
          GestureDetector(
            onTap: () => Navigator.pop(context, icon),
            child: Icon(icon),
          )
      ],
    );
  }
}

Example usage in a dialog:

Future<void> _showIconPickerDialog() async {
    IconData iconPicked = await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text(
            'Pick an icon',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          content: IconPicker(),
        );
      },
    );

    if (iconPicked != null) {
      debugPrint('Icon changed to $iconPicked');
      setState(() {
        myObject.icon = iconPicked;
      });
    }
  }

Here is a full list of all Flutter material icons in a list: https://github.com/NedWilbur/FlutterIconList/blob/master/icons.dart