FlutterIconPicker
此软件包提供了一个包含所有Material Icons的IconPicker,可以通过AlertDialog进行选择。所有图标都与其在IconData中的名称进行了映射。这使得能够搜索图标成为可能。支持全文搜索,并在未找到结果时显示提示信息。
![]()
用法
要使用此软件包,请将flutter_iconpicker添加为pubspec.yaml文件中的依赖项。
IconPicker的结果及进一步使用(保存和检索)
如下面的示例方法_pickIcon()所示,此选择器返回的是IconData,它本身就是此类,例如
IconData(0xe3af, fontFamily: 'MaterialIcons'); // Icons.camera
这代表了一个Material图标。
因此,如果您计划将选择的图标保存在任何地方(sqflite,firebase等),则可以使用序列化方法
- 导入
import 'package:flutter_iconpicker/Serialization/iconDataSerialization.dart';
- 调用此方法可将选定的IconData转换为Map
IconData转Map
iconDataToMap(iconData)
- 通过传递映射的IconData,您可以检索IconData
Map转IconData
mapToIconData(map)
示例
import 'package:flutter/material.dart';
import 'package:flutter_iconpicker/flutter_iconpicker.dart';
void main() {
runApp(MaterialApp(
home: HomeScreen()
));
}
class HomeScreen extends StatefulWidget {
HomeScreen({Key key}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
Widget _icon;
_pickIcon() async {
IconData icon = await FlutterIconPicker.showIconPicker(context,
iconSize: 40,
iconPickerShape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
title: Text('Pick an icon',
style: TextStyle(fontWeight: FontWeight.bold)),
closeChild: Text(
'Close',
textScaleFactor: 1.25,
),
searchHintText: 'Search icon...',
noResultsText: 'No results for:'
);
_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>[
RaisedButton(
onPressed: _pickIcon,
child: Text('Open IconPicker'),
),
SizedBox(height: 10),
AnimatedSwitcher(
duration: Duration(milliseconds: 300),
child: _icon != null ? _icon : Container()
)
])
),
);
}
}