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

时间:2019-07-14 21:44:39

标签: flutter dart flutter-layout

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

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

2 个答案:

答案 0 :(得分:2)

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

https://pub.dev/packages/flutter_iconpicker

玩得开心:)

答案 1 :(得分: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