A Flutter dropdown widget.

Overview

Flutter Dropdown_Below

A Flutter Dropdown library which is customize flutter dropdownbutton widget.

license license license

Options

options description type required
itemWidth dropdown item's box width double X
itemTextstyle dropdown item's text style double X
boxTextstyle seletced box text style TextStyle X
boxPadding seletced box inner padding EdgeInsetsGeometry X
boxHeight seletced box height double X
boxWidth seletced box width double X
hint text before you choose item Widget X
value selected item T X
boxDecoration box's border, borderRadius, color BoxDecoration X
icon widget which is right beside Widget X
items itemsList List<DropdownMenuItem> O
onChange change item function ValueChanged O

How to make it Work?

Description for example.

1. datas

_testList's type is always be a list.

If you want to use map or other type, you can customize this package.

  List _testList = [{'no': 1, 'keyword': 'blue'},{'no': 2, 'keyword': 'black'},{'no': 3, 'keyword': 'red'}];
  List<DropdownMenuItem> _dropdownTestItems;
  var _selectedTest;

2. initState & build items to correct type

If you want to customize item's child widget ex) Text -> Container, You can change any widget you want.

  @override
  void initState() {
    _dropdownTestItems = buildDropdownTestItems(_testList);
    super.initState();
  }

  List<DropdownMenuItem> buildDropdownTestItems(List _testList) {
    List<DropdownMenuItem> items = List();
    for (var i in _testList) {
      items.add(
        DropdownMenuItem(
          value: i,
          child: Text(i['keyword']),
        ),
      );
    }
    return items;
  }

3. change function

  onChangeDropdownTests(selectedTest) {
    print(selectedTest);
    setState(() {
      _selectedTest = selectedTest;
    });
  }

4. UI

Dropdown Widget.

    DropdownBelow(
      itemWidth: 200,
      itemTextstyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: Colors.black),
      boxTextstyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: Color(0XFFbbbbbb)),
      boxPadding: EdgeInsets.fromLTRB(13, 12, 0, 12),
      boxHeight: 45,
      boxWidth: 200,
      hint: Text('choose item'),
      value: _selectedTest,
      items: _dropdownTestItems,
      onChanged: onChangeDropdownTests,
    ),

5. Question

IF you want to make itemBox dropdown when you enter the page?

Put this code to initState like this.

Timer(Duration(milliseconds: 200), () {
    CustomDropdownButtonState state = dropdownKey1.currentState;
    state.callTap();
});

And put key to Widget like this.

DropdownBelow(
  key: dropdownKey1,
  itemWidth: 200,
  itemTextstyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: Colors.black),
  boxTextstyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: Color(0XFFbbbbbb)),
  boxPadding: EdgeInsets.fromLTRB(13, 12, 0, 12),
  boxHeight: 45,
  boxWidth: 200,
  hint: Text('choose item'),
  value: _selectedTest,
  items: _dropdownTestItems,
  onChanged: onChangeDropdownTests,
)

Actually, dropdown widget is made by Navigation. So, it can work.

