Flutter图标选择插件icon_picker的使用

介绍

icon_picker 是一个用于展示图标集合以供选择的 Flutter 小部件。该小部件扩展了 TextField，并且具有类似 TextFormField 的行为。

使用

在你的 Flutter 项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  ...
  icon_picker: "^2.1.0"

在你的库文件中添加以下导入语句：

import 'package:icon_picker/icon_picker.dart';

示例

IconPicker 默认使用内置的 MaterialIcon 集合，但你可以设置自己的图标集合。你只需要通过 iconCollection 参数传递一个 Map<String, IconData> 类型的对象。

final Map<String, IconData> myIconCollection = {
  'favorite': Icons.favorite,
  'home': Icons.home,
  'android': Icons.android,
  'album': Icons.album,
  'ac_unit': Icons.ac_unit,
  ...
}

使用 IconPicker 的示例代码如下：

IconPicker(
  initialValue: 'favorite', // 初始值
  icon: Icon(Icons.apps), // 图标
  labelText: "Icon", // 文本标签
  title: "Select an icon", // 标题
  cancelBtn: "CANCEL", // 取消按钮文本
  enableSearch: true, // 是否启用搜索功能
  searchHint: 'Search icon', // 搜索提示
  iconCollection: myIconCollection, // 自定义图标集合
  onChanged: (val) => print(val), // 改变时的回调
  onSaved: (val) => print(val), // 保存时的回调
);

当选择一个图标时，onChanged 和 onSaved 回调函数的返回值是一个 JSON 字符串。例如，如果你选择了 ac_unit 图标，则返回值将是：

'{"iconName": "ac_unit", "codePoint": 60219, "fontFamily": "MaterialIcons"}'

要将 IconPicker 返回的字符串转换为 IconData，可以使用以下代码：

String value = '{"iconName": "ac_unit", "codePoint": 60219, "fontFamily": "MaterialIcons"}';
var iconDataJson = jsonDecode(value);
IconData icon = IconData(iconDataJson['codePoint'], fontFamily: iconDataJson['fontFamily']);
Icon(icon);

预览

示例代码

以下是完整的示例代码：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter IconPicker Demo',
      home: MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey<FormState> _oFormKey = GlobalKey<FormState>();
  TextEditingController? _controller;
  //String _initialValue = '';
  String _valueChanged = '';
  String _valueToValidate = '';
  String _valueSaved = '';

  [@override](/user/override)
  void initState() {
    super.initState();

    //_initialValue = 'home';
    _controller = TextEditingController(text: 'home');

    _getValue();
  }

  /// This implementation is just to simulate a load data behavior
  /// from a database SQLite or from an API
  Future<void> _getValue() async {
    await Future.delayed(const Duration(seconds: 3), () {
      setState(() {
        //_initialValue = 'favorite';
        _controller?.text = 'favorite';
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter IconPicker Demo'),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.only(left: 20, right: 20, top: 10),
        child: Form(
          key: _oFormKey,
          child: Column(
            children: <Widget>[
              IconPicker(
                controller: _controller,
                //initialValue: _initialValue,
                icon: Icon(Icons.apps),
                labelText: "Icon",
                enableSearch: true,
                onChanged: (val) => setState(() => _valueChanged = val),
                validator: (val) {
                  setState(() => _valueToValidate = val ?? '');
                  return null;
                },
                onSaved: (val) => setState(() => _valueSaved = val ?? ''),
              ),
              SizedBox(height: 30),
              Text(
                'IconPicker data value onChanged:',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 10),
              SelectableText(_valueChanged),
              SizedBox(height: 30),
              ElevatedButton(
                onPressed: () {
                  final loForm = _oFormKey.currentState;

                  if (loForm?.validate() == true) {
                    loForm?.save();
                  }
                },
                child: Text('Submit'),
              ),
              SizedBox(height: 30),
              Text(
                'IconPicker data value validator:',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 10),
              SelectableText(_valueToValidate),
              SizedBox(height: 30),
              Text(
                'IconPicker data value onSaved:',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 10),
              SelectableText(_valueSaved),
              SizedBox(height: 30),
              ElevatedButton(
                onPressed: () {
                  final loForm = _oFormKey.currentState;
                  loForm?.reset();

                  setState(() {
                    _valueChanged = '';
                    _valueToValidate = '';
                    _valueSaved = '';
                  });
                },
                child: Text('Reset'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}