如何允许用户为他们要添加的内容选择图标？

Question

是否可以从 Icon 类加载所有图标并允许用户选择其中一个要使用的图标？例如，我希望用户在文本字段中输入文本，然后选择一个图标，然后将该文本和图标添加到某种列表中。我已经知道文本部分，但我无法弄清楚如何加载所有图标并让用户选择一个。

Answer 1

颤振图标存储为静态类成员，需要反射函数来获取类的成员列表。 飞镖镜需要使用反射函数，而颤振不允许使用飞镖镜。因此，似乎不可能(或至少不容易(获得这些成员的列表。

看这里。

我建议使用以下代码material_design_icons_flutter包。

@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()),
        ),
    );
}

请记住，上述软件包可能会过时或停产。因此，上述解决方案似乎不适合一般用途。

Answer 2

使用这个称为图标选择器的包

例：

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(),
            ),
          ],
        ),
      ),
    );
  }
}