如何制作IconPicker，一个列出用户选择图标的小部件

Question

我想使用IconPicker，用户可以在其中搜索并选择一个Icon。如果我搜索“箭头”，它将给我：arrow_upward，arrow_back，arrow_back_ios等。您可以链接我一个可以做到这一点的图书馆吗？或给出如何实现该目标的想法？

我到处都看过，唯一能找到的就是这个：https://pub.dev/packages/flutter_picker。但是它没有搜索选项。

Answer 1

因此，该用户没有搜索内容，但可能会帮助其他人在Flutter中寻找图标选择器。这是我一直对自己感到恐惧的东西，但最终变得相对容易。

IconPicker窗口小部件：

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

对话框中的示例用法：

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;
      });
    }
  }

这里是列表中所有Flutter材质图标的完整列表：https://github.com/NedWilbur/FlutterIconList/blob/master/icons.dart

Answer 2

我刚刚在这里发布了您需要的确切软件包：

https://pub.dev/packages/flutter_iconpicker

玩得开心：）