Comments
  • shadowThemeOnly not founded

    shadowThemeOnly not founded

    When I use this library, I get this error.

    /C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/dropdown_below-0.0.5/lib/dropdown_below.dart:543:32: Error: No named parameter with the name 'shadowThemeOnly'. theme: Theme.of(context, shadowThemeOnly: true), ^^^^^^^^^^^^^^^ /C:/src/flutter/packages/flutter/lib/src/material/theme.dart:106:20: Context: Found this candidate, but the arguments don't match. static ThemeData of(BuildContext context) { ^^

    opened by Tokenizer94 2
  • Incorrect use of ParentDataWidget

    Incorrect use of ParentDataWidget

    Hello.

    I'm using Dropdown Below library for a while and after upgrading my Flutter version to latest version, a problem happened. I was digging deep to find out where is the render object problem but after some time I gave up and decided to write a new screen from scratch in my application. At that point, I discovered a problem inside Dropdown Below.

    This is the track of message from terminal.

    `══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ The following assertion was thrown while applying parent data.: Incorrect use of ParentDataWidget. The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData. Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets. The offending Expanded is currently placed inside a ConstrainedBox widget. The ownership chain for the RenderObject that received the incompatible parent data was: IndexedStack ← Expanded ← ConstrainedBox ← Container ← DefaultTextStyle ← Stack ← Listener ← _GestureSemantics ← RawGestureDetector ← GestureDetector ← ⋯

    When the exception was thrown, this was the stack: #0 RenderObjectElement._updateParentData. (package:flutter/src/widgets/framework.dart:5723:11) #1 RenderObjectElement._updateParentData (package:flutter/src/widgets/framework.dart:5739:6) #2 RenderObjectElement.attachRenderObject (package:flutter/src/widgets/framework.dart:5761:7) #3 RenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5440:5) #4 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6228:11) ... Normal element mounting (22 frames) #26 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3611:14) #27 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6221:36) #28 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6232:32) ... Normal element mounting (32 frames) #60 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3611:14) #61 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6221:36) #62 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6232:32) ... Normal element mounting (103 frames) #165 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3611:14) #166 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6221:36) #167 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6232:32) ... Normal element mounting (73 frames) #240 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3611:14) #241 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6221:36) #242 Element.updateChild (package:flutter/src/widgets/framework.dart:3363:18) #243 RenderObjectElement.updateChildren (package:flutter/src/widgets/framework.dart:5654:32) #244 MultiChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:6243:17) #245 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #246 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:6090:14) #247 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #248 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4599:16) #249 Element.rebuild (package:flutter/src/widgets/framework.dart:4267:5) #250 StatelessElement.update (package:flutter/src/widgets/framework.dart:4655:5) #251 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #252 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4599:16) #253 Element.rebuild (package:flutter/src/widgets/framework.dart:4267:5) #254 StatelessElement.update (package:flutter/src/widgets/framework.dart:4655:5) #255 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #256 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4599:16) #257 Element.rebuild (package:flutter/src/widgets/framework.dart:4267:5) #258 ProxyElement.update (package:flutter/src/widgets/framework.dart:4922:5) #259 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #260 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4599:16) #261 Element.rebuild (package:flutter/src/widgets/framework.dart:4267:5) #262 ProxyElement.update (package:flutter/src/widgets/framework.dart:4922:5) #263 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #264 RenderObjectElement.updateChildren (package:flutter/src/widgets/framework.dart:5596:32) #265 MultiChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:6243:17) #266 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #267 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4599:16) #268 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4746:11) #269 Element.rebuild (package:flutter/src/widgets/framework.dart:4267:5) #270 StatefulElement.update (package:flutter/src/widgets/framework.dart:4778:5) #271 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #272 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4599:16) #273 Element.rebuild (package:flutter/src/widgets/framework.dart:4267:5) #274 ProxyElement.update (package:flutter/src/widgets/framework.dart:4922:5) #275 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #276 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4599:16) #277 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4746:11) #278 Element.rebuild (package:flutter/src/widgets/framework.dart:4267:5) #279 StatefulElement.update (package:flutter/src/widgets/framework.dart:4778:5) #280 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #281 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:6090:14) #282 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #283 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4599:16) #284 Element.rebuild (package:flutter/src/widgets/framework.dart:4267:5) #285 StatelessElement.update (package:flutter/src/widgets/framework.dart:4655:5) #286 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #287 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:6090:14) #288 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #289 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4599:16) #290 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4746:11) #291 Element.rebuild (package:flutter/src/widgets/framework.dart:4267:5) #292 StatefulElement.update (package:flutter/src/widgets/framework.dart:4778:5) #293 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #294 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4599:16) #295 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4746:11) #296 Element.rebuild (package:flutter/src/widgets/framework.dart:4267:5) #297 StatefulElement.update (package:flutter/src/widgets/framework.dart:4778:5) #298 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #299 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4599:16) #300 Element.rebuild (package:flutter/src/widgets/framework.dart:4267:5) #301 ProxyElement.update (package:flutter/src/widgets/framework.dart:4922:5) #302 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #303 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4599:16) #304 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4746:11) #305 Element.rebuild (package:flutter/src/widgets/framework.dart:4267:5) #306 StatefulElement.update (package:flutter/src/widgets/framework.dart:4778:5) #307 Element.updateChild (package:flutter/src/widgets/framework.dart:3350:15) #308 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4599:16) #309 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4746:11) #310 Element.rebuild (package:flutter/src/widgets/framework.dart:4267:5) #311 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2582:33) #312 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:875:21) #313 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:328:5) #314 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144:15) #315 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1082:9) #316 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:998:5) #320 _invoke (dart:ui/hooks.dart:163:10) #321 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:259:5) #322 _drawFrame (dart:ui/hooks.dart:126:31) (elided 3 frames from dart:async)`

    This is the version of flutter in my computer.

    [✓] Flutter (Channel stable, 2.2.2, on macOS 11.4 20F71 darwin-x64, locale en-GB) • Flutter version 2.2.2 at /Users/user/development/flutter • Framework revision d79295af24 (3 weeks ago), 2021-06-11 08:56:01 -0700 • Engine revision 91c9fc8fe0 • Dart version 2.13.3

    This is the code piece I was using perfectly before upgrading Flutter version:

    `
    Padding( padding: const EdgeInsets.only(right: 16.0), child: Row( mainAxisAlignment: MainAxisAlignment.end, children: [ DropdownBelow( itemWidth: 100, itemTextstyle: TextStyle( fontSize: 14, fontWeight: FontWeight.w400, color: Colors.black), boxTextstyle: TextStyle( fontSize: 14, fontWeight: FontWeight.w400, color: Color(0XFFbbbbbb)), boxPadding: const EdgeInsets.fromLTRB(13, 12, 0, 12), boxWidth: 100, boxHeight: 45, hint: Text('Filter'), value: _selectedTest, items: _dropdownTestItems, onChanged: onChangeDropdownTests, ), ], ), ),

    `

    And I find out that problem may come from dropdown_below.dart. Please check out line 590. The code piece fits to the cause of error message.

    Line 590 as a screenshot below

    Screenshot 2021-07-02 at 11 26 08

    I hope it helps you to make your package better. If that problem is related to my code, I'm sorry that I have disturbed you.

    opened by Trpstn 1
  • Failed assertion: line 522 pos 12: '_dropdownRoute == null': is not true

    Failed assertion: line 522 pos 12: '_dropdownRoute == null': is not true

    Hi @whatamelon ,

    This was not the case before, but suddenly I started getting the following error. Do you know in which case this error occurs?

    Another exception was thrown: 'package:dropdown_below/dropdown_below.dart':
    Failed assertion: line 522 pos 12: '_dropdownRoute == null': is not true.
    

    Thank you.

    opened by myConsciousness 6
  • Crash occurs when not choosing a value

    Crash occurs when not choosing a value

    When I open the dropdown and chose a value, everything works just fine, but when I press on the side I get an exception

    E/flutter (11559): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: type 'Null' is not a subtype of type 'FutureOr<_DropdownRouteResult<Object?>>' And I get brought to this code snippet in flutter/packages/flutter/lib/src/widgets/navigator.dart

      @mustCallSuper
      void didComplete(T? result) {
        _popCompleter.complete(result ?? currentResult);
      }
    

    After skipping the exception, I see everything still works fine, it closes the dropdown and it shows the previously selected value. Is there any way I can avoid this unhandled exception though?

    opened by SirBepy 1
  • Incorrect Text color when I use over dark theme

    Incorrect Text color when I use over dark theme

    Selected Item color is show as black even after setting it to white

    Here is the code Screenshot 2021-07-27 at 8 41 54 PM

    Here is the Output

    Screenshot 2021-07-27 at 8 42 53 PM

    Dropdown color is fine Screenshot 2021-07-27 at 8 43 03 PM

    Please fix this soon

    opened by IamAKX 1
