dropdown_model_list

Description:

dropdown model list

Flutter DropDown Model List
Features #
Flexible DropDown Model List works with a simple model list and Easy to use & customized.
In DropDown Model List Feature:-

Single Selection
Single Selection With Search
Multiple Selection
Radio Button Selection


# Installation

Add the latest version of package to your pubspec.yaml (and dart pub get):

dart
dependencies:
flutter:
sdk: flutter
dropdown_model_list: any
copied to clipboard

Import the package and use it in your App.

Usage Example #
import 'package:dropdown_model_list/dropdown_model_list.dart';

copied to clipboard
Short Example #
SelectDropList(
itemSelected:optionItemSelected,
dropListModel:dropListModel,
showIcon: true, // Show Icon in DropDown Title
showArrowIcon: true, // Show Arrow Icon in DropDown
showBorder: true,
paddingTop: 0,
icon: const Icon(Icons.person,color: Colors.black),
onOptionSelected:(optionItem){
optionItemSelected = optionItem;
setState(() {});
},
)

///Search DropDown
SearchDropList(
itemSelected: optionItemSelected,
dropListModel: dropListModel,
showIcon: false,
showArrowIcon: true,
showBorder: true,
textEditingController: controller,
paddingTop: 0,
suffixIcon: Icons.arrow_drop_down,
containerPadding: const EdgeInsets.all(10),
icon: const Icon(Icons.person, color: Colors.black),
onOptionSelected: (optionItem) {
optionItemSelected = optionItem;
if (kDebugMode) {
print(optionItemSelected.id);
}
setState(() {});
},
),

///Multiple Selection DropDown
SelectDropMultipleList(
defaultText: optionItemSelected,
dropListModel: dropListModel,
showIcon: false,
showBorder: true,
paddingTop: 0,
submitText: "OK",
colorSubmitButton: Colors.amber,
selectedIconWidget: Container(
decoration: const BoxDecoration(
shape: BoxShape.rectangle, color: Colors.amber),
child: const Icon(
Icons.done,
size: 15,
color: Colors.white,
),
),
suffixIcon: Icons.arrow_drop_down,
containerPadding: const EdgeInsets.all(10),
icon: const Icon(Icons.person, color: Colors.black),
onOptionListSelected: (list) {
for (var data in list) {
if (data.id != null) {
if (kDebugMode) {
print(data.id);
}
}
}
setState(() {});
},
),

///Radio Selection DropDown
SelectDropRadio(
defaultText: optionItemSelected,
dropListModel: dropListModel,
showIcon: false,
showBorder: true,
paddingTop: 0,
submitText: "OK",
colorSubmitButton: Colors.amber,
selectedRadioColor: Colors.amber,
suffixIcon: Icons.arrow_drop_down,
containerPadding: const EdgeInsets.all(10),
icon: const Icon(Icons.person, color: Colors.black),
onOptionListSelected: (data) {
print(data.title);
setState(() {});
},
),
copied to clipboard
Short Example Using Getx #

DropListModel dropListContentModel = DropListModel([
OptionItem(id: "audio", title: "Audio"),
OptionItem(id: "video", title: "Video",),
OptionItem(id: "presentation", title: "Presentation"),
OptionItem(id: "document", title: "Documents",),
]);

var optionItemSelectedContent = OptionItem(title: "Select Content").obs;
var contentType = ''.obs;

Obx(() =>
SelectDropList(
hintColorTitle: Colors.black,
itemSelected: optionItemSelectedContent.value,
dropListModel: dropListContentModel,
showIcon: false, // Show Icon in DropDown Title
showArrowIcon: true, // Show Arrow Icon in DropDown
showBorder: true,
borderColor: Colors.grey,
suffixIcon: Icons.arrow_drop_down,
arrowIconSize: 28,
paddingDropItem: 10,
paddingBottom: 0,
paddingLeft: 0,
containerPadding: const EdgeInsets.only(left: 0,right: 10),
paddingRight: 0,
paddingTop: 0,
onOptionSelected: (optionItem) {
optionItemSelectedContent.value = optionItem;
},
)),

