https://github.com/redevrx/custom_drop_down
Create Easy DropDown in Flutter
https://github.com/redevrx/custom_drop_down
dropdown dropdownlist dropdownmenu flutter
Last synced: 29 days ago
JSON representation
Create Easy DropDown in Flutter
- Host: GitHub
- URL: https://github.com/redevrx/custom_drop_down
- Owner: redevrx
- License: mit
- Created: 2023-10-17T10:15:21.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-31T10:28:04.000Z (over 2 years ago)
- Last Synced: 2025-10-23T04:32:43.302Z (8 months ago)
- Topics: dropdown, dropdownlist, dropdownmenu, flutter
- Language: C++
- Homepage: https://pub.dev/packages/flutter_custom_drop_down_widget
- Size: 385 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## Flutter Custom DropDown
- Create your easy dropdown with custom drop down
## Getting started
```
flutter_custom_drop_down_widget: 1.0.1
```
## Preview
## Usage & Example
```dart
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
late OverlayPortalController controller1;
late OverlayPortalController controller2;
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('CustomDropDown'),
centerTitle: true,
),
body: SingleChildScrollView(
child: Center(
child: Column(
children: [
const SizedBox(height: kToolbarHeight,),
/// dropdown button
Text('dropdown button',style: Theme.of(context).textTheme.titleLarge,),
CustomDropDown(
getController: (controller) {
controller2 = controller;
},
child: Container(
width: MediaQuery.of(context).size.width * .8,
padding: const EdgeInsets.symmetric(
horizontal: 16.0,),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16.0),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(.23),
blurRadius: .4
)
]
),
child: Row(
children: [
CupertinoCheckbox(value: false, onChanged: (it){}),
const Text("Open"),
],
),
),
dropDownBuilder: () {
return Container(
width: MediaQuery.of(context).size.width * .8,
height: MediaQuery.of(context).size.height / 100 * 30,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0)),
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return Row(
children: [
CupertinoCheckbox(value: true, onChanged: (it){}),
const Text("Item Name")
],
);
},
),
);
},
),
const SizedBox(height: kToolbarHeight,),
/// dropdown button
Text('dropdown button',style: Theme.of(context).textTheme.titleLarge,),
CustomDropDown(
getController: (controller) {
controller1 = controller;
},
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 16.0, vertical: 10),
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(12.0)),
child: const Text("Open"),
),
dropDownBuilder: () {
return Container(
width: MediaQuery.of(context).size.width * .2,
height: MediaQuery.of(context).size.height / 100 * 30,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0)),
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ElevatedButton(
onPressed: () {
controller1.toggle();
},
child: const Text("Open"),
);
},
),
);
},
),
const SizedBox(height: kToolbarHeight * 2.8,),
Text('dropdown button',style: Theme.of(context).textTheme.titleLarge,),
CustomDropDown(
targetAnchor: Alignment.bottomLeft,
alignment: Alignment.topCenter,
getController: (controller) {
controller2 = controller;
},
child: Container(
width: MediaQuery.of(context).size.width * .8,
padding: const EdgeInsets.symmetric(
horizontal: 16.0,),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16.0),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(.23),
blurRadius: .4
)
]
),
child: Row(
children: [
CupertinoCheckbox(value: false, onChanged: (it){}),
const Text("Open"),
],
),
),
dropDownBuilder: () {
return Container(
margin: const EdgeInsets.only(top: 2),
width: MediaQuery.of(context).size.width * .4,
height: MediaQuery.of(context).size.height / 100 * 30,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0)),
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return GestureDetector(
onTap: controller2.toggle,
child: Row(
children: [
CupertinoCheckbox(value: true, onChanged: (it){}),
const Text("Item Name")
],
),
);
},
),
);
},
),
],
),
),
),
),
);
}
}
```