flutter_iconpicker 2.1.5

Flutter Android iOS web

A Dialog for picking Icons in Flutter and use them anywhere. Can be used as a default Dialog or as a Adaptive Dialog.

FlutterIconPicker #

Version Generic badge

This package provides an IconPicker with supported (or custom provided) Icons which can be picked through an AlertDialog. All Icons are mapped with its names in the IconData. This is necessary to make it possible to search through the icons. Fulltextsearch including a note if no results where found.

IconPicker

Supported IconPacks #

IconPackSupported
Material
Material Outline
Cupertino
FontAwesome
LineAwesome

Usage #

To use this package, add flutter_iconpicker as a dependency in your pubspec.yaml file.

API-Reference #

ParameterTypeDefaultShort decscription
context (only required)BuildContext-Required due to AlertDialog's base.
adaptiveDialogboolfalseIf true, IconPicker will adapt depending on the screen size. If false, IconPicker will show itself inside an AlertDialog.
barrierDismissiblebooltrueDefines if the user can dismiss the dialog by tapping on the outside barrier.
iconSizedouble40.0Defines the size for the all icons, that can be picked.
iconColorColorTheme.of(context).iconTheme.colorSet the color for the all icons, that can be picked.
mainAxisSpacingdouble5.0How much space to place between children in a run in the main axis.
crossAxisSpacingdouble5.0How much space to place between children in a run in the cross axis.
iconPickerShapeShapeBorderRoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0))The dialogs shape for the picker.
backgroundColorColorTheme.of(context).dialogBackgroundColorThe color for the AlertDialog's background color.
constraintsBoxConstraintsIf adaptiveDialog == true then it's default is: BoxConstraints(maxHeight: 500, minWidth: 450, maxWidth: 720), otherwise: BoxConstraints(maxHeight: 350, minWidth: 450, maxWidth: 678).The dialogs BoxConstraints for limiting/setting: maxHeight, maxWidth, minHeight and minWidth.
titleWidgetText('Pick an icon')The title for the Picker. Sits above the [SearchBar] and [Icons].
closeChildWidgetText('Close',textScaleFactor: 1.25,)The content for the AlertDialog's action FlatButton which closes the default dialog.
searchIconIconIcon(Icons.search)Sets the prefix icon in the [SearchBar]
searchHintTextString'Search'Sets the hintText in the TextField of [SearchBar]
searchClearIconIconIcon(Icons.close)Sets the suffix icon in the [SearchBar]
noResultsTextString'No results for:'The text to show when no results where found for the search term.
showTooltipsboolfalseShows the labels underneeth the proper icon.
WARNING for Flutter Web: Until SKIA is disabled (like Flutter Web isn't ready for SKIA yet), this option could slow down the performance!
iconPackModeIconPackIconPack.materialThe mode which Icons to show.
customIconPackMap<String, IconData>nullThe customized icons that can be used instead.

IconPackMode #

You can select the wished IconPack through the argument: iconPackMode. This defaults to IconPack.material. For further usage have a look in the example.

You own Icons #

If you don't want to use the default IconPacks, you can also provide your own IconPack by creating a Map<String, IconData> with the names of your icons and the specific IconData. Just pass it to customIconPack and set the iconPackMode: IconPack.custom.

Result of IconPicker and further usage (saving and retreiving) #

The picker is returning (as shown in the example method _pickIcon() underneeth) an IconData which is nothing else then this class for example:

  IconData(0xe3af, fontFamily: 'MaterialIcons');    // Icons.camera

that's representing an Material icon.

So if you plan to save the picked icon anywhere (sqflite, firebase, etc.), you can use the serialization methods:

  1. Call this to convert the picked IconData to a Map:

IconData to Map

  iconDataToMap(iconData)
  1. You can retreive the IconData by passing the mapped IconData:

Map to IconData

  mapToIconData(map)

Example #

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> {
  Icon _icon;

_pickIcon() async {
  IconData icon = await FlutterIconPicker.showIconPicker(context, iconPackMode: 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>[
          RaisedButton(
            onPressed: _pickIcon,
            child: Text('Open IconPicker'),
          ),
          SizedBox(height: 10),
          AnimatedSwitcher(
            duration: Duration(milliseconds: 300),
            child: _icon != null ? _icon : Container()
          )
        ])
      ),
    );
  }
}
25
likes
90
pub points
83%
popularity

Publisher

ahmadre.com

A Dialog for picking Icons in Flutter and use them anywhere. Can be used as a default Dialog or as a Adaptive Dialog.

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

cupertino_icons, flutter, font_awesome_flutter, line_awesome_icons, outline_material_icons

More

Packages that depend on flutter_iconpicker