hello guys, I hope you all are doing well. So today we learn and crate Flutter Multiple select Dropdown. in today’s world lots of places, countries, subjects and options are available there then we also are confused sometimes but if we give the user to select what we give then the user appreciates this effort and user UI is better to compare to before.
So we give the user multiple select Dropdown then the user selects multiple options even the search which is suitable for their search. Now don’t westing our time go to the coding part
Step 1: Add some packages
you have to add two packages to your project multi_select_flutter 4.1.3, and get 4.6.5 like this
dependencies: get: ^4.6.5 multi_select_flutter: ^4.1.3
Step 2: Open your Main.dart file
Open main.dart file and implement these codes in it. normally this code navigates into separate classes where we write and execute the scrolling pagination code.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'Multiple Search/view/multiple_selected_dropdown.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky, overlays:[]).then(
(_) => runApp(MyApp()),
);
// runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
home: MultiSelectDropDownScreen()
);
}
}
Step 3: Create Controller, Model, View Directory
In this project, we follow the MVC pattern it is better to practice for projects and very helpful for big projects. The MVC architecture pattern turns complex application development into a much more manageable process. It allows several developers to simultaneously work on the application. MVC stands for model-view-controller.
Create subject_data_model.dart class:
class SubjectModel {
String subjectId;
String subjectName;
SubjectModel({
required this.subjectId,
required this.subjectName,
});
}
Create app_data_controller.dart class
import 'package:get/get.dart';
import 'package:multi_select_flutter/multi_select_flutter.dart';
import 'package:navigationdrawer/Multiple Search/model/subject_data_model.dart';
class AppDataController extends GetxController {
List<SubjectModel> subjectData = [];
List<MultiSelectItem> dropDownData = [];
getSubjectData() {
subjectData.clear();
dropDownData.clear();
Map<String, dynamic> apiResponse = {
"code": 200,
"message": "Course subject lists.",
"data": [
{"subject_id": "1", "subject_name": "English"},
{"subject_id": "2", "subject_name": "Physics"},
{"subject_id": "3", "subject_name": "Chemistry"},
{"subject_id": "4", "subject_name": "Geography"},
{"subject_id": "5", "subject_name": "Math"},
{"subject_id": "6", "subject_name": "History"},
{"subject_id": "7", "subject_name": "Computer Science"},
{"subject_id": "8", "subject_name": "Arts"}
]
};
if (apiResponse['code'] == 200) {
List<SubjectModel> tempSubjectData = [];
apiResponse['data'].forEach(
(data) {
tempSubjectData.add(
SubjectModel(
subjectId: data['subject_id'],
subjectName: data['subject_name'],
),
);
},
);
print(tempSubjectData);
subjectData.addAll(tempSubjectData);
dropDownData = subjectData.map((subjectdata) {
return MultiSelectItem(subjectdata, subjectdata.subjectName);
}).toList();
update();
} else if (apiResponse['code'] == 400) {
print("Show Error model why error occurred..");
} else {
print("show some error model like something went worng..");
}
}
}
Create multiple_selected_dropdown.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:multi_select_flutter/dialog/multi_select_dialog_field.dart';
import 'package:navigationdrawer/Multiple Search/controller/app_data_controller.dart';
import 'package:navigationdrawer/Multiple Search/model/subject_data_model.dart';
class MultiSelectDropDownScreen extends StatelessWidget {
MultiSelectDropDownScreen({Key? key}) : super(key: key);
final AppDataController controller = Get.put(AppDataController());
@override
Widget build(BuildContext context) {
List subjectData = [];
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
controller.getSubjectData();
});
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text("Multiple Select DropDown"),
),
body: Column(
children: [
GetBuilder<AppDataController>(builder: (controller) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: MultiSelectDialogField(
//height: 200,
dialogHeight: 200,
items: controller.dropDownData,
title: const Text(
"Select Subject",
style: TextStyle(color: Colors.black),
),
selectedColor: Colors.black,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(Radius.circular(30)),
border: Border.all(
color: Colors.black,
width: 2,
),
),
buttonIcon: const Icon(
Icons.arrow_drop_down,
color: Colors.black,
),
buttonText: const Text(
"select country",
style: TextStyle(
color: Colors.black,
fontSize: 12,
),
),
onConfirm: (results) {
subjectData = [];
for (var i = 0; i < results.length; i++) {
SubjectModel data = results[i] as SubjectModel;
print(data.subjectId);
print(data.subjectName);
subjectData.add(data.subjectId);
}
print("data $subjectData");
//_selectedAnimals = results;
},
),
);
}),
],
),
);
}
}
Output
conclusion:
In this tutorial, we create a simple and interesting Multiple select Dropdown with a beautiful UI. in the article we implement two packages get 4.6.5 And multi_select_flutter: ^4.1.3. in these packages, our work is so easy in deep information about this package I will give a link in there an official site you also check out.
If you like my work then please follow our site and if you have any questions about the code please connect with me your query is priceless to me Thanks.
If you like a new article then Click.
and if you are interested in new and attractive designs and layouts then Click.
