How can I allow a user to choose an Icon for something they're adding?

Question

Is it possible to load all the icons from the Icon class and allow the user to pick one of them to be used? For example i want the user to input a text in a textfield and then pick an icon then add that text and icon to some sort of a list. I already know the text part but I can't figure out how to load all the icons and let the user choose one.

It may be a better idea to have only a limited set of icon that applies to that particular entry. You could enhance by giving it colors of user choice. For example, no need to display a mail icon if the entry is related to a restaurant. — Doc, Apr 14 '19 at 09:20
please give a bit more details about what exactly you want to do.. the Icon class does not contain any icons, you have to pass in an `IconData`. So there is no way to "load all icons from Icon class", as it contains none. — Herbert Poul, Apr 14 '19 at 09:20
I have an option for the user to add a "category" of their payments, so to add a new category they provide a text that's the title of the category (Shopping for example) and then i want to let the user choose an icon for that category. Icons.shopping_basket for example. How would i do that? — , Apr 14 '19 at 10:43
Maybe this package might help, I haven't tried it but it has icon picker in it. https://pub.dartlang.org/packages/flutter_picker — mirkancal, Apr 14 '19 at 12:41

score 0 · Accepted Answer · answered Apr 14 '19 at 12:50

Flutter Icons are stored as static class members and reflect function is required to get a list of members of a class. Dart mirrors are needed to use reflect function and flutter doesn't allow using dart mirrors. So, it seems that it's not possible (or at least easy) to get a list of these members.

See here.

I suggest using material_design_icons_flutter package with below code.

@override
Widget build(BuildContext context) {
    List<String> iconListKeys = iconMap.iconMap.keys.toList();
    MdiIcons iconLib = new MdiIcons();
    List<IconData> iconList = iconListKeys
            .map<IconData>((String iconName) => iconLib[iconName])
            .toList();
    return Scaffold(
        appBar: AppBar(
            title: Text(widget.title),
        ),
        body: Center(
            child: ListView(
                    children: iconList.map<Widget>((icon) => Icon(icon)).toList()),
        ),
    );
}

keep in mind that the mentioned package may become outdated or discontinued. So above solution doesn't seem to be good for general usage.

score 0 · Answer 2 · answered Apr 19 '22 at 06:35

Use this package called as Icon Picker

Example:

import 'package:flutter/material.dart';
import 'package:flutter_iconpicker/flutter_iconpicker.dart';

void main() {
  runApp(
    const MaterialApp(
      home: HomeScreen(),
    ),
  );
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Icon? _icon;

  _pickIcon() async {
    IconData? icon = await FlutterIconPicker.showIconPicker(context,
        iconPackModes: [IconPack.cupertino]);

    _icon = Icon(icon);
    setState(() {});

    debugPrint('Picked Icon:  $icon');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _pickIcon,
              child: const Text('Open IconPicker'),
            ),
            const SizedBox(height: 10),
            AnimatedSwitcher(
              duration: const Duration(milliseconds: 300),
              child: _icon ?? Container(),
            ),
          ],
        ),
      ),
    );
  }
}

How can I allow a user to choose an Icon for something they're adding?

2 Answers2