Owner
Denny Hong
Junior developer. Love how declarative programming works.
Denny Hong
A Flutter widget that easily adds the flipping animation to any widget

flip_card A component that provides a flip card animation. It could be used for hiding and showing details of a product. How to use import 'package:fl

Bruno Jurković 314 Dec 31, 2022
A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

MohammadAminZamani.afshar 22 Dec 13, 2022
A draggable Flutter widget that makes implementing a SlidingUpPanel much easier!

sliding_up_panel A draggable Flutter widget that makes implementing a SlidingUpPanel much easier! Based on the Material Design bottom sheet component,

Akshath Jain 1.2k Jan 7, 2023
Circular Reveal Animation as Flutter widget!

Circular Reveal Animation Circular Reveal Animation as Flutter widget! Inspired by Android's ViewAnimationUtils.createCircularReveal(...). Статья с оп

Alexander Zhdanov 48 Aug 15, 2022
A Flutter Package providing Avatar Glow Widget

Avatar Glow This Flutter package provides a Avatar Glow Widget with cool background glowing animation. Live Demo: https://apgapg.github.io/avatar_glow

Ayush P Gupta 250 Dec 22, 2022
✨A clean and lightweight loading/toast widget for Flutter, easy to use without context, support iOS、Android and Web

Flutter EasyLoading English | 简体中文 Live Preview ?? https://nslog11.github.io/flutter_easyloading Installing Add this to your package's pubspec.yaml fi

