├── .github └── FUNDING.yml ├── .gitignore ├── .metadata ├── CHANGELOG.md ├── LICENSE ├── README.md ├── analysis_options.yaml ├── example ├── .gitignore ├── .metadata ├── analysis_options.yaml ├── android │ ├── .gitignore │ ├── app │ │ ├── build.gradle │ │ └── src │ │ │ ├── debug │ │ │ └── AndroidManifest.xml │ │ │ ├── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── kotlin │ │ │ │ └── com │ │ │ │ │ └── example │ │ │ │ │ └── example │ │ │ │ │ └── MainActivity.kt │ │ │ └── res │ │ │ │ ├── drawable-v21 │ │ │ │ └── launch_background.xml │ │ │ │ ├── drawable │ │ │ │ └── launch_background.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── values-night │ │ │ │ └── styles.xml │ │ │ │ └── values │ │ │ │ └── styles.xml │ │ │ └── profile │ │ │ └── AndroidManifest.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ └── gradle-wrapper.properties │ └── settings.gradle ├── ios │ ├── .gitignore │ ├── Flutter │ │ ├── AppFrameworkInfo.plist │ │ ├── Debug.xcconfig │ │ └── Release.xcconfig │ ├── Runner.xcodeproj │ │ ├── project.pbxproj │ │ ├── project.xcworkspace │ │ │ ├── contents.xcworkspacedata │ │ │ └── xcshareddata │ │ │ │ ├── IDEWorkspaceChecks.plist │ │ │ │ └── WorkspaceSettings.xcsettings │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── Runner.xcscheme │ ├── Runner.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ ├── IDEWorkspaceChecks.plist │ │ │ └── WorkspaceSettings.xcsettings │ └── Runner │ │ ├── AppDelegate.swift │ │ ├── Assets.xcassets │ │ ├── AppIcon.appiconset │ │ │ ├── Contents.json │ │ │ ├── Icon-App-1024x1024@1x.png │ │ │ ├── Icon-App-20x20@1x.png │ │ │ ├── Icon-App-20x20@2x.png │ │ │ ├── Icon-App-20x20@3x.png │ │ │ ├── Icon-App-29x29@1x.png │ │ │ ├── Icon-App-29x29@2x.png │ │ │ ├── Icon-App-29x29@3x.png │ │ │ ├── Icon-App-40x40@1x.png │ │ │ ├── Icon-App-40x40@2x.png │ │ │ ├── Icon-App-40x40@3x.png │ │ │ ├── Icon-App-60x60@2x.png │ │ │ ├── Icon-App-60x60@3x.png │ │ │ ├── Icon-App-76x76@1x.png │ │ │ ├── Icon-App-76x76@2x.png │ │ │ └── Icon-App-83.5x83.5@2x.png │ │ └── LaunchImage.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchImage.png │ │ │ ├── LaunchImage@2x.png │ │ │ ├── LaunchImage@3x.png │ │ │ └── README.md │ │ ├── Base.lproj │ │ ├── LaunchScreen.storyboard │ │ └── Main.storyboard │ │ ├── Info.plist │ │ └── Runner-Bridging-Header.h ├── lib │ ├── main.dart │ ├── models │ │ └── job.dart │ └── widgets │ │ ├── controller_validation_dropdown.dart │ │ ├── decorated_dropdown.dart │ │ ├── multi_select_controller_dropdown.dart │ │ ├── multi_select_dropdown.dart │ │ ├── search_dropdown.dart │ │ ├── search_request_dropdown.dart │ │ ├── simple_dropdown.dart │ │ └── validation_dropdown.dart ├── pubspec.lock ├── pubspec.yaml └── web │ ├── favicon.png │ ├── icons │ ├── Icon-192.png │ ├── Icon-512.png │ ├── Icon-maskable-192.png │ └── Icon-maskable-512.png │ ├── index.html │ └── manifest.json ├── lib ├── custom_dropdown.dart ├── models │ ├── controllers.dart │ ├── custom_dropdown_decoration.dart │ ├── custom_dropdown_list_filter.dart │ ├── disabled_decoration.dart │ ├── list_item_decoration.dart │ └── search_field_decoration.dart ├── utils │ └── signatures.dart └── widgets │ ├── animated_section.dart │ ├── dropdown_field.dart │ ├── dropdown_overlay │ ├── dropdown_overlay.dart │ └── widgets │ │ ├── items_list.dart │ │ └── search_field.dart │ └── overlay_builder.dart ├── pubspec.lock ├── pubspec.yaml ├── readme_assets └── preview.gif └── screenshots ├── example_1.jpg ├── example_2.jpg ├── example_3.jpg └── preview.png /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | custom: ['buymeacoffee.com/abdullahchauhan'] 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Miscellaneous 2 | *.class 3 | *.log 4 | *.pyc 5 | *.swp 6 | .DS_Store 7 | .atom/ 8 | .buildlog/ 9 | .history 10 | .svn/ 11 | 12 | # IntelliJ related 13 | *.iml 14 | *.ipr 15 | *.iws 16 | .idea/ 17 | 18 | # The .vscode folder contains launch configuration and tasks you configure in 19 | # VS Code which you may wish to be included in version control, so this line 20 | # is commented out by default. 21 | #.vscode/ 22 | 23 | # Flutter/Dart/Pub related 24 | **/doc/api/ 25 | .dart_tool/ 26 | .flutter-plugins 27 | .flutter-plugins-dependencies 28 | .packages 29 | .pub-cache/ 30 | .pub/ 31 | build/ 32 | 33 | # Android related 34 | **/android/**/gradle-wrapper.jar 35 | **/android/.gradle 36 | **/android/captures/ 37 | **/android/gradlew 38 | **/android/gradlew.bat 39 | **/android/local.properties 40 | **/android/**/GeneratedPluginRegistrant.java 41 | 42 | # iOS/XCode related 43 | **/ios/**/*.mode1v3 44 | **/ios/**/*.mode2v3 45 | **/ios/**/*.moved-aside 46 | **/ios/**/*.pbxuser 47 | **/ios/**/*.perspectivev3 48 | **/ios/**/*sync/ 49 | **/ios/**/.sconsign.dblite 50 | **/ios/**/.tags* 51 | **/ios/**/.vagrant/ 52 | **/ios/**/DerivedData/ 53 | **/ios/**/Icon? 54 | **/ios/**/Pods/ 55 | **/ios/**/.symlinks/ 56 | **/ios/**/profile 57 | **/ios/**/xcuserdata 58 | **/ios/.generated/ 59 | **/ios/Flutter/App.framework 60 | **/ios/Flutter/Flutter.framework 61 | **/ios/Flutter/Flutter.podspec 62 | **/ios/Flutter/Generated.xcconfig 63 | **/ios/Flutter/ephemeral 64 | **/ios/Flutter/app.flx 65 | **/ios/Flutter/app.zip 66 | **/ios/Flutter/flutter_assets/ 67 | **/ios/Flutter/flutter_export_environment.sh 68 | **/ios/ServiceDefinitions.json 69 | **/ios/Runner/GeneratedPluginRegistrant.* 70 | 71 | # Exceptions to above rules. 72 | !**/ios/**/default.mode1v3 73 | !**/ios/**/default.mode2v3 74 | !**/ios/**/default.pbxuser 75 | !**/ios/**/default.perspectivev3 76 | -------------------------------------------------------------------------------- /.metadata: -------------------------------------------------------------------------------- 1 | # This file tracks properties of this Flutter project. 2 | # Used by Flutter tool to assess capabilities and perform upgrades etc. 3 | # 4 | # This file should be version controlled and should not be manually edited. 5 | 6 | version: 7 | revision: 18116933e77adc82f80866c928266a5b4f1ed645 8 | channel: stable 9 | 10 | project_type: package 11 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 3.1.1 2 | 3 | - Fix: onChanged not invoked after first invocation (Thanks [@ravindrabarthwal for PR](https://github.com/AbdullahChauhan/custom-dropdown/pull/76)) 4 | 5 | # 3.1.0 6 | 7 | - Add: Controllers support (Thanks [@hbatalhaStch for PR](https://github.com/AbdullahChauhan/custom-dropdown/pull/66)) 8 | - `SingleSelectController` 9 | - `MultiSelectController` 10 | - Add: Enabled/Disabled state support (Thanks [@KabaDH for PR](https://github.com/AbdullahChauhan/custom-dropdown/pull/55)) 11 | - Add: Dropdown disabled state decoration support 12 | - `CustomDropdownDisabledDecoration` 13 | - Add: Items list scroll controller support 14 | - `itemsScrollController` 15 | - Add: Dropdown overlay controller support 16 | - `overlayController` 17 | - Add: Dropdown visibility status callback 18 | - `visibility` 19 | - Update: Enhance decoration support 20 | - `prefixIcon` 21 | - Remove: Empty items list assertion (Thanks [@hbatalhaStch for the issue](https://github.com/AbdullahChauhan/custom-dropdown/issues/64)) 22 | 23 | # 3.0.0 24 | 25 | - Add: Multi selection support (Thanks [@KabaDH for PR](https://github.com/AbdullahChauhan/custom-dropdown/pull/40)) 26 | - `CustomDropdown.multiSelect` 27 | - `CustomDropdown.multiSelectSearch` 28 | - `CustomDropdown.multiSelectSearchRequest` 29 | - Add: Decoration support 30 | - `CustomDropdownDecoration` 31 | - `SearchFieldDecoration` 32 | - `ListItemDecoration` 33 | - `ScrollbarThemeData` 34 | - Add: Dropdown overlay height support (Thanks [@aguilastorm for PR](https://github.com/AbdullahChauhan/custom-dropdown/pull/38)) 35 | - `overlayHeight` 36 | - Add: Custom loading widget for search request 37 | - `searchRequestLoadingIndicator` 38 | - Add: Padding properties: 39 | - `closedHeaderPadding` 40 | - `expandedHeaderPadding` 41 | - `itemsListPadding` 42 | - `listItemPadding` 43 | - Fix: Stop the scrolling and dropdown should remains in expanded state (Thanks [@s-saens for PR](https://github.com/AbdullahChauhan/custom-dropdown/pull/34)) 44 | - Breaking: Properties move inside decoration: 45 | - `closedFillColor` 46 | - `expandedFillColor` 47 | - `errorStyle` 48 | - `closedBorder` 49 | - `closedBorderRadius` 50 | - `expandedBorder` 51 | - `expandedBorderRadius` 52 | - `closedErrorBorder` 53 | - `closedErrorBorderRadius` 54 | - `closedSuffixIcon` 55 | - `expandedSuffixIcon` 56 | 57 | # 2.0.0 58 | 59 | - Add: Migration to support List of generatic type `T` (Thanks [@JesusHdez960717 for PR](https://github.com/AbdullahChauhan/custom-dropdown/pull/20)) 60 | - Add: Mixin `CustomDropdownListFilter` for complex filter on search field 61 | - Add: Builders support 62 | - `listItemBuilder` 63 | - `headerBuilder` 64 | - `hintBuilder` 65 | - `noResultFoundBuilder` 66 | - Add: `validator` & `validateOnChange` to enhance form validation support 67 | - Add: Other new properties: 68 | - `initialItem` 69 | - `searchHintText` 70 | - `expandedBorder` 71 | - `expandedBorderRadius` 72 | - `errorBorderRadius` 73 | - `hideSelectedFieldWhenExpanded` 74 | - `noResultFoundText` 75 | - `expandedFillColor` 76 | - `expandedSuffixIcon` 77 | - `maxlines` 78 | - Breaking: Clean `controller` support 79 | - Breaking: Clean `listItemStyle` support 80 | - Breaking: Clean `selectedStyle` support 81 | - Breaking: Clean `errorText` support 82 | - Breaking: `fillColor` change to `closedFillColor` 83 | - Breaking: `fieldSuffixIcon` change to `closedSuffixIcon` 84 | - Breaking: `errorBorderSide` change to `errorBorder` 85 | - Breaking: `borderSide` change to `closedBorder` 86 | - Breaking: `borderRadius` change to `closedBorderRadius` 87 | - Refactor: Overlay rendering approach (change to declarative) 88 | 89 | # 1.5.0 90 | 91 | - Add: Request delay support for Search request API (Thanks [@JesusHdez960717 for PR](https://github.com/AbdullahChauhan/custom-dropdown/pull/19)) 92 | 93 | # 1.4.0 94 | 95 | - Add: Search request API (Search on provided request) 96 | - Update readme. 97 | 98 | # 1.3.0 99 | 100 | - Update: Flutter version 3.3.9 changes 101 | - Add: List item builder support (Thanks [@Mohamed25885 for PR](https://github.com/AbdullahChauhan/custom-dropdown/pull/14)) 102 | 103 | # 1.2.2 104 | 105 | - Update: Flutter version 3.0.1 changes 106 | 107 | # 1.2.1 108 | 109 | - Fix: State dispose calls 110 | 111 | # 1.2.0 112 | 113 | - Add: Search field (Search on list data) 114 | - Fix: State mounted check on dropdown open or close. 115 | - Update readme. 116 | 117 | # 1.1.1 118 | 119 | - Update: Suffix icon only allowed for dropdown field. 120 | - Fix: Empty list pass (assert added). 121 | 122 | # 1.1.0 123 | 124 | - Add: Dropdown overlay alignments (top, bottom) according to available screen space. 125 | - Update readme. 126 | 127 | # 1.0.1 128 | 129 | - Update readme, project description. Format files. 130 | 131 | # 1.0.0 132 | 133 | - Customizable animated dropdown widget. 134 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2024 Abdullah Chauhan 2 | 3 | Redistribution and use in source and binary forms, with or without 4 | modification, are permitted provided that the following conditions are 5 | met: 6 | 7 | * Redistributions of source code must retain the above copyright 8 | notice, this list of conditions and the following disclaimer. 9 | * Redistributions in binary form must reproduce the above 10 | copyright notice, this list of conditions and the following 11 | disclaimer in the documentation and/or other materials provided 12 | with the distribution. 13 | * Neither the name of the copyright holder nor the names of its 14 | contributors may be used to endorse or promote products derived 15 | from this software without specific prior written permission. 16 | 17 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 18 | "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 19 | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 20 | A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 21 | OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 22 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 23 | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 24 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 25 | THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 27 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Custom Dropdown 2 | 3 | **Custom Dropdown** package lets you add customizable animated dropdown widget. 4 | 5 | [![pub.dev](https://img.shields.io/pub/v/animated_custom_dropdown.svg?style=flat?logo=dart)](https://pub.dev/packages/animated_custom_dropdown) 6 | [![likes](https://img.shields.io/pub/likes/animated_custom_dropdown)](https://pub.dev/packages/animated_custom_dropdown/score) 7 | [![popularity](https://img.shields.io/pub/popularity/animated_custom_dropdown)](https://pub.dev/packages/animated_custom_dropdown/score) 8 | [![pub points](https://img.shields.io/pub/points/animated_custom_dropdown)](https://pub.dev/packages/animated_custom_dropdown/score) 9 | 10 | [![buy me a coffee](https://img.buymeacoffee.com/button-api/?text=Buy%20me%20a%20pizza&emoji=🍕&slug=abdullahchauhan&button_colour=FF8838&font_colour=ffffff&font_family=Poppins&outline_colour=000000&coffee_colour=ffffff')](https://www.buymeacoffee.com/abdullahchauhan) 11 | 12 | ### If you like this package, please leave a like on [pub.dev](https://pub.dev/packages/animated_custom_dropdown) and star on [GitHub](https://github.com/AbdullahChauhan/custom-dropdown). 13 | 14 | ## Features 15 | 16 | Lots of properties to use and customize dropdown widget as per your need. Also usable under Form widget for required validation. 17 | 18 | - Custom dropdown using constructor CustomDropdown(). 19 | - Custom dropdown with search field using named constructor CustomDropdown.search(). 20 | - Custom dropdown with search request field using named constructor CustomDropdown.searchRequest(). 21 | - Multi select custom dropdown using named constructor CustomDropdown.multiSelect(). 22 | - Multi select custom dropdown with search field using named constructor CustomDropdown.multiSelectSearch(). 23 | - Multi select custom dropdown with search request field using named constructor CustomDropdown.multiSelectSearchRequest(). 24 | 25 | ## Preview 26 | 27 | 28 | 29 |
30 | 31 | ## Getting started 32 | 33 | 1. Add the latest version of package to your `pubspec.yaml` (and run `flutter pub get`): 34 | 35 | ```dart 36 | dependencies: 37 | animated_custom_dropdown: 3.1.1 38 | ``` 39 | 40 | 2. Import the package and use it in your Flutter App. 41 | 42 | ```dart 43 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 44 | ``` 45 | 46 |
47 | 48 | ## Example usage 49 | 50 | ### **1. Custom dropdown** 51 | ```dart 52 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 53 | import 'package:flutter/material.dart'; 54 | import 'dart:developer'; 55 | 56 | const List _list = [ 57 | 'Developer', 58 | 'Designer', 59 | 'Consultant', 60 | 'Student', 61 | ]; 62 | 63 | class SimpleDropdown extends StatelessWidget { 64 | const SimpleDropdown({Key? key}) : super(key: key); 65 | 66 | @override 67 | Widget build(BuildContext context) { 68 | return CustomDropdown( 69 | hintText: 'Select job role', 70 | items: _list, 71 | initialItem: _list[0], 72 | onChanged: (value) { 73 | log('changing value to: $value'); 74 | }, 75 | ); 76 | } 77 | } 78 | ``` 79 | 80 | ### **2. Custom dropdown with custom type model** 81 | Let's start with the type of object we are going to work with: 82 | ```dart 83 | class Job { 84 | final String name; 85 | final IconData icon; 86 | const Job(this.name, this.icon); 87 | 88 | @override 89 | String toString() { 90 | return name; 91 | } 92 | } 93 | ``` 94 | Whenever you are going to work with custom type model `T`, your model must override the default `toString()` method and return the property inside that you want to display as list item otherwise the dropdown list item would show `Instance of [model name]`. 95 | 96 | Now the widget: 97 | 98 | ```dart 99 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 100 | import 'package:flutter/material.dart'; 101 | import 'dart:developer'; 102 | 103 | const List _list = [ 104 | Job('Developer', Icons.developer_mode), 105 | Job('Designer', Icons.design_services), 106 | Job('Consultant', Icons.account_balance), 107 | Job('Student', Icons.school), 108 | ]; 109 | 110 | class SimpleDropdown extends StatelessWidget { 111 | const SimpleDropdown({Key? key}) : super(key: key); 112 | 113 | @override 114 | Widget build(BuildContext context) { 115 | return CustomDropdown( 116 | hintText: 'Select job role', 117 | items: _list, 118 | onChanged: (value) { 119 | log('changing value to: $value'); 120 | }, 121 | ); 122 | } 123 | } 124 | ``` 125 | ### **3. Custom dropdown with multiple selection** 126 | ```dart 127 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 128 | import 'package:flutter/material.dart'; 129 | import 'dart:developer'; 130 | 131 | const List _list = [ 132 | Job('Developer', Icons.developer_mode), 133 | Job('Designer', Icons.design_services), 134 | Job('Consultant', Icons.account_balance), 135 | Job('Student', Icons.school), 136 | ]; 137 | 138 | class MultiSelectDropDown extends StatelessWidget { 139 | const MultiSelectDropDown({Key? key}) : super(key: key); 140 | 141 | @override 142 | Widget build(BuildContext context) { 143 | return CustomDropdown.multiSelect( 144 | items: _jobItems, 145 | initialItems: _jobItems.take(1).toList(), 146 | onListChanged: (value) { 147 | log('changing value to: $value'); 148 | }, 149 | ); 150 | } 151 | } 152 | ``` 153 | 154 | ### **4. Custom dropdown with search:** *A custom dropdown with the possibility to filter the items.* 155 | First, let's enhance our Job model with more functionality: 156 | ```dart 157 | class Job with CustomDropdownListFilter { 158 | final String name; 159 | final IconData icon; 160 | const Job(this.name, this.icon); 161 | 162 | @override 163 | String toString() { 164 | return name; 165 | } 166 | 167 | @override 168 | bool filter(String query) { 169 | return name.toLowerCase().contains(query.toLowerCase()); 170 | } 171 | } 172 | ``` 173 | If the filter on the object is more complex, you can add the `CustomDropdownListFilter` mixin to it, which gives you access to the `filter(query)` method, and by this the items of the list will be filtered. 174 | 175 | Now the widgets: 176 | 177 | #### SearchDropdown 178 | ```dart 179 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 180 | import 'package:flutter/material.dart'; 181 | import 'dart:developer'; 182 | 183 | const List _list = [ 184 | Job('Developer', Icons.developer_mode), 185 | Job('Designer', Icons.design_services), 186 | Job('Consultant', Icons.account_balance), 187 | Job('Student', Icons.school), 188 | ]; 189 | 190 | class SearchDropdown extends StatelessWidget { 191 | const SearchDropdown({Key? key}) : super(key: key); 192 | 193 | @override 194 | Widget build(BuildContext context) { 195 | return CustomDropdown.search( 196 | hintText: 'Select job role', 197 | items: _list, 198 | excludeSelected: false, 199 | onChanged: (value) { 200 | log('changing value to: $value'); 201 | }, 202 | ); 203 | } 204 | } 205 | ``` 206 | 207 | #### MultiSelectSearchDropdown 208 | ```dart 209 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 210 | import 'package:flutter/material.dart'; 211 | import 'dart:developer'; 212 | 213 | const List _list = [ 214 | Job('Developer', Icons.developer_mode), 215 | Job('Designer', Icons.design_services), 216 | Job('Consultant', Icons.account_balance), 217 | Job('Student', Icons.school), 218 | ]; 219 | 220 | class MultiSelectSearchDropdown extends StatelessWidget { 221 | const SearchDropdown({Key? key}) : super(key: key); 222 | 223 | @override 224 | Widget build(BuildContext context) { 225 | return CustomDropdown.multiSelectSearch( 226 | hintText: 'Select job role', 227 | items: _list, 228 | onListChanged: (value) { 229 | log('changing value to: $value'); 230 | }, 231 | ); 232 | } 233 | } 234 | ``` 235 | 236 | ### **5. Custom dropdown with search request:** *A custom dropdown with a search request to load the items.* 237 | Let's use a personalized object for the items: 238 | ```dart 239 | class Pair { 240 | final String text; 241 | final IconData icon; 242 | const Pair(this.text, this.icon); 243 | 244 | @override 245 | String toString() { 246 | return text; 247 | } 248 | } 249 | ``` 250 | 251 | Now the widgets: 252 | 253 | #### SearchRequestDropdown 254 | ```dart 255 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 256 | import 'package:flutter/material.dart'; 257 | import 'dart:developer'; 258 | 259 | const List _list = [ 260 | Pair('Developer', Icons.developer_board), 261 | Pair('Designer', Icons.deblur_sharp), 262 | Pair('Consultant', Icons.money_off), 263 | Pair('Student', Icons.edit), 264 | ]; 265 | 266 | class SearchRequestDropdown extends StatelessWidget { 267 | const SearchRequestDropdown({Key? key}) : super(key: key); 268 | 269 | // This should be a call to the api or service or similar 270 | Future> _getFakeRequestData(String query) async { 271 | return await Future.delayed(const Duration(seconds: 1), () { 272 | return _list.where((e) { 273 | return e.text.toLowerCase().contains(query.toLowerCase()); 274 | }).toList(); 275 | }); 276 | } 277 | 278 | @override 279 | Widget build(BuildContext context) { 280 | return CustomDropdown.searchRequest( 281 | futureRequest: _getFakeRequestData, 282 | hintText: 'Search job role', 283 | items: _list, 284 | onChanged: (value) { 285 | log('changing value to: $value'); 286 | }, 287 | ); 288 | } 289 | } 290 | ``` 291 | 292 | #### MultiSelectSearchRequestDropdown 293 | ```dart 294 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 295 | import 'package:flutter/material.dart'; 296 | import 'dart:developer'; 297 | 298 | const List _list = [ 299 | Pair('Developer', Icons.developer_board), 300 | Pair('Designer', Icons.deblur_sharp), 301 | Pair('Consultant', Icons.money_off), 302 | Pair('Student', Icons.edit), 303 | ]; 304 | 305 | class MultiSelectSearchRequestDropdown extends StatelessWidget { 306 | const MultiSelectSearchRequestDropdown({Key? key}) : super(key: key); 307 | 308 | // This should be a call to the api or service or similar 309 | Future> _getFakeRequestData(String query) async { 310 | return await Future.delayed(const Duration(seconds: 1), () { 311 | return _list.where((e) { 312 | return e.text.toLowerCase().contains(query.toLowerCase()); 313 | }).toList(); 314 | }); 315 | } 316 | 317 | @override 318 | Widget build(BuildContext context) { 319 | return CustomDropdown.multiSelectSearchRequest( 320 | futureRequest: _getFakeRequestData, 321 | hintText: 'Search job role', 322 | onListChanged: (value) { 323 | log('changing value to: $value'); 324 | }, 325 | ); 326 | } 327 | } 328 | ``` 329 | 330 | ### **6. Custom dropdown with validation:** *A custom dropdown with validation.* 331 | 332 | #### ValidationDropdown 333 | ```dart 334 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 335 | import 'package:flutter/material.dart'; 336 | import 'dart:developer'; 337 | 338 | const List _list = [ 339 | 'Developer', 340 | 'Designer', 341 | 'Consultant', 342 | 'Student', 343 | ]; 344 | 345 | class ValidationDropdown extends StatelessWidget { 346 | ValidationDropdown({Key? key}) : super(key: key); 347 | 348 | final _formKey = GlobalKey(); 349 | 350 | @override 351 | Widget build(BuildContext context) { 352 | return Form( 353 | key: _formKey, 354 | child: Column( 355 | crossAxisAlignment: CrossAxisAlignment.start, 356 | children: [ 357 | CustomDropdown( 358 | hintText: 'Select job role', 359 | items: _list, 360 | onChanged: (value) { 361 | log('changing value to: $value'); 362 | }, 363 | // Run validation on item selected 364 | validateOnChange: true, 365 | // Function to validate if the current selected item is valid or not 366 | validator: (value) => value == null ? "Must not be null" : null, 367 | ), 368 | const SizedBox(height: 16), 369 | SizedBox( 370 | width: double.infinity, 371 | child: ElevatedButton( 372 | onPressed: () { 373 | if (!_formKey.currentState!.validate()) return; 374 | }, 375 | child: const Text( 376 | 'Submit', 377 | style: TextStyle(fontWeight: FontWeight.w600), 378 | ), 379 | ), 380 | ), 381 | ], 382 | ), 383 | ); 384 | } 385 | } 386 | ``` 387 | 388 | #### MultiSelectValidationDropdown 389 | ```dart 390 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 391 | import 'package:flutter/material.dart'; 392 | import 'dart:developer'; 393 | 394 | const List _list = [ 395 | 'Developer', 396 | 'Designer', 397 | 'Consultant', 398 | 'Student', 399 | ]; 400 | 401 | class MultiSelectValidationDropdown extends StatelessWidget { 402 | MultiSelectValidationDropdown({Key? key}) : super(key: key); 403 | 404 | final _formKey = GlobalKey(); 405 | 406 | @override 407 | Widget build(BuildContext context) { 408 | return Form( 409 | key: _formKey, 410 | child: Column( 411 | crossAxisAlignment: CrossAxisAlignment.start, 412 | children: [ 413 | CustomDropdown.multiSelect( 414 | hintText: 'Select job role', 415 | items: _list, 416 | onListChanged: (value) { 417 | log('changing value to: $value'); 418 | }, 419 | listValidator: (value) => value.isEmpty ? "Must not be null" : null, 420 | ), 421 | const SizedBox(height: 16), 422 | SizedBox( 423 | width: double.infinity, 424 | child: ElevatedButton( 425 | onPressed: () { 426 | if (!_formKey.currentState!.validate()) return; 427 | }, 428 | child: const Text( 429 | 'Submit', 430 | style: TextStyle(fontWeight: FontWeight.w600), 431 | ), 432 | ), 433 | ), 434 | ], 435 | ), 436 | ); 437 | } 438 | } 439 | ``` 440 | 441 | ## Customization 442 | For a complete customization of the package, go to the [example](https://github.com/AbdullahChauhan/custom-dropdown/blob/master/example). 443 | 444 | ## Contributors 445 | 446 | [![](https://contrib.rocks/image?repo=AbdullahChauhan/custom-dropdown)](https://github.com/AbdullahChauhan/custom-dropdown/graphs/contributors) 447 | 448 | ## Issues & Feedback 449 | 450 | Please file an [issue](https://github.com/AbdullahChauhan/custom-dropdown/issues) to send feedback or report a bug. PRs are always welcome. Thank you! 451 | -------------------------------------------------------------------------------- /analysis_options.yaml: -------------------------------------------------------------------------------- 1 | include: package:flutter_lints/flutter.yaml 2 | 3 | linter: 4 | rules: 5 | library_private_types_in_public_api: false 6 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # Miscellaneous 2 | *.class 3 | *.log 4 | *.pyc 5 | *.swp 6 | .DS_Store 7 | .atom/ 8 | .buildlog/ 9 | .history 10 | .svn/ 11 | 12 | # IntelliJ related 13 | *.iml 14 | *.ipr 15 | *.iws 16 | .idea/ 17 | 18 | # The .vscode folder contains launch configuration and tasks you configure in 19 | # VS Code which you may wish to be included in version control, so this line 20 | # is commented out by default. 21 | #.vscode/ 22 | 23 | # Flutter/Dart/Pub related 24 | **/doc/api/ 25 | **/ios/Flutter/.last_build_id 26 | .dart_tool/ 27 | .flutter-plugins 28 | .flutter-plugins-dependencies 29 | .packages 30 | .pub-cache/ 31 | .pub/ 32 | /build/ 33 | 34 | # Web related 35 | lib/generated_plugin_registrant.dart 36 | 37 | # Symbolication related 38 | app.*.symbols 39 | 40 | # Obfuscation related 41 | app.*.map.json 42 | 43 | # Android Studio will place build artifacts here 44 | /android/app/debug 45 | /android/app/profile 46 | /android/app/release 47 | -------------------------------------------------------------------------------- /example/.metadata: -------------------------------------------------------------------------------- 1 | # This file tracks properties of this Flutter project. 2 | # Used by Flutter tool to assess capabilities and perform upgrades etc. 3 | # 4 | # This file should be version controlled and should not be manually edited. 5 | 6 | version: 7 | revision: 18116933e77adc82f80866c928266a5b4f1ed645 8 | channel: stable 9 | 10 | project_type: app 11 | -------------------------------------------------------------------------------- /example/analysis_options.yaml: -------------------------------------------------------------------------------- 1 | # This file configures the analyzer, which statically analyzes Dart code to 2 | # check for errors, warnings, and lints. 3 | # 4 | # The issues identified by the analyzer are surfaced in the UI of Dart-enabled 5 | # IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be 6 | # invoked from the command line by running `flutter analyze`. 7 | 8 | # The following line activates a set of recommended lints for Flutter apps, 9 | # packages, and plugins designed to encourage good coding practices. 10 | include: package:flutter_lints/flutter.yaml 11 | 12 | linter: 13 | # The lint rules applied to this project can be customized in the 14 | # section below to disable rules from the `package:flutter_lints/flutter.yaml` 15 | # included above or to enable additional rules. A list of all available lints 16 | # and their documentation is published at 17 | # https://dart-lang.github.io/linter/lints/index.html. 18 | # 19 | # Instead of disabling a lint rule for the entire project in the 20 | # section below, it can also be suppressed for a single line of code 21 | # or a specific dart file by using the `// ignore: name_of_lint` and 22 | # `// ignore_for_file: name_of_lint` syntax on the line or in the file 23 | # producing the lint. 24 | rules: 25 | # avoid_print: false # Uncomment to disable the `avoid_print` rule 26 | # prefer_single_quotes: true # Uncomment to enable the `prefer_single_quotes` rule 27 | 28 | # Additional information about this file can be found at 29 | # https://dart.dev/guides/language/analysis-options 30 | -------------------------------------------------------------------------------- /example/android/.gitignore: -------------------------------------------------------------------------------- 1 | gradle-wrapper.jar 2 | /.gradle 3 | /captures/ 4 | /gradlew 5 | /gradlew.bat 6 | /local.properties 7 | GeneratedPluginRegistrant.java 8 | 9 | # Remember to never publicly share your keystore. 10 | # See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app 11 | key.properties 12 | **/*.keystore 13 | **/*.jks 14 | -------------------------------------------------------------------------------- /example/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | def localProperties = new Properties() 2 | def localPropertiesFile = rootProject.file('local.properties') 3 | if (localPropertiesFile.exists()) { 4 | localPropertiesFile.withReader('UTF-8') { reader -> 5 | localProperties.load(reader) 6 | } 7 | } 8 | 9 | def flutterRoot = localProperties.getProperty('flutter.sdk') 10 | if (flutterRoot == null) { 11 | throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.") 12 | } 13 | 14 | def flutterVersionCode = localProperties.getProperty('flutter.versionCode') 15 | if (flutterVersionCode == null) { 16 | flutterVersionCode = '1' 17 | } 18 | 19 | def flutterVersionName = localProperties.getProperty('flutter.versionName') 20 | if (flutterVersionName == null) { 21 | flutterVersionName = '1.0' 22 | } 23 | 24 | apply plugin: 'com.android.application' 25 | apply plugin: 'kotlin-android' 26 | apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle" 27 | 28 | android { 29 | compileSdkVersion 33 30 | 31 | compileOptions { 32 | sourceCompatibility JavaVersion.VERSION_1_8 33 | targetCompatibility JavaVersion.VERSION_1_8 34 | } 35 | 36 | kotlinOptions { 37 | jvmTarget = '1.8' 38 | } 39 | 40 | sourceSets { 41 | main.java.srcDirs += 'src/main/kotlin' 42 | } 43 | 44 | defaultConfig { 45 | // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html). 46 | applicationId "com.example.example" 47 | minSdkVersion 21 48 | targetSdkVersion 33 49 | versionCode flutterVersionCode.toInteger() 50 | versionName flutterVersionName 51 | } 52 | 53 | buildTypes { 54 | release { 55 | // TODO: Add your own signing config for the release build. 56 | // Signing with the debug keys for now, so `flutter run --release` works. 57 | signingConfig signingConfigs.debug 58 | } 59 | } 60 | } 61 | 62 | flutter { 63 | source '../..' 64 | } 65 | 66 | dependencies { 67 | implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" 68 | } 69 | -------------------------------------------------------------------------------- /example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 6 | 14 | 18 | 22 | 27 | 31 | 32 | 33 | 34 | 35 | 36 | 38 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /example/android/app/src/main/kotlin/com/example/example/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.example.example 2 | 3 | import io.flutter.embedding.android.FlutterActivity 4 | 5 | class MainActivity: FlutterActivity() { 6 | } 7 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/drawable-v21/launch_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/drawable/launch_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/values-night/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 15 | 18 | 19 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 15 | 18 | 19 | -------------------------------------------------------------------------------- /example/android/app/src/profile/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext.kotlin_version = '1.8.10' 3 | repositories { 4 | google() 5 | mavenCentral() 6 | } 7 | 8 | dependencies { 9 | classpath 'com.android.tools.build:gradle:7.3.0' 10 | classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" 11 | } 12 | } 13 | 14 | allprojects { 15 | repositories { 16 | google() 17 | mavenCentral() 18 | } 19 | } 20 | 21 | rootProject.buildDir = '../build' 22 | subprojects { 23 | project.buildDir = "${rootProject.buildDir}/${project.name}" 24 | project.evaluationDependsOn(':app') 25 | } 26 | 27 | tasks.register("clean", Delete) { 28 | delete rootProject.buildDir 29 | } 30 | -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | org.gradle.jvmargs=-Xmx1536M 2 | android.useAndroidX=true 3 | android.enableJetifier=true 4 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Fri Jun 23 08:50:38 CEST 2017 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.6.1-all.zip 7 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | 3 | def localPropertiesFile = new File(rootProject.projectDir, "local.properties") 4 | def properties = new Properties() 5 | 6 | assert localPropertiesFile.exists() 7 | localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) } 8 | 9 | def flutterSdkPath = properties.getProperty("flutter.sdk") 10 | assert flutterSdkPath != null, "flutter.sdk not set in local.properties" 11 | apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle" 12 | -------------------------------------------------------------------------------- /example/ios/.gitignore: -------------------------------------------------------------------------------- 1 | **/dgph 2 | *.mode1v3 3 | *.mode2v3 4 | *.moved-aside 5 | *.pbxuser 6 | *.perspectivev3 7 | **/*sync/ 8 | .sconsign.dblite 9 | .tags* 10 | **/.vagrant/ 11 | **/DerivedData/ 12 | Icon? 13 | **/Pods/ 14 | **/.symlinks/ 15 | profile 16 | xcuserdata 17 | **/.generated/ 18 | Flutter/App.framework 19 | Flutter/Flutter.framework 20 | Flutter/Flutter.podspec 21 | Flutter/Generated.xcconfig 22 | Flutter/ephemeral/ 23 | Flutter/app.flx 24 | Flutter/app.zip 25 | Flutter/flutter_assets/ 26 | Flutter/flutter_export_environment.sh 27 | ServiceDefinitions.json 28 | Runner/GeneratedPluginRegistrant.* 29 | 30 | # Exceptions to above rules. 31 | !default.mode1v3 32 | !default.mode2v3 33 | !default.pbxuser 34 | !default.perspectivev3 35 | -------------------------------------------------------------------------------- /example/ios/Flutter/AppFrameworkInfo.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | App 9 | CFBundleIdentifier 10 | io.flutter.flutter.app 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | App 15 | CFBundlePackageType 16 | FMWK 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1.0 23 | MinimumOSVersion 24 | 11.0 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/ios/Flutter/Debug.xcconfig: -------------------------------------------------------------------------------- 1 | #include "Generated.xcconfig" 2 | -------------------------------------------------------------------------------- /example/ios/Flutter/Release.xcconfig: -------------------------------------------------------------------------------- 1 | #include "Generated.xcconfig" 2 | -------------------------------------------------------------------------------- /example/ios/Runner.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 54; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */ = {isa = PBXBuildFile; fileRef = 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */; }; 11 | 3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */ = {isa = PBXBuildFile; fileRef = 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */; }; 12 | 74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 74858FAE1ED2DC5600515810 /* AppDelegate.swift */; }; 13 | 97C146FC1CF9000F007C117D /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FA1CF9000F007C117D /* Main.storyboard */; }; 14 | 97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FD1CF9000F007C117D /* Assets.xcassets */; }; 15 | 97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */; }; 16 | /* End PBXBuildFile section */ 17 | 18 | /* Begin PBXCopyFilesBuildPhase section */ 19 | 9705A1C41CF9048500538489 /* Embed Frameworks */ = { 20 | isa = PBXCopyFilesBuildPhase; 21 | buildActionMask = 2147483647; 22 | dstPath = ""; 23 | dstSubfolderSpec = 10; 24 | files = ( 25 | ); 26 | name = "Embed Frameworks"; 27 | runOnlyForDeploymentPostprocessing = 0; 28 | }; 29 | /* End PBXCopyFilesBuildPhase section */ 30 | 31 | /* Begin PBXFileReference section */ 32 | 1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = GeneratedPluginRegistrant.h; sourceTree = ""; }; 33 | 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = GeneratedPluginRegistrant.m; sourceTree = ""; }; 34 | 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = AppFrameworkInfo.plist; path = Flutter/AppFrameworkInfo.plist; sourceTree = ""; }; 35 | 74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "Runner-Bridging-Header.h"; sourceTree = ""; }; 36 | 74858FAE1ED2DC5600515810 /* AppDelegate.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = ""; }; 37 | 7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = Release.xcconfig; path = Flutter/Release.xcconfig; sourceTree = ""; }; 38 | 9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Debug.xcconfig; path = Flutter/Debug.xcconfig; sourceTree = ""; }; 39 | 9740EEB31CF90195004384FC /* Generated.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Generated.xcconfig; path = Flutter/Generated.xcconfig; sourceTree = ""; }; 40 | 97C146EE1CF9000F007C117D /* Runner.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Runner.app; sourceTree = BUILT_PRODUCTS_DIR; }; 41 | 97C146FB1CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = ""; }; 42 | 97C146FD1CF9000F007C117D /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = ""; }; 43 | 97C147001CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = ""; }; 44 | 97C147021CF9000F007C117D /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 45 | /* End PBXFileReference section */ 46 | 47 | /* Begin PBXFrameworksBuildPhase section */ 48 | 97C146EB1CF9000F007C117D /* Frameworks */ = { 49 | isa = PBXFrameworksBuildPhase; 50 | buildActionMask = 2147483647; 51 | files = ( 52 | ); 53 | runOnlyForDeploymentPostprocessing = 0; 54 | }; 55 | /* End PBXFrameworksBuildPhase section */ 56 | 57 | /* Begin PBXGroup section */ 58 | 9740EEB11CF90186004384FC /* Flutter */ = { 59 | isa = PBXGroup; 60 | children = ( 61 | 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */, 62 | 9740EEB21CF90195004384FC /* Debug.xcconfig */, 63 | 7AFA3C8E1D35360C0083082E /* Release.xcconfig */, 64 | 9740EEB31CF90195004384FC /* Generated.xcconfig */, 65 | ); 66 | name = Flutter; 67 | sourceTree = ""; 68 | }; 69 | 97C146E51CF9000F007C117D = { 70 | isa = PBXGroup; 71 | children = ( 72 | 9740EEB11CF90186004384FC /* Flutter */, 73 | 97C146F01CF9000F007C117D /* Runner */, 74 | 97C146EF1CF9000F007C117D /* Products */, 75 | ); 76 | sourceTree = ""; 77 | }; 78 | 97C146EF1CF9000F007C117D /* Products */ = { 79 | isa = PBXGroup; 80 | children = ( 81 | 97C146EE1CF9000F007C117D /* Runner.app */, 82 | ); 83 | name = Products; 84 | sourceTree = ""; 85 | }; 86 | 97C146F01CF9000F007C117D /* Runner */ = { 87 | isa = PBXGroup; 88 | children = ( 89 | 97C146FA1CF9000F007C117D /* Main.storyboard */, 90 | 97C146FD1CF9000F007C117D /* Assets.xcassets */, 91 | 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */, 92 | 97C147021CF9000F007C117D /* Info.plist */, 93 | 1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */, 94 | 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */, 95 | 74858FAE1ED2DC5600515810 /* AppDelegate.swift */, 96 | 74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */, 97 | ); 98 | path = Runner; 99 | sourceTree = ""; 100 | }; 101 | /* End PBXGroup section */ 102 | 103 | /* Begin PBXNativeTarget section */ 104 | 97C146ED1CF9000F007C117D /* Runner */ = { 105 | isa = PBXNativeTarget; 106 | buildConfigurationList = 97C147051CF9000F007C117D /* Build configuration list for PBXNativeTarget "Runner" */; 107 | buildPhases = ( 108 | 9740EEB61CF901F6004384FC /* Run Script */, 109 | 97C146EA1CF9000F007C117D /* Sources */, 110 | 97C146EB1CF9000F007C117D /* Frameworks */, 111 | 97C146EC1CF9000F007C117D /* Resources */, 112 | 9705A1C41CF9048500538489 /* Embed Frameworks */, 113 | 3B06AD1E1E4923F5004D2608 /* Thin Binary */, 114 | ); 115 | buildRules = ( 116 | ); 117 | dependencies = ( 118 | ); 119 | name = Runner; 120 | productName = Runner; 121 | productReference = 97C146EE1CF9000F007C117D /* Runner.app */; 122 | productType = "com.apple.product-type.application"; 123 | }; 124 | /* End PBXNativeTarget section */ 125 | 126 | /* Begin PBXProject section */ 127 | 97C146E61CF9000F007C117D /* Project object */ = { 128 | isa = PBXProject; 129 | attributes = { 130 | LastUpgradeCheck = 1430; 131 | ORGANIZATIONNAME = ""; 132 | TargetAttributes = { 133 | 97C146ED1CF9000F007C117D = { 134 | CreatedOnToolsVersion = 7.3.1; 135 | LastSwiftMigration = 1100; 136 | }; 137 | }; 138 | }; 139 | buildConfigurationList = 97C146E91CF9000F007C117D /* Build configuration list for PBXProject "Runner" */; 140 | compatibilityVersion = "Xcode 9.3"; 141 | developmentRegion = en; 142 | hasScannedForEncodings = 0; 143 | knownRegions = ( 144 | en, 145 | Base, 146 | ); 147 | mainGroup = 97C146E51CF9000F007C117D; 148 | productRefGroup = 97C146EF1CF9000F007C117D /* Products */; 149 | projectDirPath = ""; 150 | projectRoot = ""; 151 | targets = ( 152 | 97C146ED1CF9000F007C117D /* Runner */, 153 | ); 154 | }; 155 | /* End PBXProject section */ 156 | 157 | /* Begin PBXResourcesBuildPhase section */ 158 | 97C146EC1CF9000F007C117D /* Resources */ = { 159 | isa = PBXResourcesBuildPhase; 160 | buildActionMask = 2147483647; 161 | files = ( 162 | 97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */, 163 | 3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */, 164 | 97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */, 165 | 97C146FC1CF9000F007C117D /* Main.storyboard in Resources */, 166 | ); 167 | runOnlyForDeploymentPostprocessing = 0; 168 | }; 169 | /* End PBXResourcesBuildPhase section */ 170 | 171 | /* Begin PBXShellScriptBuildPhase section */ 172 | 3B06AD1E1E4923F5004D2608 /* Thin Binary */ = { 173 | isa = PBXShellScriptBuildPhase; 174 | alwaysOutOfDate = 1; 175 | buildActionMask = 2147483647; 176 | files = ( 177 | ); 178 | inputPaths = ( 179 | "${TARGET_BUILD_DIR}/${INFOPLIST_PATH}", 180 | ); 181 | name = "Thin Binary"; 182 | outputPaths = ( 183 | ); 184 | runOnlyForDeploymentPostprocessing = 0; 185 | shellPath = /bin/sh; 186 | shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" embed_and_thin"; 187 | }; 188 | 9740EEB61CF901F6004384FC /* Run Script */ = { 189 | isa = PBXShellScriptBuildPhase; 190 | alwaysOutOfDate = 1; 191 | buildActionMask = 2147483647; 192 | files = ( 193 | ); 194 | inputPaths = ( 195 | ); 196 | name = "Run Script"; 197 | outputPaths = ( 198 | ); 199 | runOnlyForDeploymentPostprocessing = 0; 200 | shellPath = /bin/sh; 201 | shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" build"; 202 | }; 203 | /* End PBXShellScriptBuildPhase section */ 204 | 205 | /* Begin PBXSourcesBuildPhase section */ 206 | 97C146EA1CF9000F007C117D /* Sources */ = { 207 | isa = PBXSourcesBuildPhase; 208 | buildActionMask = 2147483647; 209 | files = ( 210 | 74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */, 211 | 1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */, 212 | ); 213 | runOnlyForDeploymentPostprocessing = 0; 214 | }; 215 | /* End PBXSourcesBuildPhase section */ 216 | 217 | /* Begin PBXVariantGroup section */ 218 | 97C146FA1CF9000F007C117D /* Main.storyboard */ = { 219 | isa = PBXVariantGroup; 220 | children = ( 221 | 97C146FB1CF9000F007C117D /* Base */, 222 | ); 223 | name = Main.storyboard; 224 | sourceTree = ""; 225 | }; 226 | 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */ = { 227 | isa = PBXVariantGroup; 228 | children = ( 229 | 97C147001CF9000F007C117D /* Base */, 230 | ); 231 | name = LaunchScreen.storyboard; 232 | sourceTree = ""; 233 | }; 234 | /* End PBXVariantGroup section */ 235 | 236 | /* Begin XCBuildConfiguration section */ 237 | 249021D3217E4FDB00AE95B9 /* Profile */ = { 238 | isa = XCBuildConfiguration; 239 | buildSettings = { 240 | ALWAYS_SEARCH_USER_PATHS = NO; 241 | CLANG_ANALYZER_NONNULL = YES; 242 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 243 | CLANG_CXX_LIBRARY = "libc++"; 244 | CLANG_ENABLE_MODULES = YES; 245 | CLANG_ENABLE_OBJC_ARC = YES; 246 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 247 | CLANG_WARN_BOOL_CONVERSION = YES; 248 | CLANG_WARN_COMMA = YES; 249 | CLANG_WARN_CONSTANT_CONVERSION = YES; 250 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 251 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 252 | CLANG_WARN_EMPTY_BODY = YES; 253 | CLANG_WARN_ENUM_CONVERSION = YES; 254 | CLANG_WARN_INFINITE_RECURSION = YES; 255 | CLANG_WARN_INT_CONVERSION = YES; 256 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 257 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 258 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 259 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 260 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 261 | CLANG_WARN_STRICT_PROTOTYPES = YES; 262 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 263 | CLANG_WARN_UNREACHABLE_CODE = YES; 264 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 265 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 266 | COPY_PHASE_STRIP = NO; 267 | DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym"; 268 | ENABLE_NS_ASSERTIONS = NO; 269 | ENABLE_STRICT_OBJC_MSGSEND = YES; 270 | GCC_C_LANGUAGE_STANDARD = gnu99; 271 | GCC_NO_COMMON_BLOCKS = YES; 272 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 273 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 274 | GCC_WARN_UNDECLARED_SELECTOR = YES; 275 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 276 | GCC_WARN_UNUSED_FUNCTION = YES; 277 | GCC_WARN_UNUSED_VARIABLE = YES; 278 | IPHONEOS_DEPLOYMENT_TARGET = 11.0; 279 | MTL_ENABLE_DEBUG_INFO = NO; 280 | SDKROOT = iphoneos; 281 | SUPPORTED_PLATFORMS = iphoneos; 282 | TARGETED_DEVICE_FAMILY = "1,2"; 283 | VALIDATE_PRODUCT = YES; 284 | }; 285 | name = Profile; 286 | }; 287 | 249021D4217E4FDB00AE95B9 /* Profile */ = { 288 | isa = XCBuildConfiguration; 289 | baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */; 290 | buildSettings = { 291 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 292 | CLANG_ENABLE_MODULES = YES; 293 | CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)"; 294 | ENABLE_BITCODE = NO; 295 | INFOPLIST_FILE = Runner/Info.plist; 296 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 297 | PRODUCT_BUNDLE_IDENTIFIER = com.example.example; 298 | PRODUCT_NAME = "$(TARGET_NAME)"; 299 | SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h"; 300 | SWIFT_VERSION = 5.0; 301 | VERSIONING_SYSTEM = "apple-generic"; 302 | }; 303 | name = Profile; 304 | }; 305 | 97C147031CF9000F007C117D /* Debug */ = { 306 | isa = XCBuildConfiguration; 307 | buildSettings = { 308 | ALWAYS_SEARCH_USER_PATHS = NO; 309 | CLANG_ANALYZER_NONNULL = YES; 310 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 311 | CLANG_CXX_LIBRARY = "libc++"; 312 | CLANG_ENABLE_MODULES = YES; 313 | CLANG_ENABLE_OBJC_ARC = YES; 314 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 315 | CLANG_WARN_BOOL_CONVERSION = YES; 316 | CLANG_WARN_COMMA = YES; 317 | CLANG_WARN_CONSTANT_CONVERSION = YES; 318 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 319 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 320 | CLANG_WARN_EMPTY_BODY = YES; 321 | CLANG_WARN_ENUM_CONVERSION = YES; 322 | CLANG_WARN_INFINITE_RECURSION = YES; 323 | CLANG_WARN_INT_CONVERSION = YES; 324 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 325 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 326 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 327 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 328 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 329 | CLANG_WARN_STRICT_PROTOTYPES = YES; 330 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 331 | CLANG_WARN_UNREACHABLE_CODE = YES; 332 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 333 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 334 | COPY_PHASE_STRIP = NO; 335 | DEBUG_INFORMATION_FORMAT = dwarf; 336 | ENABLE_STRICT_OBJC_MSGSEND = YES; 337 | ENABLE_TESTABILITY = YES; 338 | GCC_C_LANGUAGE_STANDARD = gnu99; 339 | GCC_DYNAMIC_NO_PIC = NO; 340 | GCC_NO_COMMON_BLOCKS = YES; 341 | GCC_OPTIMIZATION_LEVEL = 0; 342 | GCC_PREPROCESSOR_DEFINITIONS = ( 343 | "DEBUG=1", 344 | "$(inherited)", 345 | ); 346 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 347 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 348 | GCC_WARN_UNDECLARED_SELECTOR = YES; 349 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 350 | GCC_WARN_UNUSED_FUNCTION = YES; 351 | GCC_WARN_UNUSED_VARIABLE = YES; 352 | IPHONEOS_DEPLOYMENT_TARGET = 11.0; 353 | MTL_ENABLE_DEBUG_INFO = YES; 354 | ONLY_ACTIVE_ARCH = YES; 355 | SDKROOT = iphoneos; 356 | TARGETED_DEVICE_FAMILY = "1,2"; 357 | }; 358 | name = Debug; 359 | }; 360 | 97C147041CF9000F007C117D /* Release */ = { 361 | isa = XCBuildConfiguration; 362 | buildSettings = { 363 | ALWAYS_SEARCH_USER_PATHS = NO; 364 | CLANG_ANALYZER_NONNULL = YES; 365 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 366 | CLANG_CXX_LIBRARY = "libc++"; 367 | CLANG_ENABLE_MODULES = YES; 368 | CLANG_ENABLE_OBJC_ARC = YES; 369 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 370 | CLANG_WARN_BOOL_CONVERSION = YES; 371 | CLANG_WARN_COMMA = YES; 372 | CLANG_WARN_CONSTANT_CONVERSION = YES; 373 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 374 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 375 | CLANG_WARN_EMPTY_BODY = YES; 376 | CLANG_WARN_ENUM_CONVERSION = YES; 377 | CLANG_WARN_INFINITE_RECURSION = YES; 378 | CLANG_WARN_INT_CONVERSION = YES; 379 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 380 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 381 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 382 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 383 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 384 | CLANG_WARN_STRICT_PROTOTYPES = YES; 385 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 386 | CLANG_WARN_UNREACHABLE_CODE = YES; 387 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 388 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 389 | COPY_PHASE_STRIP = NO; 390 | DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym"; 391 | ENABLE_NS_ASSERTIONS = NO; 392 | ENABLE_STRICT_OBJC_MSGSEND = YES; 393 | GCC_C_LANGUAGE_STANDARD = gnu99; 394 | GCC_NO_COMMON_BLOCKS = YES; 395 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 396 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 397 | GCC_WARN_UNDECLARED_SELECTOR = YES; 398 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 399 | GCC_WARN_UNUSED_FUNCTION = YES; 400 | GCC_WARN_UNUSED_VARIABLE = YES; 401 | IPHONEOS_DEPLOYMENT_TARGET = 11.0; 402 | MTL_ENABLE_DEBUG_INFO = NO; 403 | SDKROOT = iphoneos; 404 | SUPPORTED_PLATFORMS = iphoneos; 405 | SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule"; 406 | TARGETED_DEVICE_FAMILY = "1,2"; 407 | VALIDATE_PRODUCT = YES; 408 | }; 409 | name = Release; 410 | }; 411 | 97C147061CF9000F007C117D /* Debug */ = { 412 | isa = XCBuildConfiguration; 413 | baseConfigurationReference = 9740EEB21CF90195004384FC /* Debug.xcconfig */; 414 | buildSettings = { 415 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 416 | CLANG_ENABLE_MODULES = YES; 417 | CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)"; 418 | ENABLE_BITCODE = NO; 419 | INFOPLIST_FILE = Runner/Info.plist; 420 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 421 | PRODUCT_BUNDLE_IDENTIFIER = com.example.example; 422 | PRODUCT_NAME = "$(TARGET_NAME)"; 423 | SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h"; 424 | SWIFT_OPTIMIZATION_LEVEL = "-Onone"; 425 | SWIFT_VERSION = 5.0; 426 | VERSIONING_SYSTEM = "apple-generic"; 427 | }; 428 | name = Debug; 429 | }; 430 | 97C147071CF9000F007C117D /* Release */ = { 431 | isa = XCBuildConfiguration; 432 | baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */; 433 | buildSettings = { 434 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 435 | CLANG_ENABLE_MODULES = YES; 436 | CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)"; 437 | ENABLE_BITCODE = NO; 438 | INFOPLIST_FILE = Runner/Info.plist; 439 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 440 | PRODUCT_BUNDLE_IDENTIFIER = com.example.example; 441 | PRODUCT_NAME = "$(TARGET_NAME)"; 442 | SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h"; 443 | SWIFT_VERSION = 5.0; 444 | VERSIONING_SYSTEM = "apple-generic"; 445 | }; 446 | name = Release; 447 | }; 448 | /* End XCBuildConfiguration section */ 449 | 450 | /* Begin XCConfigurationList section */ 451 | 97C146E91CF9000F007C117D /* Build configuration list for PBXProject "Runner" */ = { 452 | isa = XCConfigurationList; 453 | buildConfigurations = ( 454 | 97C147031CF9000F007C117D /* Debug */, 455 | 97C147041CF9000F007C117D /* Release */, 456 | 249021D3217E4FDB00AE95B9 /* Profile */, 457 | ); 458 | defaultConfigurationIsVisible = 0; 459 | defaultConfigurationName = Release; 460 | }; 461 | 97C147051CF9000F007C117D /* Build configuration list for PBXNativeTarget "Runner" */ = { 462 | isa = XCConfigurationList; 463 | buildConfigurations = ( 464 | 97C147061CF9000F007C117D /* Debug */, 465 | 97C147071CF9000F007C117D /* Release */, 466 | 249021D4217E4FDB00AE95B9 /* Profile */, 467 | ); 468 | defaultConfigurationIsVisible = 0; 469 | defaultConfigurationName = Release; 470 | }; 471 | /* End XCConfigurationList section */ 472 | }; 473 | rootObject = 97C146E61CF9000F007C117D /* Project object */; 474 | } 475 | -------------------------------------------------------------------------------- /example/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /example/ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PreviewsEnabled 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 32 | 33 | 39 | 40 | 41 | 42 | 43 | 44 | 54 | 56 | 62 | 63 | 64 | 65 | 66 | 67 | 73 | 75 | 81 | 82 | 83 | 84 | 86 | 87 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /example/ios/Runner.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /example/ios/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PreviewsEnabled 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/ios/Runner/AppDelegate.swift: -------------------------------------------------------------------------------- 1 | import UIKit 2 | import Flutter 3 | 4 | @UIApplicationMain 5 | @objc class AppDelegate: FlutterAppDelegate { 6 | override func application( 7 | _ application: UIApplication, 8 | didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? 9 | ) -> Bool { 10 | GeneratedPluginRegistrant.register(with: self) 11 | return super.application(application, didFinishLaunchingWithOptions: launchOptions) 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "size" : "20x20", 5 | "idiom" : "iphone", 6 | "filename" : "Icon-App-20x20@2x.png", 7 | "scale" : "2x" 8 | }, 9 | { 10 | "size" : "20x20", 11 | "idiom" : "iphone", 12 | "filename" : "Icon-App-20x20@3x.png", 13 | "scale" : "3x" 14 | }, 15 | { 16 | "size" : "29x29", 17 | "idiom" : "iphone", 18 | "filename" : "Icon-App-29x29@1x.png", 19 | "scale" : "1x" 20 | }, 21 | { 22 | "size" : "29x29", 23 | "idiom" : "iphone", 24 | "filename" : "Icon-App-29x29@2x.png", 25 | "scale" : "2x" 26 | }, 27 | { 28 | "size" : "29x29", 29 | "idiom" : "iphone", 30 | "filename" : "Icon-App-29x29@3x.png", 31 | "scale" : "3x" 32 | }, 33 | { 34 | "size" : "40x40", 35 | "idiom" : "iphone", 36 | "filename" : "Icon-App-40x40@2x.png", 37 | "scale" : "2x" 38 | }, 39 | { 40 | "size" : "40x40", 41 | "idiom" : "iphone", 42 | "filename" : "Icon-App-40x40@3x.png", 43 | "scale" : "3x" 44 | }, 45 | { 46 | "size" : "60x60", 47 | "idiom" : "iphone", 48 | "filename" : "Icon-App-60x60@2x.png", 49 | "scale" : "2x" 50 | }, 51 | { 52 | "size" : "60x60", 53 | "idiom" : "iphone", 54 | "filename" : "Icon-App-60x60@3x.png", 55 | "scale" : "3x" 56 | }, 57 | { 58 | "size" : "20x20", 59 | "idiom" : "ipad", 60 | "filename" : "Icon-App-20x20@1x.png", 61 | "scale" : "1x" 62 | }, 63 | { 64 | "size" : "20x20", 65 | "idiom" : "ipad", 66 | "filename" : "Icon-App-20x20@2x.png", 67 | "scale" : "2x" 68 | }, 69 | { 70 | "size" : "29x29", 71 | "idiom" : "ipad", 72 | "filename" : "Icon-App-29x29@1x.png", 73 | "scale" : "1x" 74 | }, 75 | { 76 | "size" : "29x29", 77 | "idiom" : "ipad", 78 | "filename" : "Icon-App-29x29@2x.png", 79 | "scale" : "2x" 80 | }, 81 | { 82 | "size" : "40x40", 83 | "idiom" : "ipad", 84 | "filename" : "Icon-App-40x40@1x.png", 85 | "scale" : "1x" 86 | }, 87 | { 88 | "size" : "40x40", 89 | "idiom" : "ipad", 90 | "filename" : "Icon-App-40x40@2x.png", 91 | "scale" : "2x" 92 | }, 93 | { 94 | "size" : "76x76", 95 | "idiom" : "ipad", 96 | "filename" : "Icon-App-76x76@1x.png", 97 | "scale" : "1x" 98 | }, 99 | { 100 | "size" : "76x76", 101 | "idiom" : "ipad", 102 | "filename" : "Icon-App-76x76@2x.png", 103 | "scale" : "2x" 104 | }, 105 | { 106 | "size" : "83.5x83.5", 107 | "idiom" : "ipad", 108 | "filename" : "Icon-App-83.5x83.5@2x.png", 109 | "scale" : "2x" 110 | }, 111 | { 112 | "size" : "1024x1024", 113 | "idiom" : "ios-marketing", 114 | "filename" : "Icon-App-1024x1024@1x.png", 115 | "scale" : "1x" 116 | } 117 | ], 118 | "info" : { 119 | "version" : 1, 120 | "author" : "xcode" 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchImage.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchImage@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "filename" : "LaunchImage@3x.png", 16 | "scale" : "3x" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md: -------------------------------------------------------------------------------- 1 | # Launch Screen Assets 2 | 3 | You can customize the launch screen with your own desired assets by replacing the image files in this directory. 4 | 5 | You can also do it by opening your Flutter project's Xcode project with `open ios/Runner.xcworkspace`, selecting `Runner/Assets.xcassets` in the Project Navigator and dropping in the desired images. -------------------------------------------------------------------------------- /example/ios/Runner/Base.lproj/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /example/ios/Runner/Base.lproj/Main.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/ios/Runner/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | $(DEVELOPMENT_LANGUAGE) 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | example 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | $(FLUTTER_BUILD_NAME) 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | $(FLUTTER_BUILD_NUMBER) 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIMainStoryboardFile 28 | Main 29 | UISupportedInterfaceOrientations 30 | 31 | UIInterfaceOrientationPortrait 32 | UIInterfaceOrientationLandscapeLeft 33 | UIInterfaceOrientationLandscapeRight 34 | 35 | UISupportedInterfaceOrientations~ipad 36 | 37 | UIInterfaceOrientationPortrait 38 | UIInterfaceOrientationPortraitUpsideDown 39 | UIInterfaceOrientationLandscapeLeft 40 | UIInterfaceOrientationLandscapeRight 41 | 42 | UIViewControllerBasedStatusBarAppearance 43 | 44 | CADisableMinimumFrameDurationOnPhone 45 | 46 | UIApplicationSupportsIndirectInputEvents 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /example/ios/Runner/Runner-Bridging-Header.h: -------------------------------------------------------------------------------- 1 | #import "GeneratedPluginRegistrant.h" 2 | -------------------------------------------------------------------------------- /example/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:animated_custom_dropdown_example/widgets/controller_validation_dropdown.dart'; 2 | import 'package:animated_custom_dropdown_example/widgets/multi_select_controller_dropdown.dart'; 3 | import 'package:animated_custom_dropdown_example/widgets/decorated_dropdown.dart'; 4 | import 'package:animated_custom_dropdown_example/widgets/multi_select_dropdown.dart'; 5 | import 'package:animated_custom_dropdown_example/widgets/search_dropdown.dart'; 6 | import 'package:animated_custom_dropdown_example/widgets/search_request_dropdown.dart'; 7 | import 'package:animated_custom_dropdown_example/widgets/simple_dropdown.dart'; 8 | import 'package:animated_custom_dropdown_example/widgets/validation_dropdown.dart'; 9 | import 'package:flutter/material.dart'; 10 | 11 | void main() { 12 | runApp(const App()); 13 | } 14 | 15 | class App extends StatelessWidget { 16 | const App({Key? key}) : super(key: key); 17 | 18 | @override 19 | Widget build(BuildContext context) { 20 | return MaterialApp( 21 | debugShowCheckedModeBanner: false, 22 | title: 'Custom Dropdown App', 23 | home: const Home(), 24 | theme: ThemeData( 25 | brightness: Brightness.light, 26 | colorScheme: ColorScheme.fromSeed( 27 | brightness: Brightness.light, 28 | seedColor: Colors.blue, 29 | background: Colors.grey[200], 30 | ), 31 | ), 32 | ); 33 | } 34 | } 35 | 36 | class Home extends StatefulWidget { 37 | const Home({Key? key}) : super(key: key); 38 | 39 | @override 40 | State createState() => _HomeState(); 41 | } 42 | 43 | class _HomeState extends State { 44 | @override 45 | Widget build(BuildContext context) { 46 | return DefaultTabController( 47 | length: 2, 48 | child: Scaffold( 49 | backgroundColor: Theme.of(context).colorScheme.background, 50 | appBar: AppBar( 51 | backgroundColor: Theme.of(context).colorScheme.primary, 52 | title: const Text( 53 | 'Custom Dropdown Example', 54 | style: TextStyle(color: Colors.white), 55 | ), 56 | bottom: const TabBar( 57 | labelColor: Colors.white, 58 | unselectedLabelColor: Colors.white70, 59 | labelStyle: TextStyle(fontSize: 18), 60 | unselectedLabelStyle: TextStyle(fontSize: 18), 61 | padding: EdgeInsets.all(2), 62 | tabs: [ 63 | Padding( 64 | padding: EdgeInsets.only(bottom: 8.0), 65 | child: Text( 66 | 'Single selection', 67 | ), 68 | ), 69 | Padding( 70 | padding: EdgeInsets.only(bottom: 8.0), 71 | child: Text('Multi selection'), 72 | ), 73 | ], 74 | ), 75 | ), 76 | body: TabBarView( 77 | children: [ 78 | ListView( 79 | padding: const EdgeInsets.all(16.0), 80 | children: [ 81 | const SimpleDropdown(), 82 | const SizedBox(height: 16), 83 | const SearchDropdown(), 84 | const SizedBox(height: 16), 85 | const SearchRequestDropdown(), 86 | const SizedBox(height: 16), 87 | const DecoratedDropdown(), 88 | const SizedBox(height: 16), 89 | ValidationDropdown(), 90 | const SizedBox(height: 16), 91 | const ControllerValidationDropdown(), 92 | ], 93 | ), 94 | ListView( 95 | padding: const EdgeInsets.all(16.0), 96 | children: [ 97 | const MultiSelectDropdown(), 98 | const SizedBox(height: 16), 99 | const MultiSelectSearchDropdown(), 100 | const SizedBox(height: 16), 101 | const MultiSelectSearchRequestDropdown(), 102 | const SizedBox(height: 16), 103 | const MultiSelectDecoratedDropdown(), 104 | const SizedBox(height: 16), 105 | MultiSelectValidationDropdown(), 106 | const SizedBox(height: 16), 107 | const MultiSelectControllerDropdown() 108 | ], 109 | ), 110 | ], 111 | ), 112 | ), 113 | ); 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /example/lib/models/job.dart: -------------------------------------------------------------------------------- 1 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 2 | import 'package:flutter/material.dart'; 3 | 4 | const List jobItems = [ 5 | Job('Developer', Icons.developer_mode), 6 | Job('Designer', Icons.design_services), 7 | Job('Consultant', Icons.account_balance), 8 | Job('Student', Icons.school), 9 | ]; 10 | 11 | class Job with CustomDropdownListFilter { 12 | final String name; 13 | final IconData icon; 14 | 15 | const Job(this.name, this.icon); 16 | 17 | @override 18 | String toString() { 19 | return name; 20 | } 21 | 22 | @override 23 | bool filter(String query) { 24 | return name.toLowerCase().contains(query.toLowerCase()); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /example/lib/widgets/controller_validation_dropdown.dart: -------------------------------------------------------------------------------- 1 | import 'dart:developer'; 2 | 3 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 4 | import 'package:animated_custom_dropdown_example/models/job.dart'; 5 | import 'package:flutter/material.dart'; 6 | 7 | class ControllerValidationDropdown extends StatefulWidget { 8 | const ControllerValidationDropdown({Key? key}) : super(key: key); 9 | 10 | @override 11 | State createState() => 12 | _ControllerValidationDropdownState(); 13 | } 14 | 15 | class _ControllerValidationDropdownState 16 | extends State { 17 | final formKey = GlobalKey(); 18 | final controller = SingleSelectController(jobItems[0]); 19 | 20 | @override 21 | Widget build(BuildContext context) { 22 | return Form( 23 | key: formKey, 24 | child: Column( 25 | crossAxisAlignment: CrossAxisAlignment.start, 26 | children: [ 27 | CustomDropdown( 28 | controller: controller, 29 | hintText: 'Select job role', 30 | items: jobItems, 31 | onChanged: (value) { 32 | log('ControllerValidationDropdown onChanged value: $value'); 33 | }, 34 | validator: (value) { 35 | if (value == null) { 36 | return "Must not be null"; 37 | } 38 | return null; 39 | }, 40 | decoration: CustomDropdownDecoration( 41 | closedSuffixIcon: InkWell( 42 | onTap: () { 43 | log('Clearing ControllerValidationDropdown'); 44 | controller.clear(); 45 | }, 46 | child: const Icon(Icons.close), 47 | ), 48 | ), 49 | ), 50 | const SizedBox(height: 8), 51 | SizedBox( 52 | width: double.infinity, 53 | child: ElevatedButton( 54 | onPressed: () { 55 | if (!formKey.currentState!.validate()) { 56 | return; 57 | } 58 | }, 59 | child: const Text( 60 | 'Submit', 61 | style: TextStyle(fontWeight: FontWeight.w600), 62 | ), 63 | ), 64 | ), 65 | ], 66 | ), 67 | ); 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /example/lib/widgets/decorated_dropdown.dart: -------------------------------------------------------------------------------- 1 | import 'dart:developer'; 2 | 3 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 4 | import 'package:animated_custom_dropdown_example/models/job.dart'; 5 | import 'package:flutter/cupertino.dart'; 6 | import 'package:flutter/material.dart'; 7 | 8 | class DecoratedDropdown extends StatelessWidget { 9 | const DecoratedDropdown({Key? key}) : super(key: key); 10 | 11 | @override 12 | Widget build(BuildContext context) { 13 | return CustomDropdown.search( 14 | items: jobItems, 15 | initialItem: jobItems[2], 16 | hintText: 'Select job role', 17 | searchHintText: 'Search job role', 18 | excludeSelected: false, 19 | hideSelectedFieldWhenExpanded: true, 20 | closedHeaderPadding: const EdgeInsets.all(20), 21 | onChanged: (value) { 22 | log('DecoratedDropdown onChanged value: $value'); 23 | }, 24 | headerBuilder: (context, selectedItem, enabled) { 25 | return Text( 26 | selectedItem.toString(), 27 | style: const TextStyle( 28 | color: Colors.white, 29 | fontSize: 18, 30 | fontWeight: FontWeight.w500, 31 | ), 32 | ); 33 | }, 34 | listItemBuilder: (context, item, isSelected, onItemSelect) { 35 | return Text( 36 | item.toString(), 37 | style: const TextStyle(color: Colors.white, fontSize: 16), 38 | ); 39 | }, 40 | noResultFoundBuilder: (context, text) { 41 | return Center( 42 | child: Padding( 43 | padding: const EdgeInsets.all(12.0), 44 | child: Text( 45 | text, 46 | style: const TextStyle(color: Colors.white, fontSize: 16), 47 | ), 48 | ), 49 | ); 50 | }, 51 | decoration: CustomDropdownDecoration( 52 | closedFillColor: Colors.black, 53 | expandedFillColor: Colors.black, 54 | closedSuffixIcon: const Icon( 55 | Icons.keyboard_arrow_down, 56 | color: Colors.white, 57 | ), 58 | expandedSuffixIcon: const Icon( 59 | Icons.keyboard_arrow_up, 60 | color: Colors.grey, 61 | ), 62 | closedShadow: [ 63 | const BoxShadow( 64 | offset: Offset(0, 4), 65 | color: Colors.blue, 66 | blurRadius: 8, 67 | ), 68 | ], 69 | searchFieldDecoration: SearchFieldDecoration( 70 | fillColor: Colors.grey[700], 71 | prefixIcon: Icon(Icons.search, color: Colors.grey[400]), 72 | hintStyle: TextStyle(color: Colors.grey[400]), 73 | textStyle: const TextStyle(color: Colors.white), 74 | border: const OutlineInputBorder( 75 | borderRadius: BorderRadius.all(Radius.circular(24)), 76 | ), 77 | focusedBorder: const OutlineInputBorder( 78 | borderRadius: BorderRadius.all(Radius.circular(24)), 79 | ), 80 | suffixIcon: (onClear) { 81 | return GestureDetector( 82 | onTap: onClear, 83 | child: Icon(Icons.close, color: Colors.grey[400]), 84 | ); 85 | }, 86 | ), 87 | listItemDecoration: ListItemDecoration( 88 | selectedColor: Colors.grey[900], 89 | highlightColor: Colors.grey[800], 90 | ), 91 | ), 92 | ); 93 | } 94 | } 95 | 96 | class MultiSelectDecoratedDropdown extends StatelessWidget { 97 | const MultiSelectDecoratedDropdown({Key? key}) : super(key: key); 98 | 99 | @override 100 | Widget build(BuildContext context) { 101 | return CustomDropdown.multiSelectSearch( 102 | items: jobItems, 103 | hintText: 'Select job role', 104 | searchHintText: 'Search job role', 105 | closedHeaderPadding: const EdgeInsets.all(20), 106 | onListChanged: (value) { 107 | log('MultiSelectDecoratedDropdown onChanged value: $value'); 108 | }, 109 | maxlines: 2, 110 | listItemBuilder: (context, item, isSelected, onItemSelect) { 111 | return Row( 112 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 113 | children: [ 114 | Text( 115 | item.toString(), 116 | style: const TextStyle(color: Colors.white, fontSize: 16), 117 | ), 118 | CupertinoCheckbox( 119 | value: isSelected, 120 | onChanged: (_) => onItemSelect(), 121 | ), 122 | ], 123 | ); 124 | }, 125 | decoration: CustomDropdownDecoration( 126 | closedFillColor: Colors.black, 127 | expandedFillColor: Colors.black, 128 | hintStyle: TextStyle( 129 | color: Colors.yellow[200], 130 | fontSize: 16, 131 | ), 132 | headerStyle: const TextStyle( 133 | color: Colors.yellow, 134 | fontSize: 18, 135 | fontWeight: FontWeight.w500, 136 | ), 137 | noResultFoundStyle: const TextStyle( 138 | color: Colors.yellow, 139 | fontSize: 16, 140 | ), 141 | prefixIcon: const Icon(Icons.person, color: Colors.yellow), 142 | closedSuffixIcon: const Icon( 143 | Icons.keyboard_arrow_down, 144 | color: Colors.yellow, 145 | ), 146 | expandedSuffixIcon: const Icon( 147 | Icons.keyboard_arrow_up, 148 | color: Colors.yellow, 149 | ), 150 | closedShadow: [ 151 | const BoxShadow( 152 | offset: Offset(0, 4), 153 | color: Colors.blue, 154 | blurRadius: 8, 155 | ), 156 | ], 157 | searchFieldDecoration: SearchFieldDecoration( 158 | fillColor: Colors.grey[700], 159 | prefixIcon: Icon(Icons.search, color: Colors.grey[400]), 160 | hintStyle: TextStyle(color: Colors.grey[400]), 161 | textStyle: const TextStyle(color: Colors.white), 162 | border: const OutlineInputBorder( 163 | borderRadius: BorderRadius.all(Radius.circular(24)), 164 | ), 165 | focusedBorder: const OutlineInputBorder( 166 | borderRadius: BorderRadius.all(Radius.circular(24)), 167 | ), 168 | suffixIcon: (onClear) { 169 | return GestureDetector( 170 | onTap: onClear, 171 | child: Icon(Icons.close, color: Colors.grey[400]), 172 | ); 173 | }, 174 | ), 175 | listItemDecoration: ListItemDecoration( 176 | selectedColor: Colors.grey[900], 177 | highlightColor: Colors.grey[800], 178 | ), 179 | ), 180 | ); 181 | } 182 | } 183 | -------------------------------------------------------------------------------- /example/lib/widgets/multi_select_controller_dropdown.dart: -------------------------------------------------------------------------------- 1 | import 'dart:developer'; 2 | 3 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 4 | import 'package:animated_custom_dropdown_example/models/job.dart'; 5 | import 'package:flutter/material.dart'; 6 | 7 | class MultiSelectControllerDropdown extends StatefulWidget { 8 | const MultiSelectControllerDropdown({Key? key}) : super(key: key); 9 | 10 | @override 11 | State createState() => 12 | _MultiSelectControllerDropdownState(); 13 | } 14 | 15 | class _MultiSelectControllerDropdownState 16 | extends State { 17 | final controller = MultiSelectController([]); 18 | 19 | @override 20 | void dispose() { 21 | controller.dispose(); 22 | super.dispose(); 23 | } 24 | 25 | @override 26 | Widget build(BuildContext context) { 27 | return Column( 28 | crossAxisAlignment: CrossAxisAlignment.start, 29 | children: [ 30 | CustomDropdown.multiSelect( 31 | multiSelectController: controller, 32 | hintText: 'Select job role', 33 | items: jobItems, 34 | decoration: CustomDropdownDecoration( 35 | closedSuffixIcon: InkWell( 36 | onTap: () { 37 | log('Clearing MultiSelectControllerDropdown'); 38 | controller.clear(); 39 | }, 40 | child: const Icon(Icons.close), 41 | ), 42 | expandedSuffixIcon: InkWell( 43 | onTap: () { 44 | log('Clearing MultiSelectControllerDropdown'); 45 | controller.clear(); 46 | }, 47 | child: const Icon(Icons.close), 48 | ), 49 | ), 50 | onListChanged: (value) { 51 | log('MultiSelectControllerDropdown onChanged value: $value'); 52 | }, 53 | ), 54 | const SizedBox(height: 8), 55 | SizedBox( 56 | width: double.infinity, 57 | child: ElevatedButton( 58 | onPressed: () { 59 | controller.clear(); 60 | }, 61 | child: const Text( 62 | 'Clear', 63 | style: TextStyle(fontWeight: FontWeight.w600), 64 | ), 65 | ), 66 | ), 67 | const SizedBox(height: 8), 68 | SizedBox( 69 | width: double.infinity, 70 | child: ElevatedButton( 71 | onPressed: () { 72 | if (controller.value.contains(jobItems[0])) { 73 | controller.remove(jobItems[0]); 74 | } else { 75 | controller.add(jobItems[0]); 76 | } 77 | }, 78 | child: const Text( 79 | 'Toggle first item selection', 80 | style: TextStyle(fontWeight: FontWeight.w600), 81 | ), 82 | ), 83 | ), 84 | ], 85 | ); 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /example/lib/widgets/multi_select_dropdown.dart: -------------------------------------------------------------------------------- 1 | import 'dart:developer'; 2 | 3 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 4 | import 'package:animated_custom_dropdown_example/models/job.dart'; 5 | import 'package:flutter/material.dart'; 6 | 7 | class MultiSelectDropdown extends StatelessWidget { 8 | const MultiSelectDropdown({Key? key}) : super(key: key); 9 | 10 | @override 11 | Widget build(BuildContext context) { 12 | return CustomDropdown.multiSelect( 13 | items: jobItems, 14 | initialItems: jobItems.take(2).toList(), 15 | onListChanged: (value) { 16 | log('MultiSelectDropdown onChanged value: $value'); 17 | }, 18 | ); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /example/lib/widgets/search_dropdown.dart: -------------------------------------------------------------------------------- 1 | import 'dart:developer'; 2 | 3 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 4 | import 'package:flutter/material.dart'; 5 | 6 | const _list = [ 7 | 'Pakistani', 8 | 'Indian', 9 | 'Middle Eastern', 10 | 'Western', 11 | 'Chinese', 12 | 'Italian', 13 | ]; 14 | 15 | class SearchDropdown extends StatefulWidget { 16 | const SearchDropdown({Key? key}) : super(key: key); 17 | 18 | @override 19 | State createState() => _SearchDropdownState(); 20 | } 21 | 22 | class _SearchDropdownState extends State { 23 | String? selectedItem = _list[2]; 24 | 25 | @override 26 | Widget build(BuildContext context) { 27 | return CustomDropdown.search( 28 | hintText: 'Select cuisines', 29 | items: _list, 30 | initialItem: selectedItem, 31 | overlayHeight: 342, 32 | onChanged: (value) { 33 | log('SearchDropdown onChanged value: $value'); 34 | setState(() { 35 | selectedItem = value; 36 | }); 37 | }, 38 | ); 39 | } 40 | } 41 | 42 | class MultiSelectSearchDropdown extends StatelessWidget { 43 | const MultiSelectSearchDropdown({Key? key}) : super(key: key); 44 | 45 | @override 46 | Widget build(BuildContext context) { 47 | return CustomDropdown.multiSelectSearch( 48 | hintText: 'Select cuisines', 49 | items: _list, 50 | onListChanged: (value) { 51 | log('MultiSelectSearchDropdown onChanged value: $value'); 52 | }, 53 | ); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /example/lib/widgets/search_request_dropdown.dart: -------------------------------------------------------------------------------- 1 | import 'dart:developer'; 2 | 3 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 4 | import 'package:animated_custom_dropdown_example/models/job.dart'; 5 | import 'package:flutter/cupertino.dart'; 6 | 7 | Future> _getFakeRequestData(String query) async { 8 | return await Future.delayed(const Duration(seconds: 1), () { 9 | return jobItems.where((e) { 10 | return e.name.toLowerCase().contains(query.toLowerCase()); 11 | }).toList(); 12 | }); 13 | } 14 | 15 | class SearchRequestDropdown extends StatelessWidget { 16 | const SearchRequestDropdown({Key? key}) : super(key: key); 17 | 18 | @override 19 | Widget build(BuildContext context) { 20 | return CustomDropdown.searchRequest( 21 | futureRequest: _getFakeRequestData, 22 | hintText: 'Search job role', 23 | onChanged: (value) { 24 | log('SearchRequestDropdown onChanged value: $value'); 25 | }, 26 | searchRequestLoadingIndicator: const Center( 27 | child: Padding( 28 | padding: EdgeInsets.all(12.0), 29 | child: CupertinoActivityIndicator(), 30 | ), 31 | ), 32 | ); 33 | } 34 | } 35 | 36 | class MultiSelectSearchRequestDropdown extends StatelessWidget { 37 | const MultiSelectSearchRequestDropdown({Key? key}) : super(key: key); 38 | 39 | @override 40 | Widget build(BuildContext context) { 41 | return CustomDropdown.multiSelectSearchRequest( 42 | futureRequest: _getFakeRequestData, 43 | hintText: 'Search job role', 44 | onListChanged: (value) { 45 | log('MultiSelectSearchDropdown onChanged value: $value'); 46 | }, 47 | ); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /example/lib/widgets/simple_dropdown.dart: -------------------------------------------------------------------------------- 1 | import 'dart:developer'; 2 | 3 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 4 | import 'package:flutter/material.dart'; 5 | 6 | const List _list = [ 7 | 'Developer', 8 | 'Designer', 9 | 'Consultant', 10 | 'Student', 11 | ]; 12 | 13 | class SimpleDropdown extends StatelessWidget { 14 | const SimpleDropdown({Key? key}) : super(key: key); 15 | 16 | @override 17 | Widget build(BuildContext context) { 18 | return CustomDropdown( 19 | hintText: 'Select job role', 20 | items: _list, 21 | initialItem: _list[0], 22 | excludeSelected: false, 23 | onChanged: (value) { 24 | log('SimpleDropdown onChanged value: $value'); 25 | }, 26 | ); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /example/lib/widgets/validation_dropdown.dart: -------------------------------------------------------------------------------- 1 | import 'dart:developer'; 2 | 3 | import 'package:animated_custom_dropdown/custom_dropdown.dart'; 4 | import 'package:animated_custom_dropdown_example/models/job.dart'; 5 | import 'package:flutter/material.dart'; 6 | 7 | class ValidationDropdown extends StatelessWidget { 8 | ValidationDropdown({Key? key}) : super(key: key); 9 | 10 | final _formKey = GlobalKey(); 11 | 12 | @override 13 | Widget build(BuildContext context) { 14 | return Form( 15 | key: _formKey, 16 | child: Column( 17 | crossAxisAlignment: CrossAxisAlignment.start, 18 | children: [ 19 | CustomDropdown( 20 | hintText: 'Select job role', 21 | items: jobItems, 22 | excludeSelected: false, 23 | onChanged: (value) { 24 | log('ValidationDropdown onChanged value: $value'); 25 | }, 26 | validator: (value) { 27 | if (value == null) { 28 | return "Must not be null"; 29 | } 30 | return null; 31 | }, 32 | ), 33 | const SizedBox(height: 8), 34 | SizedBox( 35 | width: double.infinity, 36 | child: ElevatedButton( 37 | onPressed: () { 38 | if (!_formKey.currentState!.validate()) { 39 | return; 40 | } 41 | }, 42 | child: const Text( 43 | 'Submit', 44 | style: TextStyle(fontWeight: FontWeight.w600), 45 | ), 46 | ), 47 | ), 48 | ], 49 | ), 50 | ); 51 | } 52 | } 53 | 54 | class MultiSelectValidationDropdown extends StatelessWidget { 55 | MultiSelectValidationDropdown({Key? key}) : super(key: key); 56 | 57 | final _formKey = GlobalKey(); 58 | 59 | @override 60 | Widget build(BuildContext context) { 61 | return Form( 62 | key: _formKey, 63 | child: Column( 64 | crossAxisAlignment: CrossAxisAlignment.start, 65 | children: [ 66 | CustomDropdown.multiSelect( 67 | hintText: 'Select job role', 68 | items: jobItems, 69 | onListChanged: (value) { 70 | log('MultiSelectValidationDropdown onChanged value: $value'); 71 | }, 72 | listValidator: (value) { 73 | if (value.isEmpty) { 74 | return "Must not be null"; 75 | } 76 | return null; 77 | }, 78 | ), 79 | const SizedBox(height: 8), 80 | SizedBox( 81 | width: double.infinity, 82 | child: ElevatedButton( 83 | onPressed: () { 84 | if (!_formKey.currentState!.validate()) { 85 | return; 86 | } 87 | }, 88 | child: const Text( 89 | 'Submit', 90 | style: TextStyle(fontWeight: FontWeight.w600), 91 | ), 92 | ), 93 | ), 94 | ], 95 | ), 96 | ); 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /example/pubspec.lock: -------------------------------------------------------------------------------- 1 | # Generated by pub 2 | # See https://dart.dev/tools/pub/glossary#lockfile 3 | packages: 4 | animated_custom_dropdown: 5 | dependency: "direct main" 6 | description: 7 | path: ".." 8 | relative: true 9 | source: path 10 | version: "3.1.1" 11 | async: 12 | dependency: transitive 13 | description: 14 | name: async 15 | sha256: "947bfcf187f74dbc5e146c9eb9c0f10c9f8b30743e341481c1e2ed3ecc18c20c" 16 | url: "https://pub.dev" 17 | source: hosted 18 | version: "2.11.0" 19 | boolean_selector: 20 | dependency: transitive 21 | description: 22 | name: boolean_selector 23 | sha256: "6cfb5af12253eaf2b368f07bacc5a80d1301a071c73360d746b7f2e32d762c66" 24 | url: "https://pub.dev" 25 | source: hosted 26 | version: "2.1.1" 27 | characters: 28 | dependency: transitive 29 | description: 30 | name: characters 31 | sha256: "04a925763edad70e8443c99234dc3328f442e811f1d8fd1a72f1c8ad0f69a605" 32 | url: "https://pub.dev" 33 | source: hosted 34 | version: "1.3.0" 35 | clock: 36 | dependency: transitive 37 | description: 38 | name: clock 39 | sha256: cb6d7f03e1de671e34607e909a7213e31d7752be4fb66a86d29fe1eb14bfb5cf 40 | url: "https://pub.dev" 41 | source: hosted 42 | version: "1.1.1" 43 | collection: 44 | dependency: transitive 45 | description: 46 | name: collection 47 | sha256: ee67cb0715911d28db6bf4af1026078bd6f0128b07a5f66fb2ed94ec6783c09a 48 | url: "https://pub.dev" 49 | source: hosted 50 | version: "1.18.0" 51 | cupertino_icons: 52 | dependency: "direct main" 53 | description: 54 | name: cupertino_icons 55 | sha256: d57953e10f9f8327ce64a508a355f0b1ec902193f66288e8cb5070e7c47eeb2d 56 | url: "https://pub.dev" 57 | source: hosted 58 | version: "1.0.6" 59 | fake_async: 60 | dependency: transitive 61 | description: 62 | name: fake_async 63 | sha256: "511392330127add0b769b75a987850d136345d9227c6b94c96a04cf4a391bf78" 64 | url: "https://pub.dev" 65 | source: hosted 66 | version: "1.3.1" 67 | flutter: 68 | dependency: "direct main" 69 | description: flutter 70 | source: sdk 71 | version: "0.0.0" 72 | flutter_lints: 73 | dependency: "direct dev" 74 | description: 75 | name: flutter_lints 76 | sha256: a25a15ebbdfc33ab1cd26c63a6ee519df92338a9c10f122adda92938253bef04 77 | url: "https://pub.dev" 78 | source: hosted 79 | version: "2.0.3" 80 | flutter_test: 81 | dependency: "direct dev" 82 | description: flutter 83 | source: sdk 84 | version: "0.0.0" 85 | leak_tracker: 86 | dependency: transitive 87 | description: 88 | name: leak_tracker 89 | sha256: "7f0df31977cb2c0b88585095d168e689669a2cc9b97c309665e3386f3e9d341a" 90 | url: "https://pub.dev" 91 | source: hosted 92 | version: "10.0.4" 93 | leak_tracker_flutter_testing: 94 | dependency: transitive 95 | description: 96 | name: leak_tracker_flutter_testing 97 | sha256: "06e98f569d004c1315b991ded39924b21af84cf14cc94791b8aea337d25b57f8" 98 | url: "https://pub.dev" 99 | source: hosted 100 | version: "3.0.3" 101 | leak_tracker_testing: 102 | dependency: transitive 103 | description: 104 | name: leak_tracker_testing 105 | sha256: "6ba465d5d76e67ddf503e1161d1f4a6bc42306f9d66ca1e8f079a47290fb06d3" 106 | url: "https://pub.dev" 107 | source: hosted 108 | version: "3.0.1" 109 | lints: 110 | dependency: transitive 111 | description: 112 | name: lints 113 | sha256: "0a217c6c989d21039f1498c3ed9f3ed71b354e69873f13a8dfc3c9fe76f1b452" 114 | url: "https://pub.dev" 115 | source: hosted 116 | version: "2.1.1" 117 | matcher: 118 | dependency: transitive 119 | description: 120 | name: matcher 121 | sha256: d2323aa2060500f906aa31a895b4030b6da3ebdcc5619d14ce1aada65cd161cb 122 | url: "https://pub.dev" 123 | source: hosted 124 | version: "0.12.16+1" 125 | material_color_utilities: 126 | dependency: transitive 127 | description: 128 | name: material_color_utilities 129 | sha256: "0e0a020085b65b6083975e499759762399b4475f766c21668c4ecca34ea74e5a" 130 | url: "https://pub.dev" 131 | source: hosted 132 | version: "0.8.0" 133 | meta: 134 | dependency: transitive 135 | description: 136 | name: meta 137 | sha256: "7687075e408b093f36e6bbf6c91878cc0d4cd10f409506f7bc996f68220b9136" 138 | url: "https://pub.dev" 139 | source: hosted 140 | version: "1.12.0" 141 | path: 142 | dependency: transitive 143 | description: 144 | name: path 145 | sha256: "087ce49c3f0dc39180befefc60fdb4acd8f8620e5682fe2476afd0b3688bb4af" 146 | url: "https://pub.dev" 147 | source: hosted 148 | version: "1.9.0" 149 | sky_engine: 150 | dependency: transitive 151 | description: flutter 152 | source: sdk 153 | version: "0.0.99" 154 | source_span: 155 | dependency: transitive 156 | description: 157 | name: source_span 158 | sha256: "53e943d4206a5e30df338fd4c6e7a077e02254531b138a15aec3bd143c1a8b3c" 159 | url: "https://pub.dev" 160 | source: hosted 161 | version: "1.10.0" 162 | stack_trace: 163 | dependency: transitive 164 | description: 165 | name: stack_trace 166 | sha256: "73713990125a6d93122541237550ee3352a2d84baad52d375a4cad2eb9b7ce0b" 167 | url: "https://pub.dev" 168 | source: hosted 169 | version: "1.11.1" 170 | stream_channel: 171 | dependency: transitive 172 | description: 173 | name: stream_channel 174 | sha256: ba2aa5d8cc609d96bbb2899c28934f9e1af5cddbd60a827822ea467161eb54e7 175 | url: "https://pub.dev" 176 | source: hosted 177 | version: "2.1.2" 178 | string_scanner: 179 | dependency: transitive 180 | description: 181 | name: string_scanner 182 | sha256: "556692adab6cfa87322a115640c11f13cb77b3f076ddcc5d6ae3c20242bedcde" 183 | url: "https://pub.dev" 184 | source: hosted 185 | version: "1.2.0" 186 | term_glyph: 187 | dependency: transitive 188 | description: 189 | name: term_glyph 190 | sha256: a29248a84fbb7c79282b40b8c72a1209db169a2e0542bce341da992fe1bc7e84 191 | url: "https://pub.dev" 192 | source: hosted 193 | version: "1.2.1" 194 | test_api: 195 | dependency: transitive 196 | description: 197 | name: test_api 198 | sha256: "9955ae474176f7ac8ee4e989dadfb411a58c30415bcfb648fa04b2b8a03afa7f" 199 | url: "https://pub.dev" 200 | source: hosted 201 | version: "0.7.0" 202 | vector_math: 203 | dependency: transitive 204 | description: 205 | name: vector_math 206 | sha256: "80b3257d1492ce4d091729e3a67a60407d227c27241d6927be0130c98e741803" 207 | url: "https://pub.dev" 208 | source: hosted 209 | version: "2.1.4" 210 | vm_service: 211 | dependency: transitive 212 | description: 213 | name: vm_service 214 | sha256: "3923c89304b715fb1eb6423f017651664a03bf5f4b29983627c4da791f74a4ec" 215 | url: "https://pub.dev" 216 | source: hosted 217 | version: "14.2.1" 218 | sdks: 219 | dart: ">=3.3.0 <4.0.0" 220 | flutter: ">=3.18.0-18.0.pre.54" 221 | -------------------------------------------------------------------------------- /example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: animated_custom_dropdown_example 2 | description: Demonstrates how to use the custom dropdown package. 3 | 4 | # The following line prevents the package from being accidentally published to 5 | # pub.dev using `flutter pub publish`. This is preferred for private packages. 6 | publish_to: 'none' # Remove this line if you wish to publish to pub.dev 7 | 8 | # The following defines the version and build number for your application. 9 | # A version number is three numbers separated by dots, like 1.2.43 10 | # followed by an optional build number separated by a +. 11 | # Both the version and the builder number may be overridden in flutter 12 | # build by specifying --build-name and --build-number, respectively. 13 | # In Android, build-name is used as versionName while build-number used as versionCode. 14 | # Read more about Android versioning at https://developer.android.com/studio/publish/versioning 15 | # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion. 16 | # Read more about iOS versioning at 17 | # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html 18 | version: 1.0.0+1 19 | 20 | environment: 21 | sdk: ">=3.0.0 <4.0.0" 22 | 23 | # Dependencies specify other packages that your package needs in order to work. 24 | # To automatically upgrade your package dependencies to the latest versions 25 | # consider running `flutter pub upgrade --major-versions`. Alternatively, 26 | # dependencies can be manually updated by changing the version numbers below to 27 | # the latest version available on pub.dev. To see which dependencies have newer 28 | # versions available, run `flutter pub outdated`. 29 | dependencies: 30 | flutter: 31 | sdk: flutter 32 | animated_custom_dropdown: 33 | path: ../ 34 | 35 | 36 | # The following adds the Cupertino Icons font to your application. 37 | # Use with the CupertinoIcons class for iOS style icons. 38 | cupertino_icons: ^1.0.2 39 | 40 | dev_dependencies: 41 | flutter_test: 42 | sdk: flutter 43 | 44 | # The "flutter_lints" package below contains a set of recommended lints to 45 | # encourage good coding practices. The lint set provided by the package is 46 | # activated in the `analysis_options.yaml` file located at the root of your 47 | # package. See that file for information about deactivating specific lint 48 | # rules and activating additional ones. 49 | flutter_lints: ^2.0.1 50 | 51 | # For information on the generic Dart part of this file, see the 52 | # following page: https://dart.dev/tools/pub/pubspec 53 | 54 | # The following section is specific to Flutter. 55 | flutter: 56 | 57 | # The following line ensures that the Material Icons font is 58 | # included with your application, so that you can use the icons in 59 | # the material Icons class. 60 | uses-material-design: true 61 | 62 | # To add assets to your application, add an assets section, like this: 63 | # assets: 64 | # - images/a_dot_burr.jpeg 65 | # - images/a_dot_ham.jpeg 66 | 67 | # An image asset can refer to one or more resolution-specific "variants", see 68 | # https://flutter.dev/assets-and-images/#resolution-aware. 69 | 70 | # For details regarding adding assets from package dependencies, see 71 | # https://flutter.dev/assets-and-images/#from-packages 72 | 73 | # To add custom fonts to your application, add a fonts section here, 74 | # in this "flutter" section. Each entry in this list should have a 75 | # "family" key with the font family name, and a "fonts" key with a 76 | # list giving the asset and other descriptors for the font. For 77 | # example: 78 | # fonts: 79 | # - family: Schyler 80 | # fonts: 81 | # - asset: fonts/Schyler-Regular.ttf 82 | # - asset: fonts/Schyler-Italic.ttf 83 | # style: italic 84 | # - family: Trajan Pro 85 | # fonts: 86 | # - asset: fonts/TrajanPro.ttf 87 | # - asset: fonts/TrajanPro_Bold.ttf 88 | # weight: 700 89 | # 90 | # For details regarding fonts from package dependencies, 91 | # see https://flutter.dev/custom-fonts/#from-packages 92 | -------------------------------------------------------------------------------- /example/web/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/web/favicon.png -------------------------------------------------------------------------------- /example/web/icons/Icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/web/icons/Icon-192.png -------------------------------------------------------------------------------- /example/web/icons/Icon-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/web/icons/Icon-512.png -------------------------------------------------------------------------------- /example/web/icons/Icon-maskable-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/web/icons/Icon-maskable-192.png -------------------------------------------------------------------------------- /example/web/icons/Icon-maskable-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/example/web/icons/Icon-maskable-512.png -------------------------------------------------------------------------------- /example/web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | example 30 | 31 | 32 | 33 | 36 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /example/web/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "short_name": "example", 4 | "start_url": ".", 5 | "display": "standalone", 6 | "background_color": "#0175C2", 7 | "theme_color": "#0175C2", 8 | "description": "A new Flutter project.", 9 | "orientation": "portrait-primary", 10 | "prefer_related_applications": false, 11 | "icons": [ 12 | { 13 | "src": "icons/Icon-192.png", 14 | "sizes": "192x192", 15 | "type": "image/png" 16 | }, 17 | { 18 | "src": "icons/Icon-512.png", 19 | "sizes": "512x512", 20 | "type": "image/png" 21 | }, 22 | { 23 | "src": "icons/Icon-maskable-192.png", 24 | "sizes": "192x192", 25 | "type": "image/png", 26 | "purpose": "maskable" 27 | }, 28 | { 29 | "src": "icons/Icon-maskable-512.png", 30 | "sizes": "512x512", 31 | "type": "image/png", 32 | "purpose": "maskable" 33 | } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /lib/custom_dropdown.dart: -------------------------------------------------------------------------------- 1 | library animated_custom_dropdown; 2 | 3 | import 'dart:async'; 4 | 5 | import 'package:flutter/material.dart'; 6 | import 'package:flutter/scheduler.dart'; 7 | 8 | export 'custom_dropdown.dart'; 9 | 10 | // models 11 | part 'models/custom_dropdown_decoration.dart'; 12 | part 'models/custom_dropdown_list_filter.dart'; 13 | part 'models/disabled_decoration.dart'; 14 | part 'models/list_item_decoration.dart'; 15 | part 'models/controllers.dart'; 16 | part 'models/search_field_decoration.dart'; 17 | // utils 18 | part 'utils/signatures.dart'; 19 | // widgets 20 | part 'widgets/animated_section.dart'; 21 | part 'widgets/dropdown_field.dart'; 22 | part 'widgets/dropdown_overlay/dropdown_overlay.dart'; 23 | part 'widgets/dropdown_overlay/widgets/items_list.dart'; 24 | part 'widgets/dropdown_overlay/widgets/search_field.dart'; 25 | part 'widgets/overlay_builder.dart'; 26 | 27 | enum _DropdownType { singleSelect, multipleSelect } 28 | 29 | enum _SearchType { onListData, onRequestData } 30 | 31 | const _defaultErrorColor = Colors.red; 32 | 33 | const _defaultBorderRadius = BorderRadius.all( 34 | Radius.circular(12), 35 | ); 36 | 37 | final Border _defaultErrorBorder = Border.all( 38 | color: _defaultErrorColor, 39 | width: 1.5, 40 | ); 41 | 42 | const _defaultErrorStyle = TextStyle( 43 | color: _defaultErrorColor, 44 | fontSize: 14, 45 | height: 0.5, 46 | ); 47 | 48 | class CustomDropdown extends StatefulWidget { 49 | /// The list of items user can select. 50 | final List? items; 51 | 52 | /// Initial selected item from the list of [items]. 53 | final T? initialItem; 54 | 55 | /// Initial selected items from the list of [items]. 56 | final List? initialItems; 57 | 58 | /// Scroll controller to access items list scroll behavior. 59 | final ScrollController? itemsScrollController; 60 | 61 | /// Text that suggests what sort of data the dropdown represents. 62 | /// 63 | /// Default to "Select value". 64 | final String? hintText; 65 | 66 | /// Text that suggests what to search in the search field. 67 | /// 68 | /// Default to "Search". 69 | final String? searchHintText; 70 | 71 | /// A method that validates the selected item. 72 | /// Returns an error string to display as per the validation, or null otherwise. 73 | final String? Function(T?)? validator; 74 | 75 | /// A method that validates the selected items. 76 | /// Returns an error string to display as per the validation, or null otherwise. 77 | final String? Function(List)? listValidator; 78 | 79 | /// Enable the validation listener on item change. 80 | /// This implies to [validator] everytime when the item change. 81 | final bool validateOnChange; 82 | 83 | /// Called when the item of the [CustomDropdown] should change. 84 | final Function(T?)? onChanged; 85 | 86 | /// Called when the list of items of the [CustomDropdown] should change. 87 | final Function(List)? onListChanged; 88 | 89 | /// Hide the selected item from the [items] list. 90 | final bool excludeSelected; 91 | 92 | /// Can close [CustomDropdown] overlay by tapping outside. 93 | /// Here "outside" covers the entire screen. 94 | final bool canCloseOutsideBounds; 95 | 96 | /// Hide the header field when [CustomDropdown] overlay opened/expanded. 97 | final bool hideSelectedFieldWhenExpanded; 98 | 99 | /// The asynchronous computation from which the items list returns. 100 | final Future> Function(String)? futureRequest; 101 | 102 | /// Text that notify there's no search results match. 103 | /// 104 | /// Default to "No result found.". 105 | final String? noResultFoundText; 106 | 107 | /// Duration after which the [futureRequest] is to be executed. 108 | final Duration? futureRequestDelay; 109 | 110 | /// Text maxlines for header and list item text. 111 | final int maxlines; 112 | 113 | /// Padding for [CustomDropdown] header (closed state). 114 | final EdgeInsets? closedHeaderPadding; 115 | 116 | /// Padding for [CustomDropdown] header (opened/expanded state). 117 | final EdgeInsets? expandedHeaderPadding; 118 | 119 | /// Padding for [CustomDropdown] items list. 120 | final EdgeInsets? itemsListPadding; 121 | 122 | /// Padding for [CustomDropdown] each list item. 123 | final EdgeInsets? listItemPadding; 124 | 125 | /// Widget to display while search request loading. 126 | final Widget? searchRequestLoadingIndicator; 127 | 128 | /// [CustomDropdown] opened/expanded area height. 129 | /// Only applicable if items are greater than 4 otherwise adjust automatically. 130 | final double? overlayHeight; 131 | 132 | /// The [listItemBuilder] that will be used to build item on demand. 133 | final _ListItemBuilder? listItemBuilder; 134 | 135 | /// The [headerBuilder] that will be used to build [CustomDropdown] header field. 136 | final _HeaderBuilder? headerBuilder; 137 | 138 | /// The [hintBuilder] that will be used to build [CustomDropdown] hint of header field. 139 | final _HintBuilder? hintBuilder; 140 | 141 | /// The [noResultFoundBuilder] that will be used to build area when there's no search results match. 142 | final _NoResultFoundBuilder? noResultFoundBuilder; 143 | 144 | /// The [headerListBuilder] that will be used to build [CustomDropdown] header field. 145 | final _HeaderListBuilder? headerListBuilder; 146 | 147 | /// [CustomDropdown] decoration. 148 | /// Contain sub-decorations [SearchFieldDecoration], [ListItemDecoration] and [ScrollbarThemeData]. 149 | final CustomDropdownDecoration? decoration; 150 | 151 | /// [CustomDropdown] enabled/disabled state. 152 | /// If disabled, you can not open the dropdown. 153 | final bool enabled; 154 | 155 | /// [CustomDropdown] disabled decoration. 156 | /// 157 | /// Note: Only applicable if dropdown is disabled. 158 | final CustomDropdownDisabledDecoration? disabledDecoration; 159 | 160 | /// [CustomDropdown] will close on tap Clear filter for all search 161 | /// and searchRequest constructors 162 | final bool closeDropDownOnClearFilterSearch; 163 | 164 | /// The [overlayController] allows you to explicitly handle the [CustomDropdown] overlay states (show/hide). 165 | final OverlayPortalController? overlayController; 166 | 167 | /// The [controller] that can be used to control [CustomDropdown] selected item. 168 | final SingleSelectController? controller; 169 | 170 | /// The [multiSelectController] that can be used to control [CustomDropdown.multiSelect] selected items. 171 | final MultiSelectController? multiSelectController; 172 | 173 | /// Callback for dropdown [visibility]. 174 | /// 175 | /// If both [visibility] and [overlayController] are provided, this callback never listens the changes of [overlayController]. 176 | /// You have to explicitly check for [overlayController] visibility states using [overlayController.isShowing] property. 177 | final Function(bool)? visibility; 178 | 179 | final _SearchType? _searchType; 180 | 181 | final _DropdownType _dropdownType; 182 | 183 | CustomDropdown({ 184 | super.key, 185 | required this.items, 186 | required this.onChanged, 187 | this.controller, 188 | this.itemsScrollController, 189 | this.initialItem, 190 | this.hintText, 191 | this.decoration, 192 | this.validator, 193 | this.validateOnChange = true, 194 | this.visibility, 195 | this.overlayController, 196 | this.listItemBuilder, 197 | this.headerBuilder, 198 | this.hintBuilder, 199 | this.maxlines = 1, 200 | this.overlayHeight, 201 | this.closedHeaderPadding, 202 | this.expandedHeaderPadding, 203 | this.itemsListPadding, 204 | this.listItemPadding, 205 | this.canCloseOutsideBounds = true, 206 | this.hideSelectedFieldWhenExpanded = false, 207 | this.excludeSelected = true, 208 | this.enabled = true, 209 | this.disabledDecoration, 210 | }) : assert( 211 | initialItem == null || controller == null, 212 | 'Only one of initialItem or controller can be specified at a time', 213 | ), 214 | assert( 215 | initialItem == null || items!.contains(initialItem), 216 | 'Initial item must match with one of the item in items list.', 217 | ), 218 | assert( 219 | controller == null || 220 | controller.value == null || 221 | items!.contains(controller.value), 222 | 'Controller value must match with one of the item in items list.', 223 | ), 224 | _searchType = null, 225 | _dropdownType = _DropdownType.singleSelect, 226 | futureRequest = null, 227 | futureRequestDelay = null, 228 | noResultFoundBuilder = null, 229 | noResultFoundText = null, 230 | searchHintText = null, 231 | initialItems = null, 232 | onListChanged = null, 233 | listValidator = null, 234 | headerListBuilder = null, 235 | searchRequestLoadingIndicator = null, 236 | closeDropDownOnClearFilterSearch = false, 237 | multiSelectController = null; 238 | 239 | CustomDropdown.search({ 240 | super.key, 241 | required this.items, 242 | required this.onChanged, 243 | this.controller, 244 | this.itemsScrollController, 245 | this.initialItem, 246 | this.hintText, 247 | this.decoration, 248 | this.visibility, 249 | this.overlayController, 250 | this.searchHintText, 251 | this.noResultFoundText, 252 | this.listItemBuilder, 253 | this.headerBuilder, 254 | this.hintBuilder, 255 | this.noResultFoundBuilder, 256 | this.validator, 257 | this.validateOnChange = true, 258 | this.maxlines = 1, 259 | this.overlayHeight, 260 | this.closedHeaderPadding, 261 | this.expandedHeaderPadding, 262 | this.itemsListPadding, 263 | this.listItemPadding, 264 | this.excludeSelected = true, 265 | this.canCloseOutsideBounds = true, 266 | this.hideSelectedFieldWhenExpanded = false, 267 | this.enabled = true, 268 | this.disabledDecoration, 269 | this.closeDropDownOnClearFilterSearch = false, 270 | }) : assert( 271 | initialItem == null || controller == null, 272 | 'Only one of initialItem or controller can be specified at a time', 273 | ), 274 | assert( 275 | initialItem == null || items!.contains(initialItem), 276 | 'Initial item must match with one of the item in items list.', 277 | ), 278 | assert( 279 | controller == null || 280 | controller.value == null || 281 | items!.contains(controller.value), 282 | 'Controller value must match with one of the item in items list.', 283 | ), 284 | _searchType = _SearchType.onListData, 285 | _dropdownType = _DropdownType.singleSelect, 286 | futureRequest = null, 287 | futureRequestDelay = null, 288 | initialItems = null, 289 | onListChanged = null, 290 | listValidator = null, 291 | headerListBuilder = null, 292 | searchRequestLoadingIndicator = null, 293 | multiSelectController = null; 294 | 295 | const CustomDropdown.searchRequest({ 296 | super.key, 297 | required this.futureRequest, 298 | required this.onChanged, 299 | this.futureRequestDelay, 300 | this.initialItem, 301 | this.items, 302 | this.controller, 303 | this.itemsScrollController, 304 | this.hintText, 305 | this.decoration, 306 | this.visibility, 307 | this.overlayController, 308 | this.searchHintText, 309 | this.noResultFoundText, 310 | this.listItemBuilder, 311 | this.headerBuilder, 312 | this.hintBuilder, 313 | this.noResultFoundBuilder, 314 | this.validator, 315 | this.validateOnChange = true, 316 | this.maxlines = 1, 317 | this.overlayHeight, 318 | this.closedHeaderPadding, 319 | this.expandedHeaderPadding, 320 | this.itemsListPadding, 321 | this.listItemPadding, 322 | this.searchRequestLoadingIndicator, 323 | this.excludeSelected = true, 324 | this.canCloseOutsideBounds = true, 325 | this.hideSelectedFieldWhenExpanded = false, 326 | this.enabled = true, 327 | this.disabledDecoration, 328 | this.closeDropDownOnClearFilterSearch = false, 329 | }) : assert( 330 | initialItem == null || controller == null, 331 | 'Only one of initialItem or controller can be specified at a time', 332 | ), 333 | _searchType = _SearchType.onRequestData, 334 | _dropdownType = _DropdownType.singleSelect, 335 | initialItems = null, 336 | onListChanged = null, 337 | listValidator = null, 338 | headerListBuilder = null, 339 | multiSelectController = null; 340 | 341 | CustomDropdown.multiSelect({ 342 | super.key, 343 | required this.items, 344 | required this.onListChanged, 345 | this.multiSelectController, 346 | this.controller, 347 | this.initialItems, 348 | this.overlayController, 349 | this.itemsScrollController, 350 | this.listValidator, 351 | this.visibility, 352 | this.headerListBuilder, 353 | this.hintText, 354 | this.decoration, 355 | this.validateOnChange = true, 356 | this.listItemBuilder, 357 | this.hintBuilder, 358 | this.canCloseOutsideBounds = true, 359 | this.hideSelectedFieldWhenExpanded = false, 360 | this.maxlines = 1, 361 | this.overlayHeight, 362 | this.closedHeaderPadding, 363 | this.expandedHeaderPadding, 364 | this.itemsListPadding, 365 | this.listItemPadding, 366 | this.enabled = true, 367 | this.disabledDecoration, 368 | }) : assert( 369 | initialItems == null || multiSelectController == null, 370 | 'Only one of initialItems or controller can be specified at a time', 371 | ), 372 | assert( 373 | initialItems == null || 374 | initialItems.isEmpty || 375 | initialItems.any((e) => items!.contains(e)), 376 | 'Initial items must match with the items in the items list.', 377 | ), 378 | assert( 379 | multiSelectController == null || 380 | multiSelectController.value.isEmpty || 381 | multiSelectController.value.any((e) => items!.contains(e)), 382 | 'Controller value must match with one of the item in items list.', 383 | ), 384 | _searchType = null, 385 | _dropdownType = _DropdownType.multipleSelect, 386 | initialItem = null, 387 | noResultFoundText = null, 388 | validator = null, 389 | headerBuilder = null, 390 | onChanged = null, 391 | excludeSelected = false, 392 | futureRequest = null, 393 | futureRequestDelay = null, 394 | noResultFoundBuilder = null, 395 | searchHintText = null, 396 | searchRequestLoadingIndicator = null, 397 | closeDropDownOnClearFilterSearch = false; 398 | 399 | CustomDropdown.multiSelectSearch({ 400 | super.key, 401 | required this.items, 402 | required this.onListChanged, 403 | this.multiSelectController, 404 | this.initialItems, 405 | this.controller, 406 | this.visibility, 407 | this.itemsScrollController, 408 | this.overlayController, 409 | this.listValidator, 410 | this.listItemBuilder, 411 | this.hintBuilder, 412 | this.decoration, 413 | this.headerListBuilder, 414 | this.noResultFoundText, 415 | this.noResultFoundBuilder, 416 | this.hintText, 417 | this.searchHintText, 418 | this.validateOnChange = true, 419 | this.canCloseOutsideBounds = true, 420 | this.hideSelectedFieldWhenExpanded = false, 421 | this.maxlines = 1, 422 | this.overlayHeight, 423 | this.closedHeaderPadding, 424 | this.expandedHeaderPadding, 425 | this.itemsListPadding, 426 | this.listItemPadding, 427 | this.enabled = true, 428 | this.disabledDecoration, 429 | this.closeDropDownOnClearFilterSearch = false, 430 | }) : assert( 431 | initialItems == null || multiSelectController == null, 432 | 'Only one of initialItems or controller can be specified at a time', 433 | ), 434 | assert( 435 | initialItems == null || 436 | initialItems.isEmpty || 437 | initialItems.any((e) => items!.contains(e)), 438 | 'Initial items must match with the items in the items list.', 439 | ), 440 | assert( 441 | multiSelectController == null || 442 | multiSelectController.value.isEmpty || 443 | multiSelectController.value.any((e) => items!.contains(e)), 444 | 'Controller value must match with one of the item in items list.', 445 | ), 446 | _searchType = _SearchType.onListData, 447 | _dropdownType = _DropdownType.multipleSelect, 448 | initialItem = null, 449 | onChanged = null, 450 | validator = null, 451 | excludeSelected = false, 452 | headerBuilder = null, 453 | futureRequest = null, 454 | futureRequestDelay = null, 455 | searchRequestLoadingIndicator = null; 456 | 457 | const CustomDropdown.multiSelectSearchRequest({ 458 | super.key, 459 | required this.futureRequest, 460 | required this.onListChanged, 461 | this.multiSelectController, 462 | this.futureRequestDelay, 463 | this.initialItems, 464 | this.items, 465 | this.controller, 466 | this.itemsScrollController, 467 | this.overlayController, 468 | this.visibility, 469 | this.hintText, 470 | this.decoration, 471 | this.searchHintText, 472 | this.noResultFoundText, 473 | this.headerListBuilder, 474 | this.listItemBuilder, 475 | this.hintBuilder, 476 | this.noResultFoundBuilder, 477 | this.listValidator, 478 | this.validateOnChange = true, 479 | this.maxlines = 1, 480 | this.overlayHeight, 481 | this.searchRequestLoadingIndicator, 482 | this.closedHeaderPadding, 483 | this.expandedHeaderPadding, 484 | this.itemsListPadding, 485 | this.listItemPadding, 486 | this.canCloseOutsideBounds = true, 487 | this.hideSelectedFieldWhenExpanded = false, 488 | this.enabled = true, 489 | this.disabledDecoration, 490 | this.closeDropDownOnClearFilterSearch = false, 491 | }) : assert( 492 | initialItems == null || multiSelectController == null, 493 | 'Only one of initialItems or controller can be specified at a time', 494 | ), 495 | _searchType = _SearchType.onRequestData, 496 | _dropdownType = _DropdownType.multipleSelect, 497 | initialItem = null, 498 | onChanged = null, 499 | headerBuilder = null, 500 | excludeSelected = false, 501 | validator = null; 502 | 503 | @override 504 | State> createState() => _CustomDropdownState(); 505 | } 506 | 507 | class _CustomDropdownState extends State> { 508 | final layerLink = LayerLink(); 509 | late SingleSelectController selectedItemNotifier; 510 | late MultiSelectController selectedItemsNotifier; 511 | FormFieldState<(T?, List)>? _formFieldState; 512 | 513 | void _selectedItemListener() { 514 | widget.onChanged?.call(selectedItemNotifier.value); 515 | _formFieldState?.didChange((selectedItemNotifier.value, [])); 516 | if (widget.validateOnChange) { 517 | _formFieldState?.validate(); 518 | } 519 | } 520 | 521 | void _selectedItemsListener() { 522 | widget.onListChanged?.call(selectedItemsNotifier.value); 523 | _formFieldState?.didChange((null, selectedItemsNotifier.value)); 524 | if (widget.validateOnChange) { 525 | _formFieldState?.validate(); 526 | } 527 | } 528 | 529 | @override 530 | void initState() { 531 | super.initState(); 532 | 533 | selectedItemNotifier = 534 | widget.controller ?? SingleSelectController(widget.initialItem); 535 | 536 | selectedItemsNotifier = widget.multiSelectController ?? 537 | MultiSelectController(widget.initialItems ?? []); 538 | 539 | selectedItemNotifier.addListener(_selectedItemListener); 540 | 541 | selectedItemsNotifier.addListener(_selectedItemsListener); 542 | } 543 | 544 | @override 545 | void didUpdateWidget(covariant CustomDropdown oldWidget) { 546 | super.didUpdateWidget(oldWidget); 547 | 548 | if (widget.initialItem != oldWidget.initialItem && 549 | selectedItemNotifier.value != widget.initialItem) { 550 | SchedulerBinding.instance.addPostFrameCallback((_) { 551 | selectedItemNotifier.value = widget.initialItem; 552 | }); 553 | } 554 | 555 | if (widget.initialItems != oldWidget.initialItems && 556 | selectedItemsNotifier.value != widget.initialItems) { 557 | SchedulerBinding.instance.addPostFrameCallback((_) { 558 | selectedItemsNotifier.value = widget.initialItems ?? []; 559 | }); 560 | } 561 | 562 | if (widget.controller != oldWidget.controller && 563 | widget.controller != null) { 564 | selectedItemNotifier = widget.controller!; 565 | } 566 | 567 | if (widget.multiSelectController != oldWidget.multiSelectController && 568 | widget.multiSelectController != null) { 569 | selectedItemsNotifier = widget.multiSelectController!; 570 | } 571 | } 572 | 573 | @override 574 | void dispose() { 575 | if (widget.controller == null) { 576 | selectedItemNotifier.dispose(); 577 | } else { 578 | selectedItemNotifier.removeListener(_selectedItemListener); 579 | } 580 | 581 | if (widget.multiSelectController == null) { 582 | selectedItemsNotifier.dispose(); 583 | } else { 584 | selectedItemsNotifier.removeListener(_selectedItemsListener); 585 | } 586 | 587 | super.dispose(); 588 | } 589 | 590 | @override 591 | Widget build(BuildContext context) { 592 | final enabled = widget.enabled; 593 | final decoration = widget.decoration; 594 | final disabledDecoration = widget.disabledDecoration; 595 | final safeHintText = widget.hintText ?? 'Select value'; 596 | 597 | return IgnorePointer( 598 | ignoring: !widget.enabled, 599 | child: FormField<(T?, List)>( 600 | initialValue: (selectedItemNotifier.value, selectedItemsNotifier.value), 601 | validator: (val) { 602 | if (widget._dropdownType == _DropdownType.singleSelect && 603 | widget.validator != null) { 604 | return widget.validator!(val?.$1); 605 | } 606 | if (widget._dropdownType == _DropdownType.multipleSelect && 607 | widget.listValidator != null) { 608 | return widget.listValidator!(val?.$2 ?? []); 609 | } 610 | return null; 611 | }, 612 | builder: (formFieldState) { 613 | _formFieldState = formFieldState; 614 | return InputDecorator( 615 | decoration: InputDecoration( 616 | errorStyle: decoration?.errorStyle ?? _defaultErrorStyle, 617 | errorText: formFieldState.errorText, 618 | border: InputBorder.none, 619 | contentPadding: EdgeInsets.zero, 620 | ), 621 | child: _OverlayBuilder( 622 | overlayPortalController: widget.overlayController, 623 | visibility: widget.visibility, 624 | overlay: (size, hideCallback) { 625 | return _DropdownOverlay( 626 | onItemSelect: (T value) { 627 | switch (widget._dropdownType) { 628 | case _DropdownType.singleSelect: 629 | selectedItemNotifier.value = value; 630 | case _DropdownType.multipleSelect: 631 | final currentVal = selectedItemsNotifier.value.toList(); 632 | if (currentVal.contains(value)) { 633 | currentVal.remove(value); 634 | } else { 635 | currentVal.add(value); 636 | } 637 | selectedItemsNotifier.value = currentVal; 638 | } 639 | }, 640 | noResultFoundText: 641 | widget.noResultFoundText ?? 'No result found.', 642 | noResultFoundBuilder: widget.noResultFoundBuilder, 643 | items: widget.items ?? [], 644 | itemsScrollCtrl: widget.itemsScrollController, 645 | selectedItemNotifier: selectedItemNotifier, 646 | selectedItemsNotifier: selectedItemsNotifier, 647 | size: size, 648 | listItemBuilder: widget.listItemBuilder, 649 | layerLink: layerLink, 650 | hideOverlay: hideCallback, 651 | hintStyle: decoration?.hintStyle, 652 | headerStyle: decoration?.headerStyle, 653 | noResultFoundStyle: decoration?.noResultFoundStyle, 654 | listItemStyle: decoration?.listItemStyle, 655 | headerBuilder: widget.headerBuilder, 656 | headerListBuilder: widget.headerListBuilder, 657 | hintText: safeHintText, 658 | searchHintText: widget.searchHintText ?? 'Search', 659 | hintBuilder: widget.hintBuilder, 660 | decoration: decoration, 661 | overlayHeight: widget.overlayHeight, 662 | excludeSelected: widget.excludeSelected, 663 | canCloseOutsideBounds: widget.canCloseOutsideBounds, 664 | searchType: widget._searchType, 665 | futureRequest: widget.futureRequest, 666 | futureRequestDelay: widget.futureRequestDelay, 667 | hideSelectedFieldWhenOpen: 668 | widget.hideSelectedFieldWhenExpanded, 669 | maxLines: widget.maxlines, 670 | headerPadding: widget.expandedHeaderPadding, 671 | itemsListPadding: widget.itemsListPadding, 672 | listItemPadding: widget.listItemPadding, 673 | searchRequestLoadingIndicator: 674 | widget.searchRequestLoadingIndicator, 675 | dropdownType: widget._dropdownType, 676 | ); 677 | }, 678 | child: (showCallback) { 679 | return CompositedTransformTarget( 680 | link: layerLink, 681 | child: _DropDownField( 682 | onTap: showCallback, 683 | selectedItemNotifier: selectedItemNotifier, 684 | border: formFieldState.hasError 685 | ? (decoration?.closedErrorBorder ?? _defaultErrorBorder) 686 | : enabled 687 | ? decoration?.closedBorder 688 | : disabledDecoration?.border, 689 | borderRadius: formFieldState.hasError 690 | ? decoration?.closedErrorBorderRadius 691 | : enabled 692 | ? decoration?.closedBorderRadius 693 | : disabledDecoration?.borderRadius, 694 | shadow: enabled 695 | ? decoration?.closedShadow 696 | : disabledDecoration?.shadow, 697 | hintStyle: enabled 698 | ? decoration?.hintStyle 699 | : disabledDecoration?.hintStyle, 700 | headerStyle: enabled 701 | ? decoration?.headerStyle 702 | : disabledDecoration?.headerStyle, 703 | hintText: safeHintText, 704 | hintBuilder: widget.hintBuilder, 705 | headerBuilder: widget.headerBuilder, 706 | headerListBuilder: widget.headerListBuilder, 707 | prefixIcon: enabled 708 | ? decoration?.prefixIcon 709 | : disabledDecoration?.prefixIcon, 710 | suffixIcon: enabled 711 | ? decoration?.closedSuffixIcon 712 | : disabledDecoration?.suffixIcon, 713 | fillColor: enabled 714 | ? decoration?.closedFillColor 715 | : disabledDecoration?.fillColor, 716 | maxLines: widget.maxlines, 717 | headerPadding: widget.closedHeaderPadding, 718 | dropdownType: widget._dropdownType, 719 | selectedItemsNotifier: selectedItemsNotifier, 720 | enabled: widget.enabled, 721 | ), 722 | ); 723 | }, 724 | ), 725 | ); 726 | }, 727 | ), 728 | ); 729 | } 730 | } 731 | -------------------------------------------------------------------------------- /lib/models/controllers.dart: -------------------------------------------------------------------------------- 1 | part of '../custom_dropdown.dart'; 2 | 3 | class SingleSelectController extends ValueNotifier { 4 | SingleSelectController(super._value); 5 | 6 | void clear() { 7 | value = null; 8 | } 9 | 10 | bool get hasValue => value != null; 11 | } 12 | 13 | class MultiSelectController extends ValueNotifier> { 14 | MultiSelectController(super.value); 15 | 16 | void add(T valueToAdd) { 17 | value = [...value, valueToAdd]; 18 | } 19 | 20 | void remove(T valueToRemove) { 21 | value = value.where((value) => value != valueToRemove).toList(); 22 | } 23 | 24 | void clear() { 25 | value = []; 26 | } 27 | 28 | bool get hasValues => value.isNotEmpty; 29 | } 30 | -------------------------------------------------------------------------------- /lib/models/custom_dropdown_decoration.dart: -------------------------------------------------------------------------------- 1 | part of '../custom_dropdown.dart'; 2 | 3 | class CustomDropdownDecoration { 4 | /// [CustomDropdown] field color (closed state). 5 | /// 6 | /// Default to [Colors.white]. 7 | final Color? closedFillColor; 8 | 9 | /// [CustomDropdown] overlay color (opened/expanded state). 10 | /// 11 | /// Default to [Colors.white]. 12 | final Color? expandedFillColor; 13 | 14 | /// [CustomDropdown] box shadow (closed state). 15 | final List? closedShadow; 16 | 17 | /// [CustomDropdown] box shadow (opened/expanded state). 18 | final List? expandedShadow; 19 | 20 | /// Suffix icon for closed state of [CustomDropdown]. 21 | final Widget? closedSuffixIcon; 22 | 23 | /// Suffix icon for opened/expanded state of [CustomDropdown]. 24 | final Widget? expandedSuffixIcon; 25 | 26 | /// [CustomDropdown] header prefix icon. 27 | final Widget? prefixIcon; 28 | 29 | /// Border for closed state of [CustomDropdown]. 30 | final BoxBorder? closedBorder; 31 | 32 | /// Border radius for closed state of [CustomDropdown]. 33 | final BorderRadius? closedBorderRadius; 34 | 35 | /// Error border for closed state of [CustomDropdown]. 36 | final BoxBorder? closedErrorBorder; 37 | 38 | /// Error border radius for closed state of [CustomDropdown]. 39 | final BorderRadius? closedErrorBorderRadius; 40 | 41 | /// Border for opened/expanded state of [CustomDropdown]. 42 | final BoxBorder? expandedBorder; 43 | 44 | /// Border radius for opened/expanded state of [CustomDropdown]. 45 | final BorderRadius? expandedBorderRadius; 46 | 47 | /// The style to use for the [CustomDropdown] header hint. 48 | final TextStyle? hintStyle; 49 | 50 | /// The style to use for the [CustomDropdown] header text. 51 | final TextStyle? headerStyle; 52 | 53 | /// The style to use for the [CustomDropdown] no result found area. 54 | final TextStyle? noResultFoundStyle; 55 | 56 | /// The style to use for the string returning from [validator]. 57 | final TextStyle? errorStyle; 58 | 59 | /// The style to use for the [CustomDropdown] list item text. 60 | final TextStyle? listItemStyle; 61 | 62 | /// [CustomDropdown] scrollbar decoration (opened/expanded state). 63 | final ScrollbarThemeData? overlayScrollbarDecoration; 64 | 65 | /// [CustomDropdown] search field decoration. 66 | final SearchFieldDecoration? searchFieldDecoration; 67 | 68 | /// [CustomDropdown] list item decoration. 69 | final ListItemDecoration? listItemDecoration; 70 | 71 | const CustomDropdownDecoration({ 72 | this.closedFillColor, 73 | this.expandedFillColor, 74 | this.closedShadow, 75 | this.expandedShadow, 76 | this.closedSuffixIcon, 77 | this.expandedSuffixIcon, 78 | this.prefixIcon, 79 | this.closedBorder, 80 | this.closedBorderRadius, 81 | this.closedErrorBorder, 82 | this.closedErrorBorderRadius, 83 | this.expandedBorder, 84 | this.expandedBorderRadius, 85 | this.hintStyle, 86 | this.headerStyle, 87 | this.noResultFoundStyle, 88 | this.errorStyle, 89 | this.listItemStyle, 90 | this.overlayScrollbarDecoration, 91 | this.searchFieldDecoration, 92 | this.listItemDecoration, 93 | }); 94 | 95 | static const Color _defaultFillColor = Colors.white; 96 | } 97 | -------------------------------------------------------------------------------- /lib/models/custom_dropdown_list_filter.dart: -------------------------------------------------------------------------------- 1 | part of '../custom_dropdown.dart'; 2 | 3 | mixin CustomDropdownListFilter { 4 | /// Used to filter elements against query on 5 | /// [CustomDropdown.search] or [CustomDropdown.searchRequest] 6 | /// [CustomDropdown.multiSelect] or [CustomDropdown.multiSelectSearchRequest] 7 | bool filter(String query); 8 | } 9 | -------------------------------------------------------------------------------- /lib/models/disabled_decoration.dart: -------------------------------------------------------------------------------- 1 | part of '../custom_dropdown.dart'; 2 | 3 | class CustomDropdownDisabledDecoration { 4 | /// [CustomDropdown] field color (disabled state). 5 | /// 6 | /// Default to Color(0xFFF3F3F3). 7 | final Color? fillColor; 8 | 9 | /// [CustomDropdown] box shadow (disabled state). 10 | final List? shadow; 11 | 12 | /// Suffix icon for disabled state of [CustomDropdown]. 13 | final Widget? suffixIcon; 14 | 15 | /// Prefix icon for disabled state of [CustomDropdown]. 16 | final Widget? prefixIcon; 17 | 18 | /// Border for disabled state of [CustomDropdown]. 19 | final BoxBorder? border; 20 | 21 | /// Border radius for disabled state of [CustomDropdown]. 22 | final BorderRadius? borderRadius; 23 | 24 | /// The style to use for the [CustomDropdown] header hint (disabled state). 25 | final TextStyle? hintStyle; 26 | 27 | /// The style to use for the [CustomDropdown] header text (disabled state). 28 | final TextStyle? headerStyle; 29 | 30 | const CustomDropdownDisabledDecoration({ 31 | this.fillColor, 32 | this.shadow, 33 | this.suffixIcon, 34 | this.prefixIcon, 35 | this.border, 36 | this.borderRadius, 37 | this.headerStyle, 38 | this.hintStyle, 39 | }); 40 | } 41 | -------------------------------------------------------------------------------- /lib/models/list_item_decoration.dart: -------------------------------------------------------------------------------- 1 | part of '../custom_dropdown.dart'; 2 | 3 | class ListItemDecoration { 4 | /// Splash color for [CustomDropdown] list item area. 5 | /// 6 | /// Default to [Colors.transparent]. 7 | final Color? splashColor; 8 | 9 | /// Highlight color for [CustomDropdown] list item area. 10 | /// 11 | /// Default to Color(0xFFEEEEEE). 12 | final Color? highlightColor; 13 | 14 | /// Selected color for [CustomDropdown] list item area. 15 | /// 16 | /// Default to Color(0xFFF5F5F5). 17 | final Color? selectedColor; 18 | 19 | /// Selected icon color for [CustomDropdown] list item area. 20 | /// Useless if [listItemBuilder] provided. 21 | final Color? selectedIconColor; 22 | 23 | /// Selected icon border for [CustomDropdown] list item area. 24 | /// Useless if [listItemBuilder] provided. 25 | final BorderSide? selectedIconBorder; 26 | 27 | /// Selected icon shape for [CustomDropdown] list item area. 28 | /// Useless if [listItemBuilder] provided. 29 | final OutlinedBorder? selectedIconShape; 30 | 31 | const ListItemDecoration({ 32 | this.splashColor, 33 | this.highlightColor, 34 | this.selectedColor, 35 | this.selectedIconColor, 36 | this.selectedIconBorder, 37 | this.selectedIconShape, 38 | }); 39 | 40 | static const _defaultSplashColor = Colors.transparent; 41 | static const _defaultHighlightColor = Color(0xFFEEEEEE); 42 | static const _defaultSelectedColor = Color(0xFFF5F5F5); 43 | } 44 | -------------------------------------------------------------------------------- /lib/models/search_field_decoration.dart: -------------------------------------------------------------------------------- 1 | part of '../custom_dropdown.dart'; 2 | 3 | class SearchFieldDecoration { 4 | /// Fill color for [CustomDropdown] search field. 5 | /// 6 | /// Default to Color(0xFFFAFAFA). 7 | final Color? fillColor; 8 | 9 | /// Layout constraints for [CustomDropdown] search field. 10 | final BoxConstraints? constraints; 11 | 12 | /// Content spacing for [CustomDropdown] search field. 13 | final EdgeInsetsGeometry? contentPadding; 14 | 15 | /// Text Style (text being edited) for [CustomDropdown] search field. 16 | final TextStyle? textStyle; 17 | 18 | /// Hint text style for [CustomDropdown] search field. 19 | final TextStyle? hintStyle; 20 | 21 | /// Icon (before the text area) for [CustomDropdown] search field. 22 | final Widget? prefixIcon; 23 | 24 | /// Icon (after the text area) for [CustomDropdown] search field. 25 | /// "onClear" callback can be used to clear typed text appearing on search field. 26 | final Widget Function(VoidCallback onClear)? suffixIcon; 27 | 28 | /// Border for [CustomDropdown] search field. 29 | final InputBorder? border; 30 | 31 | /// Focused border for [CustomDropdown] search field. 32 | final InputBorder? focusedBorder; 33 | 34 | const SearchFieldDecoration({ 35 | this.fillColor, 36 | this.constraints, 37 | this.contentPadding, 38 | this.textStyle, 39 | this.hintStyle, 40 | this.prefixIcon, 41 | this.suffixIcon, 42 | this.border, 43 | this.focusedBorder, 44 | }); 45 | 46 | static const _defaultFillColor = Color(0xFFFAFAFA); 47 | } 48 | -------------------------------------------------------------------------------- /lib/utils/signatures.dart: -------------------------------------------------------------------------------- 1 | part of '../custom_dropdown.dart'; 2 | 3 | typedef _ListItemBuilder = Widget Function( 4 | BuildContext context, 5 | T item, 6 | bool isSelected, 7 | VoidCallback onItemSelect, 8 | ); 9 | typedef _HeaderBuilder = Widget Function( 10 | BuildContext context, 11 | T selectedItem, 12 | bool enabled, 13 | ); 14 | typedef _HeaderListBuilder = Widget Function( 15 | BuildContext context, 16 | List selectedItems, 17 | bool enabled, 18 | ); 19 | typedef _HintBuilder = Widget Function( 20 | BuildContext context, 21 | String hint, 22 | bool enabled, 23 | ); 24 | typedef _NoResultFoundBuilder = Widget Function( 25 | BuildContext context, 26 | String text, 27 | ); 28 | -------------------------------------------------------------------------------- /lib/widgets/animated_section.dart: -------------------------------------------------------------------------------- 1 | part of '../custom_dropdown.dart'; 2 | 3 | class _AnimatedSection extends StatefulWidget { 4 | final bool expand; 5 | final VoidCallback animationDismissed; 6 | final Widget child; 7 | final double axisAlignment; 8 | 9 | const _AnimatedSection({ 10 | super.key, 11 | this.expand = false, 12 | required this.animationDismissed, 13 | required this.child, 14 | required this.axisAlignment, 15 | }); 16 | 17 | @override 18 | State<_AnimatedSection> createState() => _AnimatedSectionState(); 19 | } 20 | 21 | class _AnimatedSectionState extends State<_AnimatedSection> 22 | with SingleTickerProviderStateMixin { 23 | late AnimationController animController; 24 | late Animation animation; 25 | 26 | @override 27 | void initState() { 28 | super.initState(); 29 | prepareAnimations(); 30 | runExpand(); 31 | } 32 | 33 | void prepareAnimations() { 34 | animController = AnimationController( 35 | vsync: this, 36 | duration: const Duration(milliseconds: 300), 37 | )..addStatusListener((status) { 38 | if (status == AnimationStatus.dismissed) { 39 | widget.animationDismissed(); 40 | } 41 | }); 42 | 43 | animation = CurvedAnimation( 44 | parent: animController, 45 | curve: Curves.linearToEaseOut, 46 | ); 47 | } 48 | 49 | void runExpand() { 50 | if (widget.expand) { 51 | animController.forward(); 52 | } else { 53 | animController.reverse(); 54 | } 55 | } 56 | 57 | @override 58 | void didUpdateWidget(_AnimatedSection oldWidget) { 59 | super.didUpdateWidget(oldWidget); 60 | runExpand(); 61 | } 62 | 63 | @override 64 | void dispose() { 65 | animController.dispose(); 66 | super.dispose(); 67 | } 68 | 69 | @override 70 | Widget build(BuildContext context) { 71 | return FadeTransition( 72 | opacity: animation, 73 | child: SizeTransition( 74 | axisAlignment: widget.axisAlignment, 75 | sizeFactor: animation, 76 | child: widget.child, 77 | ), 78 | ); 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /lib/widgets/dropdown_field.dart: -------------------------------------------------------------------------------- 1 | part of '../custom_dropdown.dart'; 2 | 3 | // overlay icon 4 | const _defaultOverlayIconDown = Icon( 5 | Icons.keyboard_arrow_down_rounded, 6 | size: 20, 7 | ); 8 | 9 | class _DropDownField extends StatefulWidget { 10 | final VoidCallback onTap; 11 | final SingleSelectController selectedItemNotifier; 12 | final String hintText; 13 | final Color? fillColor; 14 | final BoxBorder? border; 15 | final BorderRadius? borderRadius; 16 | final TextStyle? headerStyle, hintStyle; 17 | final Widget? prefixIcon, suffixIcon; 18 | final List? shadow; 19 | final EdgeInsets? headerPadding; 20 | final int maxLines; 21 | final _HeaderBuilder? headerBuilder; 22 | final _HeaderListBuilder? headerListBuilder; 23 | final _HintBuilder? hintBuilder; 24 | final _DropdownType dropdownType; 25 | final bool enabled; 26 | final MultiSelectController selectedItemsNotifier; 27 | 28 | const _DropDownField({ 29 | super.key, 30 | required this.onTap, 31 | required this.selectedItemNotifier, 32 | required this.maxLines, 33 | required this.dropdownType, 34 | required this.selectedItemsNotifier, 35 | this.hintText = 'Select value', 36 | this.fillColor, 37 | this.border, 38 | this.borderRadius, 39 | this.hintStyle, 40 | this.headerStyle, 41 | this.headerBuilder, 42 | this.shadow, 43 | this.headerListBuilder, 44 | this.hintBuilder, 45 | this.prefixIcon, 46 | this.suffixIcon, 47 | this.headerPadding, 48 | this.enabled = true, 49 | }); 50 | 51 | @override 52 | State<_DropDownField> createState() => _DropDownFieldState(); 53 | } 54 | 55 | class _DropDownFieldState extends State<_DropDownField> { 56 | T? selectedItem; 57 | late List selectedItems; 58 | 59 | @override 60 | void initState() { 61 | super.initState(); 62 | selectedItem = widget.selectedItemNotifier.value; 63 | selectedItems = widget.selectedItemsNotifier.value; 64 | } 65 | 66 | Widget hintBuilder(BuildContext context) { 67 | return widget.hintBuilder != null 68 | ? widget.hintBuilder!(context, widget.hintText, widget.enabled) 69 | : defaultHintBuilder(widget.hintText, widget.enabled); 70 | } 71 | 72 | Widget headerBuilder(BuildContext context) { 73 | return widget.headerBuilder != null 74 | ? widget.headerBuilder!(context, selectedItem as T, widget.enabled) 75 | : defaultHeaderBuilder(oneItem: selectedItem); 76 | } 77 | 78 | Widget headerListBuilder(BuildContext context) { 79 | return widget.headerListBuilder != null 80 | ? widget.headerListBuilder!(context, selectedItems, widget.enabled) 81 | : defaultHeaderBuilder(itemList: selectedItems); 82 | } 83 | 84 | Widget defaultHeaderBuilder({T? oneItem, List? itemList}) { 85 | return Text( 86 | itemList != null ? itemList.join(', ') : oneItem.toString(), 87 | maxLines: widget.maxLines, 88 | overflow: TextOverflow.ellipsis, 89 | style: widget.headerStyle ?? 90 | TextStyle( 91 | fontSize: 16, 92 | fontWeight: FontWeight.w500, 93 | color: widget.enabled ? null : Colors.black.withOpacity(.5), 94 | ), 95 | ); 96 | } 97 | 98 | Widget defaultHintBuilder(String hint, bool enabled) { 99 | return Text( 100 | hint, 101 | maxLines: 1, 102 | overflow: TextOverflow.ellipsis, 103 | style: widget.hintStyle ?? 104 | const TextStyle( 105 | fontSize: 16, 106 | color: Color(0xFFA7A7A7), 107 | ), 108 | ); 109 | } 110 | 111 | @override 112 | void didUpdateWidget(covariant _DropDownField oldWidget) { 113 | super.didUpdateWidget(oldWidget); 114 | switch (widget.dropdownType) { 115 | case _DropdownType.singleSelect: 116 | selectedItem = widget.selectedItemNotifier.value; 117 | case _DropdownType.multipleSelect: 118 | selectedItems = widget.selectedItemsNotifier.value; 119 | } 120 | } 121 | 122 | @override 123 | Widget build(BuildContext context) { 124 | return GestureDetector( 125 | onTap: widget.onTap, 126 | child: Container( 127 | padding: widget.headerPadding ?? _defaultHeaderPadding, 128 | decoration: BoxDecoration( 129 | color: widget.fillColor ?? 130 | (widget.enabled 131 | ? CustomDropdownDecoration._defaultFillColor 132 | : CustomDropdownDecoration._defaultFillColor.withOpacity(.5)), 133 | border: widget.border, 134 | borderRadius: widget.borderRadius ?? _defaultBorderRadius, 135 | boxShadow: widget.shadow, 136 | ), 137 | child: Row( 138 | children: [ 139 | if (widget.prefixIcon != null) ...[ 140 | widget.prefixIcon!, 141 | const SizedBox(width: 12), 142 | ], 143 | Expanded( 144 | child: switch (widget.dropdownType) { 145 | _DropdownType.singleSelect => selectedItem != null 146 | ? headerBuilder(context) 147 | : hintBuilder(context), 148 | _DropdownType.multipleSelect => selectedItems.isNotEmpty 149 | ? headerListBuilder(context) 150 | : hintBuilder(context), 151 | }, 152 | ), 153 | const SizedBox(width: 12), 154 | widget.suffixIcon ?? 155 | (widget.enabled 156 | ? _defaultOverlayIconDown 157 | : Icon( 158 | Icons.keyboard_arrow_down_rounded, 159 | color: Colors.black.withOpacity(.5), 160 | size: 20, 161 | )), 162 | ], 163 | ), 164 | ), 165 | ); 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /lib/widgets/dropdown_overlay/dropdown_overlay.dart: -------------------------------------------------------------------------------- 1 | part of '../../custom_dropdown.dart'; 2 | 3 | const _defaultOverlayIconUp = Icon( 4 | Icons.keyboard_arrow_up_rounded, 5 | size: 20, 6 | ); 7 | 8 | const _defaultHeaderPadding = EdgeInsets.all(16.0); 9 | const _overlayOuterPadding = 10 | EdgeInsetsDirectional.only(bottom: 12, start: 12, end: 12); 11 | const _defaultOverlayShadowOffset = Offset(0, 6); 12 | const _defaultListItemPadding = 13 | EdgeInsets.symmetric(vertical: 12, horizontal: 16); 14 | 15 | class _DropdownOverlay extends StatefulWidget { 16 | final List items; 17 | final ScrollController? itemsScrollCtrl; 18 | final SingleSelectController selectedItemNotifier; 19 | final MultiSelectController selectedItemsNotifier; 20 | final Function(T) onItemSelect; 21 | final Size size; 22 | final LayerLink layerLink; 23 | final VoidCallback hideOverlay; 24 | final String hintText, searchHintText, noResultFoundText; 25 | final bool excludeSelected, hideSelectedFieldWhenOpen, canCloseOutsideBounds; 26 | final _SearchType? searchType; 27 | final Future> Function(String)? futureRequest; 28 | final Duration? futureRequestDelay; 29 | final int maxLines; 30 | final double? overlayHeight; 31 | final TextStyle? hintStyle, headerStyle, noResultFoundStyle, listItemStyle; 32 | final EdgeInsets? headerPadding, listItemPadding, itemsListPadding; 33 | final Widget? searchRequestLoadingIndicator; 34 | final _ListItemBuilder? listItemBuilder; 35 | final _HeaderBuilder? headerBuilder; 36 | final _HeaderListBuilder? headerListBuilder; 37 | final _HintBuilder? hintBuilder; 38 | final _NoResultFoundBuilder? noResultFoundBuilder; 39 | final CustomDropdownDecoration? decoration; 40 | final _DropdownType dropdownType; 41 | 42 | const _DropdownOverlay({ 43 | Key? key, 44 | required this.items, 45 | required this.itemsScrollCtrl, 46 | required this.size, 47 | required this.layerLink, 48 | required this.hideOverlay, 49 | required this.hintText, 50 | required this.searchHintText, 51 | required this.selectedItemNotifier, 52 | required this.selectedItemsNotifier, 53 | required this.excludeSelected, 54 | required this.onItemSelect, 55 | required this.noResultFoundText, 56 | required this.canCloseOutsideBounds, 57 | required this.maxLines, 58 | required this.overlayHeight, 59 | required this.dropdownType, 60 | required this.decoration, 61 | required this.hintStyle, 62 | required this.headerStyle, 63 | required this.listItemStyle, 64 | required this.noResultFoundStyle, 65 | required this.hideSelectedFieldWhenOpen, 66 | required this.searchRequestLoadingIndicator, 67 | required this.headerPadding, 68 | required this.itemsListPadding, 69 | required this.listItemPadding, 70 | required this.headerBuilder, 71 | required this.hintBuilder, 72 | required this.searchType, 73 | required this.futureRequest, 74 | required this.futureRequestDelay, 75 | required this.listItemBuilder, 76 | required this.headerListBuilder, 77 | required this.noResultFoundBuilder, 78 | }); 79 | 80 | @override 81 | _DropdownOverlayState createState() => _DropdownOverlayState(); 82 | } 83 | 84 | class _DropdownOverlayState extends State<_DropdownOverlay> { 85 | bool displayOverly = true, displayOverlayBottom = true; 86 | bool isSearchRequestLoading = false; 87 | bool? mayFoundSearchRequestResult; 88 | late List items; 89 | late T? selectedItem; 90 | late List selectedItems; 91 | late ScrollController scrollController; 92 | final key1 = GlobalKey(), key2 = GlobalKey(); 93 | 94 | Widget hintBuilder(BuildContext context) { 95 | return widget.hintBuilder != null 96 | ? widget.hintBuilder!(context, widget.hintText, true) 97 | : defaultHintBuilder(context, widget.hintText); 98 | } 99 | 100 | Widget headerBuilder(BuildContext context) { 101 | return widget.headerBuilder != null 102 | ? widget.headerBuilder!(context, selectedItem as T, true) 103 | : defaultHeaderBuilder(context, item: selectedItem); 104 | } 105 | 106 | Widget headerListBuilder(BuildContext context) { 107 | return widget.headerListBuilder != null 108 | ? widget.headerListBuilder!(context, selectedItems, true) 109 | : defaultHeaderBuilder(context, items: selectedItems); 110 | } 111 | 112 | Widget noResultFoundBuilder(BuildContext context) { 113 | return widget.noResultFoundBuilder != null 114 | ? widget.noResultFoundBuilder!(context, widget.noResultFoundText) 115 | : defaultNoResultFoundBuilder(context, widget.noResultFoundText); 116 | } 117 | 118 | Widget defaultListItemBuilder( 119 | BuildContext context, 120 | T result, 121 | bool isSelected, 122 | VoidCallback onItemSelect, 123 | ) { 124 | return Row( 125 | children: [ 126 | Expanded( 127 | child: Text( 128 | result.toString(), 129 | maxLines: widget.maxLines, 130 | overflow: TextOverflow.ellipsis, 131 | style: widget.listItemStyle ?? const TextStyle(fontSize: 16), 132 | ), 133 | ), 134 | if (widget.dropdownType == _DropdownType.multipleSelect) 135 | Padding( 136 | padding: const EdgeInsetsDirectional.only(start: 12.0), 137 | child: Checkbox( 138 | onChanged: (_) => onItemSelect(), 139 | value: isSelected, 140 | activeColor: 141 | widget.decoration?.listItemDecoration?.selectedIconColor, 142 | side: widget.decoration?.listItemDecoration?.selectedIconBorder, 143 | shape: widget.decoration?.listItemDecoration?.selectedIconShape, 144 | materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, 145 | visualDensity: const VisualDensity( 146 | horizontal: VisualDensity.minimumDensity, 147 | vertical: VisualDensity.minimumDensity, 148 | ), 149 | ), 150 | ), 151 | ], 152 | ); 153 | } 154 | 155 | Widget defaultHeaderBuilder(BuildContext context, {T? item, List? items}) { 156 | return Text( 157 | items != null ? items.join(', ') : item.toString(), 158 | maxLines: widget.maxLines, 159 | overflow: TextOverflow.ellipsis, 160 | style: widget.headerStyle ?? 161 | const TextStyle( 162 | fontSize: 16, 163 | fontWeight: FontWeight.w500, 164 | ), 165 | ); 166 | } 167 | 168 | Widget defaultHintBuilder(BuildContext context, String hint) { 169 | return Text( 170 | hint, 171 | maxLines: 1, 172 | overflow: TextOverflow.ellipsis, 173 | style: widget.hintStyle ?? 174 | const TextStyle( 175 | fontSize: 16, 176 | color: Color(0xFFA7A7A7), 177 | ), 178 | ); 179 | } 180 | 181 | Widget defaultNoResultFoundBuilder(BuildContext context, String text) { 182 | return Center( 183 | child: Padding( 184 | padding: const EdgeInsets.symmetric(vertical: 12.0), 185 | child: Text( 186 | text, 187 | style: widget.noResultFoundStyle ?? const TextStyle(fontSize: 16), 188 | ), 189 | ), 190 | ); 191 | } 192 | 193 | @override 194 | void initState() { 195 | super.initState(); 196 | scrollController = widget.itemsScrollCtrl ?? ScrollController(); 197 | WidgetsBinding.instance.addPostFrameCallback((_) { 198 | final render1 = key1.currentContext?.findRenderObject() as RenderBox; 199 | final render2 = key2.currentContext?.findRenderObject() as RenderBox; 200 | final screenHeight = MediaQuery.of(context).size.height; 201 | double y = render1.localToGlobal(Offset.zero).dy; 202 | if (screenHeight - y < render2.size.height) { 203 | displayOverlayBottom = false; 204 | setState(() {}); 205 | } 206 | }); 207 | 208 | selectedItem = widget.selectedItemNotifier.value; 209 | selectedItems = widget.selectedItemsNotifier.value; 210 | 211 | widget.selectedItemNotifier.addListener(singleSelectListener); 212 | widget.selectedItemsNotifier.addListener(multiSelectListener); 213 | 214 | if (widget.excludeSelected && 215 | widget.items.length > 1 && 216 | selectedItem != null) { 217 | T value = selectedItem as T; 218 | items = widget.items.where((item) => item != value).toList(); 219 | } else { 220 | items = widget.items; 221 | } 222 | } 223 | 224 | @override 225 | void dispose() { 226 | widget.selectedItemNotifier.removeListener(singleSelectListener); 227 | widget.selectedItemsNotifier.removeListener(multiSelectListener); 228 | 229 | if (widget.itemsScrollCtrl == null) { 230 | scrollController.dispose(); 231 | } 232 | super.dispose(); 233 | } 234 | 235 | void singleSelectListener() { 236 | if (mounted) { 237 | selectedItem = widget.selectedItemNotifier.value; 238 | } 239 | } 240 | 241 | void multiSelectListener() { 242 | if (mounted) { 243 | selectedItems = widget.selectedItemsNotifier.value; 244 | } 245 | } 246 | 247 | void onItemSelect(T value) { 248 | widget.onItemSelect(value); 249 | if (widget.dropdownType == _DropdownType.singleSelect) { 250 | setState(() => displayOverly = false); 251 | } 252 | } 253 | 254 | @override 255 | Widget build(BuildContext context) { 256 | // decoration 257 | final decoration = widget.decoration; 258 | 259 | // search availability check 260 | final onSearch = widget.searchType != null; 261 | 262 | // overlay offset 263 | final overlayOffset = Offset(-12, displayOverlayBottom ? 0 : 64); 264 | 265 | // list padding 266 | final listPadding = 267 | onSearch ? const EdgeInsets.only(top: 8) : EdgeInsets.zero; 268 | 269 | // items list 270 | final list = items.isNotEmpty 271 | ? _ItemsList( 272 | scrollController: scrollController, 273 | listItemBuilder: widget.listItemBuilder ?? defaultListItemBuilder, 274 | excludeSelected: items.length > 1 ? widget.excludeSelected : false, 275 | selectedItem: selectedItem, 276 | selectedItems: selectedItems, 277 | items: items, 278 | itemsListPadding: widget.itemsListPadding ?? listPadding, 279 | listItemPadding: widget.listItemPadding ?? _defaultListItemPadding, 280 | onItemSelect: onItemSelect, 281 | decoration: decoration?.listItemDecoration, 282 | dropdownType: widget.dropdownType, 283 | ) 284 | : (mayFoundSearchRequestResult != null && 285 | !mayFoundSearchRequestResult!) || 286 | widget.searchType == _SearchType.onListData 287 | ? noResultFoundBuilder(context) 288 | : const SizedBox(height: 12); 289 | 290 | final child = Stack( 291 | children: [ 292 | Positioned( 293 | width: widget.size.width + 24, 294 | child: CompositedTransformFollower( 295 | link: widget.layerLink, 296 | followerAnchor: 297 | displayOverlayBottom ? Alignment.topLeft : Alignment.bottomLeft, 298 | showWhenUnlinked: false, 299 | offset: overlayOffset, 300 | child: Container( 301 | key: key1, 302 | margin: _overlayOuterPadding, 303 | decoration: BoxDecoration( 304 | color: decoration?.expandedFillColor ?? 305 | CustomDropdownDecoration._defaultFillColor, 306 | border: decoration?.expandedBorder, 307 | borderRadius: 308 | decoration?.expandedBorderRadius ?? _defaultBorderRadius, 309 | boxShadow: decoration?.expandedShadow ?? 310 | [ 311 | BoxShadow( 312 | blurRadius: 24.0, 313 | color: Colors.black.withOpacity(.08), 314 | offset: _defaultOverlayShadowOffset, 315 | ), 316 | ], 317 | ), 318 | child: Material( 319 | color: Colors.transparent, 320 | child: _AnimatedSection( 321 | animationDismissed: widget.hideOverlay, 322 | expand: displayOverly, 323 | axisAlignment: displayOverlayBottom ? 1.0 : -1.0, 324 | child: SizedBox( 325 | key: key2, 326 | height: items.length > 4 327 | ? widget.overlayHeight ?? (onSearch ? 270 : 225) 328 | : null, 329 | child: ClipRRect( 330 | borderRadius: decoration?.expandedBorderRadius ?? 331 | _defaultBorderRadius, 332 | child: 333 | NotificationListener( 334 | onNotification: (notification) { 335 | notification.disallowIndicator(); 336 | return true; 337 | }, 338 | child: Theme( 339 | data: Theme.of(context).copyWith( 340 | scrollbarTheme: decoration 341 | ?.overlayScrollbarDecoration ?? 342 | ScrollbarThemeData( 343 | thumbVisibility: MaterialStateProperty.all( 344 | true, 345 | ), 346 | thickness: MaterialStateProperty.all(5), 347 | radius: const Radius.circular(4), 348 | thumbColor: MaterialStateProperty.all( 349 | Colors.grey[300], 350 | ), 351 | ), 352 | ), 353 | child: Column( 354 | crossAxisAlignment: CrossAxisAlignment.start, 355 | mainAxisSize: MainAxisSize.min, 356 | children: [ 357 | if (!widget.hideSelectedFieldWhenOpen) 358 | GestureDetector( 359 | behavior: HitTestBehavior.opaque, 360 | onTap: () { 361 | setState(() => displayOverly = false); 362 | }, 363 | child: Padding( 364 | padding: widget.headerPadding ?? 365 | _defaultHeaderPadding, 366 | child: Row( 367 | children: [ 368 | if (widget.decoration?.prefixIcon != 369 | null) ...[ 370 | widget.decoration!.prefixIcon!, 371 | const SizedBox(width: 12), 372 | ], 373 | Expanded( 374 | child: switch (widget.dropdownType) { 375 | _DropdownType.singleSelect => 376 | selectedItem != null 377 | ? headerBuilder(context) 378 | : hintBuilder(context), 379 | _DropdownType.multipleSelect => 380 | selectedItems.isNotEmpty 381 | ? headerListBuilder(context) 382 | : hintBuilder(context), 383 | }, 384 | ), 385 | const SizedBox(width: 12), 386 | decoration?.expandedSuffixIcon ?? 387 | _defaultOverlayIconUp, 388 | ], 389 | ), 390 | ), 391 | ), 392 | if (onSearch && 393 | widget.searchType == _SearchType.onListData) 394 | if (!widget.hideSelectedFieldWhenOpen) 395 | _SearchField.forListData( 396 | items: widget.items, 397 | searchHintText: widget.searchHintText, 398 | onSearchedItems: (val) { 399 | setState(() => items = val); 400 | }, 401 | decoration: 402 | decoration?.searchFieldDecoration, 403 | ) 404 | else 405 | GestureDetector( 406 | behavior: HitTestBehavior.opaque, 407 | onTap: () { 408 | setState(() => displayOverly = false); 409 | }, 410 | child: Padding( 411 | padding: const EdgeInsetsDirectional.only( 412 | top: 12.0, 413 | start: 8.0, 414 | ), 415 | child: Row( 416 | children: [ 417 | if (widget.decoration?.prefixIcon != 418 | null) ...[ 419 | widget.decoration!.prefixIcon!, 420 | const SizedBox(width: 12), 421 | ], 422 | Expanded( 423 | child: _SearchField.forListData( 424 | items: widget.items, 425 | searchHintText: 426 | widget.searchHintText, 427 | onSearchedItems: (val) { 428 | setState(() => items = val); 429 | }, 430 | decoration: decoration 431 | ?.searchFieldDecoration, 432 | ), 433 | ), 434 | decoration?.expandedSuffixIcon ?? 435 | _defaultOverlayIconUp, 436 | const SizedBox(width: 14), 437 | ], 438 | ), 439 | ), 440 | ) 441 | else if (onSearch && 442 | widget.searchType == 443 | _SearchType.onRequestData) 444 | if (!widget.hideSelectedFieldWhenOpen) 445 | _SearchField.forRequestData( 446 | items: widget.items, 447 | searchHintText: widget.searchHintText, 448 | onFutureRequestLoading: (val) { 449 | setState(() { 450 | isSearchRequestLoading = val; 451 | }); 452 | }, 453 | futureRequest: widget.futureRequest, 454 | futureRequestDelay: 455 | widget.futureRequestDelay, 456 | onSearchedItems: (val) { 457 | setState(() => items = val); 458 | }, 459 | mayFoundResult: (val) => 460 | mayFoundSearchRequestResult = val, 461 | decoration: 462 | decoration?.searchFieldDecoration, 463 | ) 464 | else 465 | GestureDetector( 466 | behavior: HitTestBehavior.opaque, 467 | onTap: () { 468 | setState(() => displayOverly = false); 469 | }, 470 | child: Padding( 471 | padding: const EdgeInsetsDirectional.only( 472 | top: 12.0, 473 | start: 8.0, 474 | ), 475 | child: Row( 476 | children: [ 477 | if (widget.decoration?.prefixIcon != 478 | null) ...[ 479 | widget.decoration!.prefixIcon!, 480 | const SizedBox(width: 12), 481 | ], 482 | Expanded( 483 | child: 484 | _SearchField.forRequestData( 485 | items: widget.items, 486 | searchHintText: 487 | widget.searchHintText, 488 | onFutureRequestLoading: (val) { 489 | setState(() { 490 | isSearchRequestLoading = val; 491 | }); 492 | }, 493 | futureRequest: 494 | widget.futureRequest, 495 | futureRequestDelay: 496 | widget.futureRequestDelay, 497 | onSearchedItems: (val) { 498 | setState(() => items = val); 499 | }, 500 | mayFoundResult: (val) => 501 | mayFoundSearchRequestResult = 502 | val, 503 | decoration: decoration 504 | ?.searchFieldDecoration, 505 | ), 506 | ), 507 | decoration?.expandedSuffixIcon ?? 508 | _defaultOverlayIconUp, 509 | const SizedBox(width: 14), 510 | ], 511 | ), 512 | ), 513 | ), 514 | if (isSearchRequestLoading) 515 | widget.searchRequestLoadingIndicator ?? 516 | const Padding( 517 | padding: EdgeInsets.symmetric( 518 | vertical: 20.0, 519 | ), 520 | child: Center( 521 | child: SizedBox( 522 | width: 25, 523 | height: 25, 524 | child: CircularProgressIndicator( 525 | strokeWidth: 3, 526 | ), 527 | ), 528 | ), 529 | ) 530 | else 531 | items.length > 4 ? Expanded(child: list) : list 532 | ], 533 | ), 534 | ), 535 | ), 536 | ), 537 | ), 538 | ), 539 | ), 540 | ), 541 | ), 542 | ), 543 | ], 544 | ); 545 | 546 | if (widget.canCloseOutsideBounds) { 547 | return Stack( 548 | children: [ 549 | GestureDetector( 550 | onTap: () => setState(() => displayOverly = false), 551 | child: Container( 552 | width: MediaQuery.of(context).size.width, 553 | height: MediaQuery.of(context).size.height, 554 | color: Colors.transparent, 555 | ), 556 | ), 557 | child, 558 | ], 559 | ); 560 | } 561 | 562 | return child; 563 | } 564 | } 565 | -------------------------------------------------------------------------------- /lib/widgets/dropdown_overlay/widgets/items_list.dart: -------------------------------------------------------------------------------- 1 | part of '../../../custom_dropdown.dart'; 2 | 3 | class _ItemsList extends StatelessWidget { 4 | final ScrollController scrollController; 5 | final T? selectedItem; 6 | final List items, selectedItems; 7 | final Function(T) onItemSelect; 8 | final bool excludeSelected; 9 | final EdgeInsets itemsListPadding, listItemPadding; 10 | final _ListItemBuilder listItemBuilder; 11 | final ListItemDecoration? decoration; 12 | final _DropdownType dropdownType; 13 | 14 | const _ItemsList({ 15 | super.key, 16 | required this.scrollController, 17 | required this.selectedItem, 18 | required this.items, 19 | required this.onItemSelect, 20 | required this.excludeSelected, 21 | required this.itemsListPadding, 22 | required this.listItemPadding, 23 | required this.listItemBuilder, 24 | required this.selectedItems, 25 | required this.decoration, 26 | required this.dropdownType, 27 | }); 28 | 29 | @override 30 | Widget build(BuildContext context) { 31 | return Scrollbar( 32 | controller: scrollController, 33 | child: ListView.builder( 34 | controller: scrollController, 35 | shrinkWrap: true, 36 | padding: itemsListPadding, 37 | itemCount: items.length, 38 | itemBuilder: (_, index) { 39 | final selected = switch (dropdownType) { 40 | _DropdownType.singleSelect => 41 | !excludeSelected && selectedItem == items[index], 42 | _DropdownType.multipleSelect => selectedItems.contains(items[index]) 43 | }; 44 | return Material( 45 | color: Colors.transparent, 46 | child: InkWell( 47 | splashColor: decoration?.splashColor ?? 48 | ListItemDecoration._defaultSplashColor, 49 | highlightColor: decoration?.highlightColor ?? 50 | ListItemDecoration._defaultHighlightColor, 51 | onTap: () => onItemSelect(items[index]), 52 | child: Ink( 53 | color: selected 54 | ? (decoration?.selectedColor ?? 55 | ListItemDecoration._defaultSelectedColor) 56 | : Colors.transparent, 57 | padding: listItemPadding, 58 | child: listItemBuilder( 59 | context, 60 | items[index], 61 | selected, 62 | () => onItemSelect(items[index]), 63 | ), 64 | ), 65 | ), 66 | ); 67 | }, 68 | ), 69 | ); 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /lib/widgets/dropdown_overlay/widgets/search_field.dart: -------------------------------------------------------------------------------- 1 | part of '../../../custom_dropdown.dart'; 2 | 3 | class _SearchField extends StatefulWidget { 4 | final List items; 5 | final ValueChanged> onSearchedItems; 6 | final String searchHintText; 7 | final _SearchType? searchType; 8 | final Future> Function(String)? futureRequest; 9 | final Duration? futureRequestDelay; 10 | final ValueChanged? onFutureRequestLoading, mayFoundResult; 11 | final SearchFieldDecoration? decoration; 12 | 13 | const _SearchField.forListData({ 14 | super.key, 15 | required this.items, 16 | required this.onSearchedItems, 17 | required this.searchHintText, 18 | required this.decoration, 19 | }) : searchType = _SearchType.onListData, 20 | futureRequest = null, 21 | futureRequestDelay = null, 22 | onFutureRequestLoading = null, 23 | mayFoundResult = null; 24 | 25 | const _SearchField.forRequestData({ 26 | super.key, 27 | required this.items, 28 | required this.onSearchedItems, 29 | required this.searchHintText, 30 | required this.futureRequest, 31 | required this.futureRequestDelay, 32 | required this.onFutureRequestLoading, 33 | required this.mayFoundResult, 34 | required this.decoration, 35 | }) : searchType = _SearchType.onRequestData; 36 | 37 | @override 38 | State<_SearchField> createState() => _SearchFieldState(); 39 | } 40 | 41 | class _SearchFieldState extends State<_SearchField> { 42 | final searchCtrl = TextEditingController(); 43 | bool isFieldEmpty = false; 44 | FocusNode focusNode = FocusNode(); 45 | Timer? _delayTimer; 46 | 47 | @override 48 | void initState() { 49 | super.initState(); 50 | if (widget.searchType == _SearchType.onRequestData && 51 | widget.items.isEmpty) { 52 | focusNode.requestFocus(); 53 | } 54 | } 55 | 56 | @override 57 | void dispose() { 58 | searchCtrl.dispose(); 59 | _delayTimer?.cancel(); 60 | super.dispose(); 61 | } 62 | 63 | void onSearch(String query) { 64 | final result = widget.items.where( 65 | (item) { 66 | if (item is CustomDropdownListFilter) { 67 | return item.filter(query); 68 | } else { 69 | return item.toString().toLowerCase().contains(query.toLowerCase()); 70 | } 71 | }, 72 | ).toList(); 73 | widget.onSearchedItems(result); 74 | } 75 | 76 | void onClear() { 77 | if (searchCtrl.text.isNotEmpty) { 78 | searchCtrl.clear(); 79 | widget.onSearchedItems(widget.items); 80 | } 81 | } 82 | 83 | void searchRequest(String val) async { 84 | List result = []; 85 | try { 86 | result = await widget.futureRequest!(val); 87 | widget.onFutureRequestLoading!(false); 88 | } catch (_) { 89 | widget.onFutureRequestLoading!(false); 90 | } 91 | widget.onSearchedItems(isFieldEmpty ? widget.items : result); 92 | widget.mayFoundResult!(result.isNotEmpty); 93 | 94 | if (isFieldEmpty) { 95 | isFieldEmpty = false; 96 | } 97 | } 98 | 99 | @override 100 | Widget build(BuildContext context) { 101 | return Padding( 102 | padding: const EdgeInsets.symmetric(horizontal: 8), 103 | child: TextField( 104 | focusNode: focusNode, 105 | style: widget.decoration?.textStyle, 106 | onChanged: (val) async { 107 | if (val.isEmpty) { 108 | isFieldEmpty = true; 109 | } else if (isFieldEmpty) { 110 | isFieldEmpty = false; 111 | } 112 | 113 | if (widget.searchType != null && 114 | widget.searchType == _SearchType.onRequestData && 115 | val.isNotEmpty) { 116 | widget.onFutureRequestLoading!(true); 117 | 118 | if (widget.futureRequestDelay != null) { 119 | _delayTimer?.cancel(); 120 | _delayTimer = 121 | Timer(widget.futureRequestDelay ?? Duration.zero, () { 122 | searchRequest(val); 123 | }); 124 | } else { 125 | searchRequest(val); 126 | } 127 | } else if (widget.searchType == _SearchType.onListData) { 128 | onSearch(val); 129 | } else { 130 | widget.onSearchedItems(widget.items); 131 | } 132 | }, 133 | controller: searchCtrl, 134 | decoration: InputDecoration( 135 | filled: true, 136 | fillColor: widget.decoration?.fillColor ?? 137 | SearchFieldDecoration._defaultFillColor, 138 | constraints: widget.decoration?.constraints ?? 139 | const BoxConstraints.tightFor(height: 40), 140 | contentPadding: 141 | widget.decoration?.contentPadding ?? const EdgeInsets.all(8), 142 | hintText: widget.searchHintText, 143 | hintStyle: widget.decoration?.hintStyle, 144 | prefixIcon: widget.decoration?.prefixIcon ?? 145 | const Icon(Icons.search, size: 22), 146 | suffixIcon: widget.decoration?.suffixIcon?.call(onClear) ?? 147 | GestureDetector( 148 | onTap: onClear, 149 | child: const Icon(Icons.close, size: 20), 150 | ), 151 | border: widget.decoration?.border ?? 152 | OutlineInputBorder( 153 | borderRadius: BorderRadius.circular(8), 154 | borderSide: BorderSide( 155 | color: Colors.grey.withOpacity(.25), 156 | width: 1, 157 | ), 158 | ), 159 | enabledBorder: widget.decoration?.border ?? 160 | OutlineInputBorder( 161 | borderRadius: BorderRadius.circular(8), 162 | borderSide: BorderSide( 163 | color: Colors.grey.withOpacity(.25), 164 | width: 1, 165 | ), 166 | ), 167 | focusedBorder: widget.decoration?.focusedBorder ?? 168 | OutlineInputBorder( 169 | borderRadius: BorderRadius.circular(8), 170 | borderSide: BorderSide( 171 | color: Colors.grey.withOpacity(.25), 172 | width: 1, 173 | ), 174 | ), 175 | ), 176 | ), 177 | ); 178 | } 179 | } 180 | -------------------------------------------------------------------------------- /lib/widgets/overlay_builder.dart: -------------------------------------------------------------------------------- 1 | part of '../custom_dropdown.dart'; 2 | 3 | class _OverlayBuilder extends StatefulWidget { 4 | final Widget Function(Size, VoidCallback hide) overlay; 5 | final Widget Function(VoidCallback show) child; 6 | final OverlayPortalController? overlayPortalController; 7 | final Function(bool)? visibility; 8 | 9 | const _OverlayBuilder({ 10 | super.key, 11 | required this.overlay, 12 | required this.child, 13 | this.overlayPortalController, 14 | this.visibility, 15 | }); 16 | 17 | @override 18 | _OverlayBuilderState createState() => _OverlayBuilderState(); 19 | } 20 | 21 | class _OverlayBuilderState extends State<_OverlayBuilder> { 22 | late OverlayPortalController overlayController; 23 | 24 | @override 25 | void initState() { 26 | super.initState(); 27 | overlayController = 28 | widget.overlayPortalController ?? OverlayPortalController(); 29 | } 30 | 31 | void showOverlay() { 32 | overlayController.show(); 33 | 34 | if (widget.visibility != null) { 35 | widget.visibility!(true); 36 | } 37 | } 38 | 39 | void hideOverlay() { 40 | overlayController.hide(); 41 | 42 | if (widget.visibility != null) { 43 | widget.visibility!(false); 44 | } 45 | } 46 | 47 | @override 48 | Widget build(BuildContext context) { 49 | return OverlayPortal( 50 | controller: overlayController, 51 | overlayChildBuilder: (_) { 52 | final renderBox = context.findRenderObject() as RenderBox; 53 | final size = renderBox.size; 54 | return widget.overlay(size, hideOverlay); 55 | }, 56 | child: widget.child(showOverlay), 57 | ); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /pubspec.lock: -------------------------------------------------------------------------------- 1 | # Generated by pub 2 | # See https://dart.dev/tools/pub/glossary#lockfile 3 | packages: 4 | async: 5 | dependency: transitive 6 | description: 7 | name: async 8 | sha256: "947bfcf187f74dbc5e146c9eb9c0f10c9f8b30743e341481c1e2ed3ecc18c20c" 9 | url: "https://pub.dev" 10 | source: hosted 11 | version: "2.11.0" 12 | boolean_selector: 13 | dependency: transitive 14 | description: 15 | name: boolean_selector 16 | sha256: "6cfb5af12253eaf2b368f07bacc5a80d1301a071c73360d746b7f2e32d762c66" 17 | url: "https://pub.dev" 18 | source: hosted 19 | version: "2.1.1" 20 | characters: 21 | dependency: transitive 22 | description: 23 | name: characters 24 | sha256: "04a925763edad70e8443c99234dc3328f442e811f1d8fd1a72f1c8ad0f69a605" 25 | url: "https://pub.dev" 26 | source: hosted 27 | version: "1.3.0" 28 | clock: 29 | dependency: transitive 30 | description: 31 | name: clock 32 | sha256: cb6d7f03e1de671e34607e909a7213e31d7752be4fb66a86d29fe1eb14bfb5cf 33 | url: "https://pub.dev" 34 | source: hosted 35 | version: "1.1.1" 36 | collection: 37 | dependency: transitive 38 | description: 39 | name: collection 40 | sha256: ee67cb0715911d28db6bf4af1026078bd6f0128b07a5f66fb2ed94ec6783c09a 41 | url: "https://pub.dev" 42 | source: hosted 43 | version: "1.18.0" 44 | fake_async: 45 | dependency: transitive 46 | description: 47 | name: fake_async 48 | sha256: "511392330127add0b769b75a987850d136345d9227c6b94c96a04cf4a391bf78" 49 | url: "https://pub.dev" 50 | source: hosted 51 | version: "1.3.1" 52 | flutter: 53 | dependency: "direct main" 54 | description: flutter 55 | source: sdk 56 | version: "0.0.0" 57 | flutter_lints: 58 | dependency: "direct dev" 59 | description: 60 | name: flutter_lints 61 | sha256: e2a421b7e59244faef694ba7b30562e489c2b489866e505074eb005cd7060db7 62 | url: "https://pub.dev" 63 | source: hosted 64 | version: "3.0.1" 65 | flutter_test: 66 | dependency: "direct dev" 67 | description: flutter 68 | source: sdk 69 | version: "0.0.0" 70 | leak_tracker: 71 | dependency: transitive 72 | description: 73 | name: leak_tracker 74 | sha256: "7f0df31977cb2c0b88585095d168e689669a2cc9b97c309665e3386f3e9d341a" 75 | url: "https://pub.dev" 76 | source: hosted 77 | version: "10.0.4" 78 | leak_tracker_flutter_testing: 79 | dependency: transitive 80 | description: 81 | name: leak_tracker_flutter_testing 82 | sha256: "06e98f569d004c1315b991ded39924b21af84cf14cc94791b8aea337d25b57f8" 83 | url: "https://pub.dev" 84 | source: hosted 85 | version: "3.0.3" 86 | leak_tracker_testing: 87 | dependency: transitive 88 | description: 89 | name: leak_tracker_testing 90 | sha256: "6ba465d5d76e67ddf503e1161d1f4a6bc42306f9d66ca1e8f079a47290fb06d3" 91 | url: "https://pub.dev" 92 | source: hosted 93 | version: "3.0.1" 94 | lints: 95 | dependency: transitive 96 | description: 97 | name: lints 98 | sha256: cbf8d4b858bb0134ef3ef87841abdf8d63bfc255c266b7bf6b39daa1085c4290 99 | url: "https://pub.dev" 100 | source: hosted 101 | version: "3.0.0" 102 | matcher: 103 | dependency: transitive 104 | description: 105 | name: matcher 106 | sha256: d2323aa2060500f906aa31a895b4030b6da3ebdcc5619d14ce1aada65cd161cb 107 | url: "https://pub.dev" 108 | source: hosted 109 | version: "0.12.16+1" 110 | material_color_utilities: 111 | dependency: transitive 112 | description: 113 | name: material_color_utilities 114 | sha256: "0e0a020085b65b6083975e499759762399b4475f766c21668c4ecca34ea74e5a" 115 | url: "https://pub.dev" 116 | source: hosted 117 | version: "0.8.0" 118 | meta: 119 | dependency: transitive 120 | description: 121 | name: meta 122 | sha256: "7687075e408b093f36e6bbf6c91878cc0d4cd10f409506f7bc996f68220b9136" 123 | url: "https://pub.dev" 124 | source: hosted 125 | version: "1.12.0" 126 | path: 127 | dependency: transitive 128 | description: 129 | name: path 130 | sha256: "087ce49c3f0dc39180befefc60fdb4acd8f8620e5682fe2476afd0b3688bb4af" 131 | url: "https://pub.dev" 132 | source: hosted 133 | version: "1.9.0" 134 | sky_engine: 135 | dependency: transitive 136 | description: flutter 137 | source: sdk 138 | version: "0.0.99" 139 | source_span: 140 | dependency: transitive 141 | description: 142 | name: source_span 143 | sha256: "53e943d4206a5e30df338fd4c6e7a077e02254531b138a15aec3bd143c1a8b3c" 144 | url: "https://pub.dev" 145 | source: hosted 146 | version: "1.10.0" 147 | stack_trace: 148 | dependency: transitive 149 | description: 150 | name: stack_trace 151 | sha256: "73713990125a6d93122541237550ee3352a2d84baad52d375a4cad2eb9b7ce0b" 152 | url: "https://pub.dev" 153 | source: hosted 154 | version: "1.11.1" 155 | stream_channel: 156 | dependency: transitive 157 | description: 158 | name: stream_channel 159 | sha256: ba2aa5d8cc609d96bbb2899c28934f9e1af5cddbd60a827822ea467161eb54e7 160 | url: "https://pub.dev" 161 | source: hosted 162 | version: "2.1.2" 163 | string_scanner: 164 | dependency: transitive 165 | description: 166 | name: string_scanner 167 | sha256: "556692adab6cfa87322a115640c11f13cb77b3f076ddcc5d6ae3c20242bedcde" 168 | url: "https://pub.dev" 169 | source: hosted 170 | version: "1.2.0" 171 | term_glyph: 172 | dependency: transitive 173 | description: 174 | name: term_glyph 175 | sha256: a29248a84fbb7c79282b40b8c72a1209db169a2e0542bce341da992fe1bc7e84 176 | url: "https://pub.dev" 177 | source: hosted 178 | version: "1.2.1" 179 | test_api: 180 | dependency: transitive 181 | description: 182 | name: test_api 183 | sha256: "9955ae474176f7ac8ee4e989dadfb411a58c30415bcfb648fa04b2b8a03afa7f" 184 | url: "https://pub.dev" 185 | source: hosted 186 | version: "0.7.0" 187 | vector_math: 188 | dependency: transitive 189 | description: 190 | name: vector_math 191 | sha256: "80b3257d1492ce4d091729e3a67a60407d227c27241d6927be0130c98e741803" 192 | url: "https://pub.dev" 193 | source: hosted 194 | version: "2.1.4" 195 | vm_service: 196 | dependency: transitive 197 | description: 198 | name: vm_service 199 | sha256: "3923c89304b715fb1eb6423f017651664a03bf5f4b29983627c4da791f74a4ec" 200 | url: "https://pub.dev" 201 | source: hosted 202 | version: "14.2.1" 203 | sdks: 204 | dart: ">=3.3.0 <4.0.0" 205 | flutter: ">=3.18.0-18.0.pre.54" 206 | -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: animated_custom_dropdown 2 | description: 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. 3 | version: 3.1.1 4 | homepage: https://github.com/AbdullahChauhan/custom-dropdown 5 | 6 | environment: 7 | sdk: ">=3.0.0 <4.0.0" 8 | flutter: ">=3.0.0" 9 | 10 | dependencies: 11 | flutter: 12 | sdk: flutter 13 | 14 | dev_dependencies: 15 | flutter_test: 16 | sdk: flutter 17 | flutter_lints: ^3.0.1 18 | 19 | flutter: 20 | 21 | funding: 22 | - https://buymeacoffee.com/abdullahchauhan 23 | 24 | screenshots: 25 | - description: "Custom dropdown Preview" 26 | path: screenshots/preview.png 27 | - description: "Dropdown example" 28 | path: screenshots/example_1.jpg 29 | - description: "Search dropdown example" 30 | path: screenshots/example_2.jpg 31 | - description: "Multi select dropdown example" 32 | path: screenshots/example_3.jpg 33 | 34 | topics: 35 | - ui 36 | - dropdown 37 | - spinner 38 | - widget 39 | - widgets 40 | -------------------------------------------------------------------------------- /readme_assets/preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/readme_assets/preview.gif -------------------------------------------------------------------------------- /screenshots/example_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/screenshots/example_1.jpg -------------------------------------------------------------------------------- /screenshots/example_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/screenshots/example_2.jpg -------------------------------------------------------------------------------- /screenshots/example_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/screenshots/example_3.jpg -------------------------------------------------------------------------------- /screenshots/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahChauhan/custom-dropdown/afb58584ab00b7796ce7d20fdfcbe62ab7e4b8e6/screenshots/preview.png --------------------------------------------------------------------------------