copied to clipboard
Example #
import 'package:dropdown_model_list/dropdown_model_list.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'DropDown Menu',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'DropDown Menu'),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
DropListModel dropListModel = DropListModel([
OptionItem(id: "1", title: "Jatin Sharma", data: 'CSE Student'),
OptionItem(id: "2", title: "Puneet Chand", data: 'CSE Student'),
OptionItem(id: "3", title: "Vikas Bhardwaj", data: 'CSE Student'),
OptionItem(id: "4", title: "Rakesh Kumar", data: 'CSE Student'),
OptionItem(id: "5", title: "Alok Dubey", data: 'CSE Student'),
OptionItem(id: "6", title: "Kiran Yadav", data: 'CSE Student'),
OptionItem(id: "7", title: "Pradeep Kumar", data: 'CSE Student'),
OptionItem(id: "8", title: "Amit Kumar", data: 'CSE Student'),
OptionItem(id: "9", title: "Shweta Sharma", data: 'CSE Student'),
OptionItem(id: "10", title: "Ankit Bhist", data: 'CSE Student'),
]);
OptionItem optionItemSelected = OptionItem(title: "Select User");

TextEditingController controller = TextEditingController();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.only(top: 20),
child: Column(
children: <Widget>[
///Simple DropDown
SelectDropList(
itemSelected: optionItemSelected,
dropListModel: dropListModel,
showIcon: false,
showArrowIcon: true,
showBorder: true,
enable: true,
paddingTop: 0,
paddingDropItem: const EdgeInsets.only(
left: 20, top: 10, bottom: 10, right: 20),
suffixIcon: Icons.arrow_drop_down,
containerPadding: const EdgeInsets.all(10),
icon: const Icon(Icons.person, color: Colors.black),
onOptionSelected: (optionItem) {
optionItemSelected = optionItem;
setState(() {});
},
),

///Search DropDown
SearchDropList(
itemSelected: optionItemSelected,
dropListModel: dropListModel,
showIcon: false,
showArrowIcon: true,
showBorder: true,
enable: true,
textEditingController: controller,
paddingTop: 0,
suffixIcon: Icons.arrow_drop_down,
containerPadding: const EdgeInsets.all(10),
icon: const Icon(Icons.person, color: Colors.black),
onOptionSelected: (optionItem) {
optionItemSelected = optionItem;
if (kDebugMode) {
print(optionItemSelected.id);
}
setState(() {});
},
),

///Multiple Selection DropDown
SelectDropMultipleList(
defaultText: optionItemSelected,
dropListModel: dropListModel,
showIcon: false,
showBorder: true,
enable: true,
paddingTop: 0,
submitText: "OK",
onTapCross: (data) {
if (data) {
print("List Clear");
}
},
colorSubmitButton: Colors.amber,
selectedIconWidget: Container(
decoration: const BoxDecoration(
shape: BoxShape.rectangle, color: Colors.amber),
child: const Icon(
Icons.done,
size: 15,
color: Colors.white,
),
),
suffixIcon: Icons.arrow_drop_down,
containerPadding: const EdgeInsets.all(10),
icon: const Icon(Icons.person, color: Colors.black),
onOptionListSelected: (list) {
for (var data in list) {
if (data.id != null) {
if (kDebugMode) {
print(data.id);
}
}
}
setState(() {});
},
),

///Radio Selection DropDown
SelectDropRadio(
defaultText: optionItemSelected,
dropListModel: dropListModel,
showIcon: false,
showBorder: true,
paddingTop: 0,
enable: true,
submitText: "OK",
colorSubmitButton: Colors.amber,
selectedRadioColor: Colors.amber,
suffixIcon: Icons.arrow_drop_down,
containerPadding: const EdgeInsets.all(10),
icon: const Icon(Icons.person, color: Colors.black),
onOptionListSelected: (data) {
print(data.title);
setState(() {});
},
),
],
),
),
);
}
}

copied to clipboard



Contributing #
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.