nslog11 1k Jan 9, 2023
A beautiful animated flutter widget package library. The tab bar will attempt to use your current theme out of the box, however you may want to theme it.

Motion Tab Bar A beautiful animated widget for your Flutter apps Preview: | | Getting Started Add the plugin: dependencies: motion_tab_bar: ^0.1.5 B

Rezaul Islam 237 Nov 15, 2022
a widget provided to the flutter scroll component drop-down refresh and pull up load.

flutter_pulltorefresh Intro a widget provided to the flutter scroll component drop-down refresh and pull up load.support android and ios. If you are C

Jpeng 2.5k Jan 5, 2023
Highly customizable, feature-packed calendar widget for Flutter

TableCalendar Highly customizable, feature-packed calendar widget for Flutter. TableCalendar with custom styles TableCalendar with custom builders Fea

Aleksander Woźniak 1.5k Jan 7, 2023
Flutter 3D Flip Animation Widget

flutter_flip_view This is a flutter Widget base on pure Dart code that provides 3D flip card visuals. Usage add package in your pubspec.yaml dependenc

WosLovesLife 57 Dec 30, 2022
A simple toggle switch widget for Flutter.

Toggle Switch A simple toggle switch widget. It can be fully customized with desired icons, width, colors, text, corner radius, animation etc. It also

Pramod Joshi 84 Nov 20, 2022
Base Flutter widget which triggers rebuild only of props changed

pure_widget Base widget which triggers rebuild only if props changed Installation pubspec.yaml: dependencies: pure_widget: ^1.0.0 Example import 'da

Andrei Lesnitsky 9 Dec 12, 2022
A Stepper Widget in Flutter using GetX

Stepper Flutter GetX Donate If you found this project helpful or you learned something from the source code and want to thank me, consider buying me a

Ripples Code 0 Nov 27, 2021
Flutter widget that automatically resizes text to fit perfectly within its bounds.

ONLY FOR FLUTTER WEB Flutter widget that automatically resizes text to fit perfectly within its bounds. Show some ❤️ and star the repo to support the

Rebar Ahmad 4 Jan 6, 2022
Flutter fluid slider - A fluid design slider that works just like the Slider material widget

Fluid Slider for Flutter Inspired by a dribbble by Virgil Pana. A fluid design s

Jay Raj 2 Feb 18, 2022
This flutter package contains a widget called DecodingTextEffect which is having some cool Decode Effects for texts.

This flutter package contains a widget called DecodingTextEffect which is having some cool Decode Effects for texts. Installing 1. Depend on it Add th

Aadarsh Patel 13 Nov 25, 2020
A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

HeavenOSK 97 Jan 6, 2023
Animated triangles background widget with color gradients

Triangles background Animated triangles background widget with color gradients Getting Started click image to see the video Usage add this line to pub

Marco Bavagnoli 17 Oct 13, 2022
A simple widget for animating a set of images with full custom controls as an alternative to using a GIF file.

image_sequence_animator A simple widget for animating a set of images with full custom controls as an alternative to using a GIF file. If you have a G

AliYigitBireroglu 135 Jan 5, 2023