4

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.

Mateus Gomes
  • 45
  • 2
  • 4
  • Try to use a map with keys as Icon name, values as Icon Widget. For searching: use a TextFormField with a search button, according to search results show the Icon on your screen – Fayaz Jul 15 '19 at 07:35
  • If I do this, I need to create a map with all the Icons available, correct? Something like: { 'arrow-down': Icons.arrow-donw, 'school': Icons.school, ... }; – Mateus Gomes Jul 15 '19 at 13:22
  • Yeah, exactly! Did you try? – Fayaz Jul 15 '19 at 15:48
  • It works, but it'll be a lot of work to make this Map. Here is the code: https://github.com/UnDer-7/cade-onibus-mobile/blob/master/lib/widgets/icon_picker.dart The key methods are _handleSearch to make the filtering, and _iconsMap to create the Map When I'm done, I'll make a package with this widget – Mateus Gomes Jul 16 '19 at 03:21
  • The layout is broken, but the search is working – Mateus Gomes Jul 16 '19 at 03:27
  • take an IconData var above the class, update it according to search and then setState() – Fayaz Jul 16 '19 at 05:04
  • Have a look here https://pub.dev/packages/flutter_iconpicker – Rebar Dec 16 '19 at 02:55

2 Answers2

6

I just published the exact package you need here:

https://pub.dev/packages/flutter_iconpicker

have fun :)

Rebar
  • 1,076
  • 10
  • 19
3

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

Ned
  • 490
  • 4
  • 15