@@ -26,6 +26,7 @@ Flutter গুগলের তৈরি একটি ফ্রেমওয়ার
2626- [ Animation] ( #animation )
2727- [ Responsive Header] ( #responsive-header )
2828- [ Snackbar] ( #snackbar )
29+ - [ Carousel] ( #carousel )
2930
3031
3132## Flutter CLI tools
@@ -107,7 +108,6 @@ class MyApp extends StatelessWidget {
107108 }
108109}
109110```
110- ```
111111## Hello world
112112
113113``` dart
@@ -1063,3 +1063,168 @@ List<Widget> indicators(imagesLength, currentIndex) {
10631063 );
10641064 });
10651065}
1066+ ```
1067+ ## Multiselect with Checkboxes
1068+ ``` dart
1069+ // main.dart
1070+ import 'package:flutter/material.dart';
1071+
1072+ void main() {
1073+ runApp(const MyApp());
1074+ }
1075+
1076+ class MyApp extends StatelessWidget {
1077+ const MyApp({Key? key}) : super(key: key);
1078+
1079+ @override
1080+ Widget build(BuildContext context) {
1081+ return MaterialApp(
1082+ debugShowCheckedModeBanner: false,
1083+ title: 'KindaCode.com',
1084+ theme: ThemeData(
1085+ // enable Material 3
1086+ useMaterial3: true,
1087+ primarySwatch: Colors.indigo,
1088+ ),
1089+ home: const HomePage(),
1090+ );
1091+ }
1092+ }
1093+
1094+ // Multi Select widget
1095+ // This widget is reusable
1096+ class MultiSelect extends StatefulWidget {
1097+ final List<String> items;
1098+ const MultiSelect({Key? key, required this.items}) : super(key: key);
1099+
1100+ @override
1101+ State<StatefulWidget> createState() => _MultiSelectState();
1102+ }
1103+
1104+ class _MultiSelectState extends State<MultiSelect> {
1105+ // this variable holds the selected items
1106+ final List<String> _selectedItems = [];
1107+
1108+ // This function is triggered when a checkbox is checked or unchecked
1109+ void _itemChange(String itemValue, bool isSelected) {
1110+ setState(() {
1111+ if (isSelected) {
1112+ _selectedItems.add(itemValue);
1113+ } else {
1114+ _selectedItems.remove(itemValue);
1115+ }
1116+ });
1117+ }
1118+
1119+ // this function is called when the Cancel button is pressed
1120+ void _cancel() {
1121+ Navigator.pop(context);
1122+ }
1123+
1124+ // this function is called when the Submit button is tapped
1125+ void _submit() {
1126+ Navigator.pop(context, _selectedItems);
1127+ }
1128+
1129+ @override
1130+ Widget build(BuildContext context) {
1131+ return AlertDialog(
1132+ title: const Text('Select Topics'),
1133+ content: SingleChildScrollView(
1134+ child: ListBody(
1135+ children: widget.items
1136+ .map((item) => CheckboxListTile(
1137+ value: _selectedItems.contains(item),
1138+ title: Text(item),
1139+ controlAffinity: ListTileControlAffinity.leading,
1140+ onChanged: (isChecked) => _itemChange(item, isChecked!),
1141+ ))
1142+ .toList(),
1143+ ),
1144+ ),
1145+ actions: [
1146+ TextButton(
1147+ onPressed: _cancel,
1148+ child: const Text('Cancel'),
1149+ ),
1150+ ElevatedButton(
1151+ onPressed: _submit,
1152+ child: const Text('Submit'),
1153+ ),
1154+ ],
1155+ );
1156+ }
1157+ }
1158+
1159+ // Implement a multi select on the Home screen
1160+ class HomePage extends StatefulWidget {
1161+ const HomePage({Key? key}) : super(key: key);
1162+
1163+ @override
1164+ State<HomePage> createState() => _HomePageState();
1165+ }
1166+
1167+ class _HomePageState extends State<HomePage> {
1168+ List<String> _selectedItems = [];
1169+
1170+ void _showMultiSelect() async {
1171+ // a list of selectable items
1172+ // these items can be hard-coded or dynamically fetched from a database/API
1173+ final List<String> items = [
1174+ 'Flutter',
1175+ 'Node.js',
1176+ 'React Native',
1177+ 'Java',
1178+ 'Docker',
1179+ 'MySQL'
1180+ ];
1181+
1182+ final List<String>? results = await showDialog(
1183+ context: context,
1184+ builder: (BuildContext context) {
1185+ return MultiSelect(items: items);
1186+ },
1187+ );
1188+
1189+ // Update UI
1190+ if (results != null) {
1191+ setState(() {
1192+ _selectedItems = results;
1193+ });
1194+ }
1195+ }
1196+
1197+ @override
1198+ Widget build(BuildContext context) {
1199+ return Scaffold(
1200+ appBar: AppBar(
1201+ title: const Text('Multi Select'),
1202+ ),
1203+ body: Padding(
1204+ padding: const EdgeInsets.all(20),
1205+ child: Column(
1206+ crossAxisAlignment: CrossAxisAlignment.start,
1207+ children: [
1208+ // use this button to open the multi-select dialog
1209+ ElevatedButton(
1210+ onPressed: _showMultiSelect,
1211+ child: const Text('Select Your Favorite Topics'),
1212+ ),
1213+ const Divider(
1214+ height: 30,
1215+ ),
1216+ // display selected items
1217+ Wrap(
1218+ children: _selectedItems
1219+ .map((e) => Chip(
1220+ label: Text(e),
1221+ ))
1222+ .toList(),
1223+ )
1224+ ],
1225+ ),
1226+ ),
1227+ );
1228+ }
1229+ }
1230+ ```
0 commit comments