A Flutter select form field widget. It shows a list of options in a dropdown menu.

Overview

select_form_field

pub package

Buy Me A Beer

A Flutter select field widget. It shows a list of options in a dropdown menu.
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:
  ...
  select_form_field: "^2.2.0"

In your library add the following import:

import 'package:select_form_field/select_form_field.dart';

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

Example

Set items using a List map passing:

  • value: [String],
  • textStyle: [TextStyle | null],
  • label: [String | null],
  • icon: [Widget | null],
  • enable: [bool | null],
final List<Map<String, dynamic>> _items = [
  {
    'value': 'boxValue',
    'label': 'Box Label',
    'icon': Icon(Icons.stop),
  },
  {
    'value': 'circleValue',
    'label': 'Circle Label',
    'icon': Icon(Icons.fiber_manual_record),
    'textStyle': TextStyle(color: Colors.red),
  },
  {
    'value': 'starValue',
    'label': 'Star Label',
    'enable': false,
    'icon': Icon(Icons.grade),
  },
];
SelectFormField(
  type: SelectFormFieldType.dropdown, // or can be dialog
  initialValue: 'circle',
  icon: Icon(Icons.format_shapes),
  labelText: 'Shape',
  items: _items,
  onChanged: (val) => print(val),
  onSaved: (val) => print(val),
);

The result of val in onChanged, validator and onSaved will be a String.
So, if you tap on Box Label item on select menu the result will be boxValue.

Preview

Overview

