A Flutter widget to show an icon collection to pick. This widget extend TextField and has a similar behavior as TextFormField

Overview

icon_picker

pub package

Buy Me A Beer

A Flutter widget to show an icon collection to pick.
This widget extend TextField and has a similar behavior as TextFormField

Usage

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  icon_picker: "^2.0.1"

In your library add the following import:

import 'package:icon_picker/icon_picker.dart';

For help getting started with Flutter, view the online documentation.

Example

IconPicker use an internal MaterialIcon collection by default, but you can set your own icon collection.
You just need to pass in iconCollection param a 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(
  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),
);

The result of val in onChanged, validator and onSaved will be a json String.
So, if you tap the icon ac_unit in the dialog window, the result value will be:

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

Transforming the String result of IconPicker in an IconData:

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

Preview

Overview

Comments
  • Update to Flutter 2.8 breaks package

    Update to Flutter 2.8 breaks package

    With Flutter 2.8 the package breaks the build with the following message:

    ERROR: ../../../.pub-cache/hosted/pub.dartlang.org/icon_picker-2.0.1/lib/material_icons.dart:38:27: Error: Member not found: 'six_ft_apart'.
    ../…/lib/material_icons.dart:38
    ERROR:     'six_ft_apart': Icons.six_ft_apart,
    ERROR:                           ^^^^^^^^^^^^
    Exception: Build process failed
    
    opened by jlnrrg 2
  • compile error

    compile error

    : Error: Member not found: 'six__ft_apart'.
    ../…/lib/material_icons.dart:46
        'six_ft_apart': Icons.six__ft_apart,
                              ^^^^^^^^^^^^^
    Failed to compile application.
    
    opened by gabrc52 1
  • upgrade flutter 3

    upgrade flutter 3

    /root/.pub-cache/hosted/pub.dartlang.org/scroll_to_index-2.1.1/lib/scroll_to_index.dart:358:57:
    Warning: Operand of null-aware operation '!' has type 'SchedulerBinding' which excludes null.
     - 'SchedulerBinding' is from 'package:flutter/src/scheduler/binding.dart' ('/usr/local/flutter/packages/flutter/lib/src/scheduler/binding.dart').
      Future _waitForWidgetStateBuild() => SchedulerBinding.instance!.endOfFrame;
                                                            ^
    /root/.pub-cache/hosted/pub.dartlang.org/flutter_iconpicker-3.1.4+1/lib/IconPicker/Packs/Material.dart:1230:25:
    Error: Member not found: 'class__sharp'.
      'class__sharp': Icons.class__sharp,
                            ^^^^^^^^^^^^
    /root/.pub-cache/hosted/pub.dartlang.org/flutter_iconpicker-3.1.4+1/lib/IconPicker/Packs/Material.dart:1231:27:
    Error: Member not found: 'class__rounded'.
      'class__rounded': Icons.class__rounded,
                              ^^^^^^^^^^^^^^
    /root/.pub-cache/hosted/pub.dartlang.org/flutter_iconpicker-3.1.4+1/lib/IconPicker/Packs/Material.dart:1232:28:
    Error: Member not found: 'class__outlined'.
      'class__outlined': Icons.class__outlined,
                               ^^^^^^^^^^^^^^^
    /root/.pub-cache/hosted/pub.dartlang.org/flutter_iconpicker-3.1.4+1/lib/IconPicker/iconPicker.dart:47:20:
    Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
     - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/usr/local/flutter/packages/flutter/lib/src/widgets/binding.dart').
        WidgetsBinding.instance!.addPostFrameCallback((_) {
                       ^
    Error: Compilation failed.
    
    opened by renanyoy 4
  • delay 3 seconds or a little more in open the _showIconPickerDialog

    delay 3 seconds or a little more in open the _showIconPickerDialog

    class CustomForm extends StatelessWidget { final _formKey = GlobalKey();

    CustomForm({Key? key}) : super(key: key);

    @override Widget build(BuildContext context) { return Form( key: _formKey, child: Column( children: [ IconPicker( controller: expenseController.categoryTextEditingController, icon: const Icon(Icons.start), onChanged: (jsonIcon) { } ), TextFormField( decoration: const InputDecoration( hintText: 'category ?', ), validator: (validateText) => validateInputText(validateText, 'category has to be at least 3 characters long..') ), Container( padding: const EdgeInsets.only(left: 50.0, top: 40.0), child: Row( children: [ IconButton(onPressed: () => Get.back(), icon: const Icon(Icons.cancel)), const SizedBox(width: 60,), IconButton( icon: const Icon(Icons.save), onPressed: () { // It returns true if the form is valid, otherwise returns false
    if (_formKey.currentState!.validate()) { // If the form is valid, display a Snackbar. Get.snackbar( 'texto', 'validado ok..', snackPosition: SnackPosition.BOTTOM ); } }, ), ], ), ) ], ), ); } }

    validateInputText(String? validateText, String errorMessage) { if (validateText!.isEmpty || validateText.length < 3) {
    return errorMessage; }
    return null; }`

    opened by brokercl 0
  • Flutter web takes time to open dialog

    Flutter web takes time to open dialog

    It seems there's a junk creates when i click on dropdown & takes 3-5 seconds to open the icons dialog.

    flutter doctor :

    Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel beta, 2.2.0-10.1.pre, on Mac OS X 10.15.1 19B88 darwin-x64, locale en-GB) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) [!] Xcode - develop for iOS and macOS ✗ Xcode installation is incomplete; a full installation is necessary for iOS development. Download at: https://developer.apple.com/xcode/download/ Or install Xcode via the App Store. Once installed, run: sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch ! CocoaPods 1.9.1 out of date (1.10.0 is recommended). CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions. [✓] Chrome - develop for the web [✓] Android Studio (version 4.1) [!] Android Studio ✗ Android Studio not found at /path/to/android/studio/Contents [✓] VS Code (version 1.55.2) [✓] Connected device (1 available)

    opened by thealmamun 0
Releases(v2.1.0)
A flutter widget to indicate loading progress. Easy to use, easy to extend

?? ?? ?? A flutter widget to indicate loading progress. Easy to use, easy to extend

Manuel Duarte 2 May 30, 2022
Flutter package to show and pick country code

country list pick Flutter plugin to pick country with output name, code, dialcode and flag of country Usage To use this plugin, add country_list_pick

fiaz 69 Nov 13, 2022
Do It Right - flutter app, simple android game to Increase Children’s Intention and Behavior About Littering

doitright "DoItRight": An Arabic Flutter Mobile App to Increase Children’s Inten

Yasser Alsleman 0 Jan 23, 2022
A plugin that brings native iOS keyboard behavior to Flutter.

iKeyboard A plugin that brings native iOS keyboard behavior to Flutter. Getting Started Just put IKeyboard as MaterialApp ancestor and put IKeyboard.b

Jonny Borges 1 May 4, 2022
A small transitioning dynamic app showing Dice changing Behavior

Dice_App A new Flutter project.This is a small transitioning dynamic app showing Dice changing Behavior. Getting Started This project is a starting po

Avinandan Bose 1 Mar 20, 2022
How login , register and log out Firebase Textformfield with focusNode. InheritedWidget example.

flutter_fire_base_register How login, register and log out Firebase. Textformfield with focusNode InheritedWidget exam. Stream provider usage. App Hom

Taylan YILDIZ 1 May 8, 2021
A focusable and blurable TextField widget

Flutter Focus Widget 一个可以让FocusNode失去焦点的Widget A focusable and blurable widget of based on the FocusNode. 新增的参数: bool showFocusArea 使用一个半透明的红色方框显示焦点区域

yeoman 9 Jul 17, 2022
An app to pick, upload and display images from camera and gallery with size and extension constraints.

image_uploader A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started i

Ehmad Saeed⚡ 4 Mar 7, 2022
Upload Files To Firebase Storage with Flutter. Pick images, videos, or other files from your device and upload them to Firebase.

Flutter Tutorial - Upload Files To Firebase Storage Upload Files To Firebase Storage with Flutter. Pick images, videos, or other files from your devic

Johannes Milke 30 Dec 28, 2022
Imagepickerweb - A picker with which you can pick images and videos from your Flutter web app

ImagePickerWeb This Web-Plugin allows Flutter Web to pick images (as File, Widget or Uint8List) and videos (as File or Uint8List). Many thanks goes to

Rebar Ahmad 40 Sep 26, 2022
In this repo you will see how to pick images from the image library and also, see how to store the selected images on Firebase.

flutterimageapp Flutter Tutorial - Upload Images using Firebase Storage. Flutter Tutorial - Upload Images using Firebase Storage Video series can be w

Whatsupcoders 60 Nov 4, 2022
Flutter-Apps-Collection: a collection of apps made in flutter for learning purpose

Flutter-Apps-Collection This is a repository of a collection of apps made in flutter for learning purpose Some Screenshots . . . Apps build in Flutter

Himanshu Singh 96 May 27, 2022
Text and TextField highlighted with rounded corners

rounded_background_text Highlight text with rounded corners Features ✅ Highlight

Bruno D'Luka 39 Nov 6, 2022
A simple, private tool to help pick a baby name.

Nom de Bébé A simple, private tool to help pick a baby name. https://nomdebebe.app/ Motivation I need to choose a name. There's lots of tools and apps

Kenton Hamaluik 257 Nov 23, 2022
FormField to pick one or more locations from open streat map

FormField to pick one or more locations from open streat map Features Pick single location Pick multi locations display open street maps can work with

Mohamed Dawood 13 Dec 15, 2022
Flutter-pinbox - UI for enter a PIN on flutter/dart, one digit per textField box.

flutter-pinbox This is a library for enter a PIN on flutter/dart. You can enter one digit per textField box. The detail The library locate at path lib

null 2 Feb 26, 2022
A TextField flutter package with tagging functionality.

Flutter Tagging A flutter package with tagging or multi-select functionality. Useful for adding Tag or Label Selection Forms. List<Language> _selected

Sarbagya Dhaubanjar 149 Sep 6, 2022
Allows tags to be entered inside textfield

textfield_tags This is a widget that allows your users to create tags by entering the tag's name inside of textfield and make the tags appear in the t

Eyoel Defare 75 Nov 2, 2022
Find The Latest trending and upcoming movies and tv shows with MovieDB app. The app contains all info about movies and tv shows. find similar movies or shows, Browse all genres, video trailers, backdrops, logos, and posters.

MovieDB App Features. Dynamic Theming Search Functionality Onboarding-Screen Select favourite movie Home Screen Tranding movie Movies different catego

Ansh rathod 80 Dec 12, 2022