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.

Overview

Custom Dropdown

Custom Dropdown package lets you add customizable animated dropdown widget.

Features

Lots of properties to use and customize dropdown widget as per your need. Also usable under Form widget for required validation.


Getting started

  1. Add the latest version of package to your pubspec.yaml (and run flutter pub get):
dependencies:
  animated_custom_dropdown: 1.0.1
  1. Import the package and use it in your Flutter App.
import 'package:animated_custom_dropdown/custom_dropdown.dart';

Preview

Example App


Todos

Already working on some improvements including:

  • Align on screen bottom so if space under widget is small, dropdown will open above the widget with proper animations.

Issues & Feedback

Please file an issue to send feedback or report a bug. Thank you!

Comments
  • upgrade flutter 3.0

    upgrade flutter 3.0

    We can now discard the warning and wait until the authors of these packages deal with the new changes in flutter 3 to solve the problem. The developers now catching up for those changes and these should be new versions of the affected packages soon.

    https://stackoverflow.com/questions/72239258/flutter-warning-operand-of-null-aware-operation-has-type-widgetsbinding

    /C:/tools/flutter_sdk/.pub-cache/hosted/pub.dartlang.org/animated_custom_dropdown-1.2.1/lib/dropdown_overlay.dart:57:20: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.

    'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/C:/tools/flutter_sdk/packages/flutter/lib/src/widgets/binding.dart'). package:flutter/…/widgets/binding.dart:1

    WidgetsBinding.instance?.addPostFrameCallback((_) {

    opened by NikitaBerezniki 2
  • _AnimatedSectionState#c115a(ticker active) was disposed with an active Ticker

    _AnimatedSectionState#c115a(ticker active) was disposed with an active Ticker

    I am using valuelistenable builder and once a value from dropdown is selected i changed the drop down to text but this is what i additionally get when onChange is called

    ======== Exception caught by widgets library ======================================================= The following assertion was thrown while finalizing the widget tree: _AnimatedSectionState#c115a(ticker active) was disposed with an active Ticker.

    _AnimatedSectionState created a Ticker via its SingleTickerProviderStateMixin, but at the time dispose() was called on the mixin, that Ticker was still active. The Ticker must be disposed before calling super.dispose().

    Tickers used by AnimationControllers should be disposed by calling dispose() on the AnimationController itself. Otherwise, the ticker will leak.

    The offending ticker was: Ticker(created by _AnimatedSectionState#c115a) The stack trace when the Ticker was actually created was: #0 new Ticker. (package:flutter/src/scheduler/ticker.dart:67:40) #1 new Ticker (package:flutter/src/scheduler/ticker.dart:69:6) #2 SingleTickerProviderStateMixin.createTicker (package:flutter/src/widgets/ticker_provider.dart:198:15) #3 new AnimationController (package:flutter/src/animation/animation_controller.dart:246:21) #4 _AnimatedSectionState.prepareAnimations (package:animated_custom_dropdown/animated_section.dart:33:22) #5 _AnimatedSectionState.initState (package:animated_custom_dropdown/animated_section.dart:28:5) #6 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4893:57) #7 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4729:5) ... Normal element mounting (64 frames) #71 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3790:14) #72 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6422:36) #73 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6433:32) ... Normal element mounting (63 frames) #136 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3790:14) #137 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6422:36) #138 Element.updateChild (package:flutter/src/widgets/framework.dart:3540:18) #139 RenderObjectElement.updateChildren (package:flutter/src/widgets/framework.dart:5845:32) #140 MultiChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:6445:17) #141 Element.updateChild (package:flutter/src/widgets/framework.dart:3501:15) #142 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4780:16) #143 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4928:11) #144 Element.rebuild (package:flutter/src/widgets/framework.dart:4477:5) #145 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2659:19) #146 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:882:21) #147 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:363:5) #148 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144:15) #149 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1081:9) #150 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:995:5) #154 _invoke (dart:ui/hooks.dart:151:10) #155 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:308:5) #156 _drawFrame (dart:ui/hooks.dart:115:31) (elided 3 frames from dart:async)

    When the exception was thrown, this was the stack: #0 SingleTickerProviderStateMixin.dispose. (package:flutter/src/widgets/ticker_provider.dart:209:7) #1 SingleTickerProviderStateMixin.dispose (package:flutter/src/widgets/ticker_provider.dart:223:6) #2 _AnimatedSectionState.dispose (package:animated_custom_dropdown/animated_section.dart:64:11) #3 StatefulElement.unmount (package:flutter/src/widgets/framework.dart:4983:11) #4 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1926:13) #5 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #6 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:4807:14) #7 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #8 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #9 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:4807:14) #10 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #11 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #12 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:6271:14) #13 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #14 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #15 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:4807:14) #16 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #17 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #18 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:6271:14) #19 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #20 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #21 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:4807:14) #22 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #23 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #24 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:4807:14) #25 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #26 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #27 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:6271:14) #28 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #29 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #30 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:6271:14) #31 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #32 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #33 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:4807:14) #34 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #35 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #36 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:6271:14) #37 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #38 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #39 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:4807:14) #40 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #41 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #42 MultiChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:6386:16) #43 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #44 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #45 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:6271:14) #46 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #47 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #48 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:6271:14) #49 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #50 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #51 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:4807:14) #52 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #53 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #54 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:6271:14) #55 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #56 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #57 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:6271:14) #58 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #59 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #60 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:4807:14) #61 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #62 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #63 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:4807:14) #64 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #65 _InactiveElements._unmount. (package:flutter/src/widgets/framework.dart:1924:7) #66 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:4807:14) #67 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1922:13) #68 ListIterable.forEach (dart:_internal/iterable.dart:39:13) #69 _InactiveElements._unmountAll (package:flutter/src/widgets/framework.dart:1935:25) #70 BuildOwner.lockState (package:flutter/src/widgets/framework.dart:2519:15) #71 BuildOwner.finalizeTree (package:flutter/src/widgets/framework.dart:2932:7) #72 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:884:19) #73 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:363:5) #74 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144:15) #75 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1081:9) #76 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:995:5) #80 _invoke (dart:ui/hooks.dart:151:10) #81 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:308:5) #82 _drawFrame (dart:ui/hooks.dart:115:31) (elided 3 frames from dart:async)

    ======== Exception caught by widgets library ======================================================= The following assertion was thrown while finalizing the widget tree: A OverlayEntry was used after being disposed.

    Once you have called dispose() on a OverlayEntry, it can no longer be used. When the exception was thrown, this was the stack: #0 ChangeNotifier._debugAssertNotDisposed. (package:flutter/src/foundation/change_notifier.dart:114:9) #1 ChangeNotifier._debugAssertNotDisposed (package:flutter/src/foundation/change_notifier.dart:120:6) #2 ChangeNotifier.notifyListeners (package:flutter/src/foundation/change_notifier.dart:288:12) #3 OverlayEntry._updateMounted (package:flutter/src/widgets/overlay.dart:130:5) #4 _OverlayEntryWidgetState.dispose (package:flutter/src/widgets/overlay.dart:200:18) #5 StatefulElement.unmount (package:flutter/src/widgets/framework.dart:4983:11) #6 _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1926:13) #7 ListIterable.forEach (dart:_internal/iterable.dart:39:13) #8 _InactiveElements._unmountAll (package:flutter/src/widgets/framework.dart:1935:25) #9 BuildOwner.lockState (package:flutter/src/widgets/framework.dart:2519:15) #10 BuildOwner.finalizeTree (package:flutter/src/widgets/framework.dart:2932:7) #11 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:884:19) #12 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:363:5) #13 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144:15) #14 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1081:9) #15 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:995:5) #19 _invoke (dart:ui/hooks.dart:151:10) #20 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:308:5) #21 _drawFrame (dart:ui/hooks.dart:115:31) (elided 3 frames from dart:async)

    bug 
    opened by MalikSamiAwan 2
  • error: disallowIndicator() method does not exists

    error: disallowIndicator() method does not exists

    Error found in dropdown_overlay.dart file, line 159

    Error: The method 'disallowIndicator' isn't defined for the class 'OverscrollIndicatorNotification'.
    Try correcting the name to the name of an existing method, or defining a method named 'disallowIndicator'.notification.disallowIndicator();
    

    Solution: I believe replacing the disallowIndicator() with disallowGlow() solves the problem!

    opened by devmuaz 2
  • Kindly update to Flutter 3.0.1

    Kindly update to Flutter 3.0.1

    : Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.

    • 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../flutter/packages/flutter/lib/src/widgets/binding.dart'). WidgetsBinding.instance?.addPostFrameCallback((_) {
    opened by moinkhan780 1
  • expose resultWidget so that it can be customized

    expose resultWidget so that it can be customized

    resultWidget function is added which take BuildContext and String (result) as argument so that the result can be customized. since it's not required parameter, a default widget is provided

    TODO: headerWidget function

    opened by Mohamed25885 1
  • Error in first running

    Error in first running

    /C:/flutter/.pub-cache/hosted/pub.dartlang.org/animated_custom_dropdown-1.2.2/lib/dropdown_overlay.dart:57:29: Error: Method 'addPostFrameCallback' cannot be called on 'WidgetsBinding?' because it is potentially null.

    • 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/C:/flutter/packages/flutter/lib/src/widgets/binding.dart'). Try calling using ?. instead. WidgetsBinding.instance.addPostFrameCallback(() { ^^^^^^^^^^^^^^^^^^^^ /C:/flutter/.pub-cache/hosted/pub.dartlang.org/animated_custom_dropdown-1.2.2/lib/dropdown_overlay.dart:185:33: Error: No named parameter with the name
      'thumbVisibility'. thumbVisibility: MaterialStateProperty.all( ^^^^^^^^^^^^^^^ /C:/flutter/packages/flutter/lib/src/material/scrollbar_theme.dart:33:9: Context: Found this candidate, but the arguments don't match. const ScrollbarThemeData({ ^^^^^^^^^^^^^^^^^^ /C:/flutter/.pub-cache/hosted/pub.dartlang.org/animated_custom_dropdown-1.2.2/lib/dropdown_overlay.dart:57:5: Warning: The class 'WidgetsBinding' cannot be Try replacing '?.' with '.' WidgetsBinding?.instance.addPostFrameCallback((
      ) { ^^^^^^^^^^^^^^ /C:/flutter/.pub-cache/hosted/pub.dartlang.org/animated_custom_dropdown-1.2.2/lib/dropdown_overlay.dart:57:30: Error: Method 'addPostFrameCallback' cannot be called on 'WidgetsBinding?' because it is potentially null.
    • 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/C:/flutter/packages/flutter/lib/src/widgets/binding.dart'). Try calling using ?. instead. WidgetsBinding?.instance.addPostFrameCallback((_) { ^^^^^^^^^^^^^^^^^^^^ /C:/flutter/.pub-cache/hosted/pub.dartlang.org/animated_custom_dropdown-1.2.2/lib/dropdown_overlay.dart:185:33: Error: No named parameter with the name
      'thumbVisibility'. thumbVisibility: MaterialStateProperty.all( ^^^^^^^^^^^^^^^ /C:/flutter/packages/flutter/lib/src/material/scrollbar_theme.dart:33:9: Context: Found this candidate, but the arguments don't match. const ScrollbarThemeData({ ^^^^^^^^^^^^^^^^^^
    opened by agamdevit 0
  • Flutter web hover issue

    Flutter web hover issue

    I tried to override mouse cursor by using MouseRegion( cursor: SystemMouseCursors.click, child: CustomDropdown.search()... ) to click for web development but was unsuccessful. Is it possible to change this so that we can edit pointer to click when use hovers dropdown while using browser ?

    opened by shutdown-s 1
Owner
Abdullah Chauhan
Reading Books * Traveling, Solo Travel * Tourism, Wildlife * Computer Science Student * Front-end UI, Flutter Dev Programming, Development Design Thinking
Abdullah Chauhan
Generate secure passwords, check for exposed passwords, get visual feedback for password strength or get form validation with a minimum password strength required.

password_strength_checker Generate secure passwords, check for exposed passwords, get visual feedback for password strength or get form validation wit

Dario Varriale 6 Aug 8, 2023
A customizable carousel slider for Flutter. Supports infinite sliding, custom indicators, and custom animations with many pre-built indicators and animations.

Flutter Carousel Slider A customizable carousel slider for flutter Screenshots Installing dependencies: flutter_carousel_slider: ^1.0.8 Demo Demo a

Udara Wanasinghe 23 Nov 6, 2022
A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

flutter_carousel_widget A customizable carousel slider widget in Flutter. Features Infinite Scroll Custom Child Widget Auto Play Horizontal and Vertic

NIKHIL RAJPUT 7 Nov 26, 2022
A Flutter package that allows Android users to press the back-button twice to close the app.

double_back_to_close_app A Flutter package that allows Android users to press the back-button twice to close the app. Usage Inside a Scaffold that wra

Hugo Passos 57 Oct 10, 2022
A Flutter package that allows Android users to press the back-button twice to close the app.

double_back_to_close_app A Flutter package that allows Android users to press the back-button twice to close the app. Usage Inside a Scaffold that wra

Hugo Passos 57 Oct 10, 2022
Add beautiful animated effects & builders in Flutter, via an easy, highly customizable unified API.

Flutter Animate A performant library that makes it simple to add almost any kind of animated effect in Flutter. Pre-built effects, like fade, scale, s

Grant Skinner 352 Dec 25, 2022
A Flutter select form field widget. It shows a list of options in a dropdown menu.

select_form_field A Flutter select field widget. It shows a list of options in a dropdown menu. This widget extend TextField and has a similar behavio

m3uzz Soluções em TI 8 Sep 14, 2022
Codeflow 19 Sep 29, 2022
A Flutter application with proper navigation and routes handling and API data fetching and posting.

Flutter-Navigation-and-API-Integration A Flutter application with proper navigation and routes handling and API data fetching and posting. ⏮ Preview G

Ehmad Saeed⚡ 7 Oct 5, 2022
Flutter Image add drag sort, Image add drag sort, support click event, delete, add, long press drag sort.

flutter_image_add_drag_sort Flutter Image add drag sort, Image add drag sort, support click event, delete, add, long press drag sort, support video fi

null 5 Jun 23, 2020
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
A highly customizable Flutter widget to render and interact with JSON objects.

The spreadsheet with superpowers ✨ ! JSON Data Explorer A highly customizable widget to render and interact with JSON objects. Features Expand and col

rows 15 Dec 21, 2022
A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions

Snapping Sheet A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions Can adapt to scrolla

Adam Jonsson 364 Dec 6, 2022
The flutter_calendar_widget is highly customizable calendar widget.

flutter_calendar_widget The flutter_calendar_widget is highly customizable calendar widget. Not only can you change the style, but you can also change

dooboolab 4 Jun 24, 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
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