Comments
  • Unhandled Exception: type 'Null' is not a subtype of type 'String'

    Unhandled Exception: type 'Null' is not a subtype of type 'String'

    If I click outside of the dropdown instead of selecting an item this error is returned: [VERBOSE-2:ui_dart_state.cc(186)] Unhandled Exception: type 'Null' is not a subtype of type 'String' #0 _SelectFormFieldState._showSelectFormFieldMenu (package:select_form_field/select_form_field.dart:516:12) <asynchronous suspension>

    opened by jackiepapers 7
  • Tap outside of select

    Tap outside of select

    I'm getting an error when I tap outside the select to cancel.

    Erro:

    [VERBOSE-2:ui_dart_state.cc(199)] Unhandled Exception: Bad state: No element
    #0      ListMixin.firstWhere (dart:collection/list.dart:167:5)
    #1      _SelectFormFieldState._showSelectFormFieldMenu (package:select_form_field/select_form_field.dart:524:29)
    <asynchronous suspension>
    

    .dart:

    SelectFormField(
      controller: _categoria,
      labelText: 'Categoria',
      items: _items,
      decoration: InputDecoration(
        labelText: "Categoria",
        border: OutlineInputBorder(),
      ),
      onChanged: (val) => print(val),
      onSaved: (val) => print(val),
      validator: (value) {
        if (value == null || value.isEmpty) {
        return 'Selecione uma Categoria';
        }
        return null;
      },
    ),
    

    items provider:

    final List<Map<String, dynamic>> _items = [
        {
          'value': 'despesa',
          'label': 'Despesas',
        },
        {
          'value': 'receita',
          'label': 'Receitas',
        },
        {
          'value': 'pagar',
          'label': 'Contas a Pagar',
        },
        {
          'value': 'receber',
          'label': 'Contas a Receber',
        },
      ];
    

    pubspec.yaml:

    environment:
      sdk: ">=2.12.0 <3.0.0"
    
    select_form_field: ^2.0.0
    
    opened by ezequiel88 6
  • Expected a value of type '(() => Map<String, String>)?', but got one of type '() => Map<String, dynamic>'

    Expected a value of type '(() => Map)?', but got one of type '() => Map'

    This error occurs since the last commit, probably because of the firstWhere() line 431 (although I don't know why).

    I haven't found any way to fix this bug except replacing the firstWhere with something else (forEach + return when the condition is valid) I put my solution in a pull request if you want to accept it.

    opened by HevelMc 3
  • dependent dropdown

    dependent dropdown

    Hi, how to create dependent dropdown if i select 1 options the other select only show the relation with first dropdown select is posible with this packages

    opened by CARocha 1
  •  Unhandled Exception

    Unhandled Exception

    I have 2 objects with value & label and when I select one of them this error shows up

    E/flutter ( 4857): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: type '() => Map<String, dynamic>' is not a subtype of type '(() => Map<String, String>)?' of 'orElse' E/flutter ( 4857): #0 ListMixin.firstWhere (dart:collection/list.dart) E/flutter ( 4857): #1 _SelectFormFieldState._showSelectFormFieldMenu (package:select_form_field/select_form_field.dart:527:29) E/flutter ( 4857): <asynchronous suspension>

    opened by GeorgeS19231 0
  • refresh _labelController after _handleControllerChanged

    refresh _labelController after _handleControllerChanged

    If the SelectFromField text value is changed by code with a controller, it doesn't reflect the new value in the TextField. This happens because _labelController isn't updated. _labelController must updated on _handleControllerChanged().

    opened by dumabg 1
  • Making dynamic height resize like in TextFormField

    Making dynamic height resize like in TextFormField

    When u set maxLines = null in TextFormField it dynamically resize to show whole input text, here u can't do that, and text is being cropped if it's too long :)

    opened by Dariusz-Pluta 1
  • searching in the list not working

    searching in the list not working

    Hello I am having an issue regarding searching in "SelectFormFieldType.dialog", I don't know if I have missed something but it seems like the search doesn't seem to work.

    Here is my code:

    List of items:

    List<Map<String, dynamic>> _items = [ { 'value': '', 'label': 'Select Account', 'icon': Icon(Icons.account_balance) }, {'value': '', 'label': 'Account 1', 'icon': Icon(Icons.account_balance)}, {'value': '', 'label': 'Account 2', 'icon': Icon(Icons.account_balance)}, {'value': '', 'label': 'Account 3', 'icon': Icon(Icons.account_balance)} ];

    Here is selectformfield: SelectFormField( dialogCancelBtn: 'Cancel', enableSearch: true, dialogSearchHint: 'Search account', type: SelectFormFieldType.dialog, // or can be dialog icon: Icon(Icons.account_balance), labelText: 'Select Account', hintText: 'Select Account', items: _items, onChanged: (val) { print(val); }, )

    Here is the screenshot of the list and output when searching item Screenshot_1634376900 Screenshot_1634376922

    opened by mnarsely 2
Releases(v2.2.0)
Responsive Scaffold - On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item. Maintainer: @rodydavis

responsive_scaffold View the online demo here! On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item.

Flutter Community 346 Dec 2, 2022
Custom dropdown widget allows to add highly customizable widget in your projects with proper open and close animations and also comes with form required validation.

Custom Dropdown Custom Dropdown package lets you add customizable animated dropdown widget. Features Lots of properties to use and customize dropdown

Abdullah Chauhan 22 Dec 29, 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
Masked text field - A flutter package for masked text field for formet your text and good UI

Masked Text Field Masked Text Field Features A package for masked text field for

Alok Dubey 7 Sep 4, 2022
Custom calendar dialog widget for flutter with (multi select, single select, date range) mode

some calendar Custom calendar with Multi-select & range configurable calendar New Features Added View Mode Somecalendar #15 Help Maintenance I've take

Irvan Lutfi Gunawan 69 Jan 3, 2023
This package allows you to scroll/select the value directly from the dropdown with less effort and time.

Direct Select This package allows you to scroll/select the value directly from the dropdown with less effort and time. Inspired by Virgil Pana shot Sa

Diego Velásquez López 62 Nov 25, 2022
Dropdown List Choices Widget For Flutter

Dropdown List Choices Highly versatile Widget to search through a single or mult

MindInventory 48 Dec 30, 2022
Flutter package to create list of radio button, by providing a list of objects it can be a String list or list of Map.

Custom Radio Group List Flutter package to create list of radio button, by providing a list of objects it can be a String list or list of Map. Feature

Ashok Kumar Verma 0 Nov 30, 2021
This is a repository for Flutter Focused Menu, an easy to implement package for adding Focused Long Press Menu to Flutter Applications

Focused Menu This is an easy to implement package for adding Focused Long Press Menu to Flutter Applications Current Features Add Focused Menu to Any

Paras Jain 160 Dec 26, 2022
Arissettingsmenuexm - Settings Menu with different choices by clicking on a Popup Menu Button in Flutter

Flutter Tutorial - Settings Menu & AppBar Dropdown Menu Show a Flutter Settings

Behruz Hurramov 1 Jan 9, 2022
Flutter-pop-up-menu - Pop up Menu - Mobile Devices Programming

Pop Up Menu App A flutter demo app with a pop up menu button Developer Alexander Sosa (https://www.linkedin.com/in/alexander-sosa-asillanes/) Technolo

Alexander Sosa 0 Jan 3, 2022
This is my way to build a Tagged Search Field that display a list with suggestions while the user type.

tagged_search_field This is my way to build a Tagged Search Field that display a list with suggestions while the user type. A regular search field at

Sherly Cabrera Sánchez 0 Nov 5, 2021
Flutter form fields designed to take much of the burden of form-related coding off the programmer's back — masks, validations, keyboard type, etc.

well_formed Contents Overview Getting Started Demo application References Overview Well-Formed Widget Fields - Well-Formed - is a collection of Flutte

Dartoos 7 Nov 2, 2022
Form builder image picker - Form builder image picker for flutter

form_builder_image_picker Field for picking image(s) from Gallery or Camera for

Ferri Sutanto 0 Jan 28, 2022
Jannis 0 Jan 29, 2022
User auth form - Signup and signin user auth form with ability to stay signed in and have an option to signout.

user_auth_form SIgnup and signin user authentification form Getting Started This project is a starting point for a Flutter application. A few resource

null 0 Jan 6, 2022
A Dart widget for entering international telephone numbers with dropdown searching input countries

Dart Tel Input A Dart widget for entering international telephone numbers with dropdown searching input countries Getting Started Add the following li

աɨռɢӄաօռɢ 8 Oct 29, 2020
Music-App-Flutter - This is a flutter app which has some songs displayed in the form of a list and user can play any of them by clicking on the name of the song.

music_player_app A music player app made by me in flutter About the App This is a music player which i made to play audio files which we have passed i

Harsh Kumar Khatri 3 Apr 1, 2021
Horizontal list - A horizontal list widget to use in mainly for web or desktop application

horizontal_list A horizontal list widget with buttons next and previous. You can

Daniel 2 Feb 2, 2022