Custom dropdown widget allows to add highly customizable dropdown widget in your projects. Features includes Search on list data, Network search, Multi-selection and many more.
Home Page: https://pub.dev/packages/animated_custom_dropdown
License: BSD 3-Clause "New" or "Revised" License
Error occurs using multiSelect factory
Flexible(
child: CustomDropdown.multiSelectSearch(
key: const Key("PickScanItems-ItemSerials"),
items: itemSerialsList.isEmpty ? [kEmptyList] : itemSerialsList,
onListChanged: _onItemSerialsChange,
hintText: "Select Item Serials",
initialItems: itemSerials.isEmpty ? null : itemSerials,
),
),
itemSerials and itemSerialsList are unmodifiable list (using freezed for immutability)
is it possible to refactor remove/add events in immutable way?
or is it possible to give developer to handle events by callbacks?
Hi, good work. I have a request. I need hide the underline and not show the option for it. Thanks
How to make the width of CustomDropdown stretch to the width of the texts of selected items?
Hello,
I believe it would be beneficial to introduce additional input parameters to allow for further customization of the widget, particularly for overriding the general style. In my case, while utilizing the 'custom-dropdown' widget, I've encountered an issue where it doesn't visually integrate well with the text input theme I have already defined. It appears less representative of the intended aesthetic, especially in a dark theme context.
Moreover, I attempted to alter the filled color of the dropdown, but the changes were not reflected. This limitation restricts the ability to match the dropdown with my application's color scheme.
I am convinced that your widget could achieve greater success if it incorporated these features, providing developers with the flexibility to tailor its appearance more closely to their app's design.
Thanks in advance.
it is possible to add list controller to CustomDropdown.multiSelectSearchRequest ?
What I will do
1-I will dedect bottom of listview.
2- then will get new data from endpoint.
3- then I will add new items to list
how to add clear button
Hey there, I have used CustomDropdown widget without closedFillColor and expandedFillColor parameters but the color of the test inside the menu is white. Is there a way to change it?
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.
/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((_) {
How to make decoration dropdown ("Pilih Pabrik Gula") customizable like "Tanggal" and "Masukkan Nomor Kontak" like the picture that i sent. Thanks
Non-modifiable Selected Items in Dropdown
Dear @AbdullahChauhan,
I have created a dropdown using the multiSelectSearchRequest() factory method and encountered an issue. The problem is that I am unable to modify the selected items programmatically.
It is a common use case to allow users to clear all the selected items through an icon button or perform other modifications to the selection. However, with the current implementation, it seems that the selected items cannot be modified once they are set.
The solution to this problem is pretty straight-forward 😊. You simply have to add a property for selected item(s) in your constructors and factory methods.
Please let me know if you need any further information or clarification. Any assistance or guidance on how to resolve this issue would be greatly appreciated. 😇
Thank you for your time and consideration. 🙏
Best regards,
Parsa Zeinali
Please adding '!' at line 36 (overlay_builder.dart)
Overlay.of(context)!.insert(entry);
Hi! I have recently started studying flutter. I decided to use your widget to create a drop-down list. Can you tell me how I can change the style of the text inside the list? One more question. Why don't I have icons displayed?
Is there any way we can have a callback to know when the dropdown is opened or closed?
I want to align header text on drop down items text to the right, Is there a way to do that currently?
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)
======== Exception caught by widgets library =======================================================
The following assertion was thrown while finalizing the widget tree:
A OverlayEntry was used after being disposed.
Hi!
It will be very useful to make property to autofocus on search field when click/focus on widget
I have an implementation of this package as:
CustomDropdown.searchRequest(
items: [some items],
futureRequest: futureRequest,
hintText: 'Search something...',
controller: _controllerForText,
onChanged: (selected) {
//some logic...
},
),It work perfect, but...
How can I specify the selected item, for example, when editing some model, I start the view with every field fill with the current value, how do I put the value corresponding to this dropdown.
Or if I have one dropdown that depend on other, B depend on A, when I select a item in A, B is updated with the info, and I update the view, but if I update the view A loose the selected item.
In defaults dropdown, there is a property 'value' with this function, what is the equivalent of this property in this package?
This is the one how worked for my:
DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: Text(
'Select type',
style: TextStyle(
fontSize: 14,
color: Theme.of(context).hintColor,
),
),
items: items
.map(
(item) => DropdownMenuItem<String>(
value: item,
child: Text(
item,
style: const TextStyle(
fontSize: 14,
),
),
),
)
.toList(),
value: initialValue, //this property is what I need
onChanged: (value) {
//some logic
},
),
)Hi,
is there any way to achieve a read-only or disabled state? I would assume that read-only state would just work as normal, but not update the value when the new option is chosen. And I'm not sure whether disabled state should fit into this library, as this could be just a collapsed input with no actions and no dropdown icon and maybe an additional styling
/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.
The dropdown must contains an option to add the leading widget just like flutter dropdown or ListTile widget.
Hello, thanks for the package, I was wondering if we can use a custom model for the dropdown as now it only handles a List<String>, for example:
MyModel(id: 'some-id', value: 'Kansas City')
And then use it like:
final list = [MyModel(id: 'some-id', value: 'Kansas City'),MyModel(id: 'some-id', value: 'Kansas City 2')]
CustomDropdown(
items: list,
controller: textEditingController,
),
And then use the listItemBuilder
In all constructors there is this assertion:
assert(items!.isNotEmpty, 'Items list must contain at least one item.',),My question is: why do we do need this? I have a case where the items come from the database and there is a high chance it might be empty so my code will be throwing whenever it returns an empty list from the database.
Need these custom paddings
listItemPadding: headerPadding: overlayOuterPadding: Can you please do it and update the package as soon as possible?
Issue with Non-Customizable Search Bar
Dear AbdullahChauhan,
I am writing to report an issue encountered with the search bar functionality in the dropdown of your package, which I have been utilizing effectively for some time. The core of the problem lies in the search bar's lack of customizability, particularly when integrated into applications using a dark theme.
Component Affected: Search bar in the dropdown
Nature of Issue: Lack of customizability in the dark theme
Impact: Users are unable to view the search term being typed, impairing the usability in dark-themed environments.
Probable Cause:
Upon investigation, I believe this issue may stem from a hardcoded fillColor value in the SeachField class within your source code. This hardcoded value does not adapt well to darker themes, leading to the visibility problem described.
I am using provider and when I use notifyListener item state it becomes unselected
how to enable prefix icon ?
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!
I can't change the height of the widget. It is not possible to do it with SizedBox.
On dropdown overlay open make sure the selected item is visible. I tried using scrollController.ensureVisible but it only takes upto 13th index. Rest item does not trigger this cause context somehow is null of them.
Hello, How do I change the hintText of the textField, I'm Brazilian and I need to change the text from 'search' to 'pesquisar'
Hi
need to clear the text of drop down already selected on a change of my segment control
how is that possible?
Thank you. This is the best dropdown menu I ever seen with Flutter. The default Dropdown is really horrible, you did very well.
When the search input is selected, it does not trigger the SingleChildScrollView effect.
Search not working in release build
Hello, bro!
It's a usefull library.
But I have a question, is it possible to change the border color of DropdownMenu?
It would be cool to have this feature)
It's so cool
: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
hi
how can i change default margin and padding for CustomDropdown?
How can I display the full text of the item, try something like: TextStyle(overflow: TextOverflow.visible). But help does not work, my text is 70 characters and I have several of that size. I want to display the full text when the menu is displayed
I have dropdown at the bottom of screen so when i open drop list i can't see item in android , i ios drop dwon open in top so that's no problm , when if no space added it not opon to up ??
Grey Hinttext when first time before u click is not showing on my code.
child: CustomDropdown(
hintText: 'Select job role', // Ini adalah hintText
items: statusList,
initialItem: statusList.isNotEmpty ? statusList[0] : null,
onChanged: (value) {
log('changing value to: $value');
},
),
Feature** Will be useful if work with form and validations
Thanks!
Hi
How to show more item in dropdown menu? like 10 item or full screen
I need list when click on the dropdown it needs to show the loader up to fetching the list. Then as usual we can search the list through .searchRequest method.
I want to send an alert if the user has not selected any item, how can I do that?
Hello,
Hope you are good.
I am using your nice package in my projects but at one place i found an issue.
1.CustomDropdown.search() is place at bottom of screen assume at 70% & 80% of screen
so when textfield is clicked keyboard hides search field and user can't see what is typing
The layout is like this that i can't move it to top as in top there is other dropdown and all linked with data validation.
So i added scaffold,singlechildscrollview but no effect.
Respected behaviour is scroll to top of keyboard.
In same page there is an textfield and after that there is all dropdowns with search.
So basically user enter value in textfield and click on below dropdown, so i want a callback or any params to dismiss or perform any task whenever user taps on dropdown before opening dropdown this way i can dismiss keyboard or unfocus above keyboard.
If possible add params to autofocus(bool) on CustomDropdown.search()to autofocus on textfield after opening dropdown
Thanks
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 ?
Hi,
how do i group dropdown item and show the group label on the dropdown options?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.