Flutter: multi_select_flutter ถ้าชีวิตต้องเลือก เลือกใช้ package ตัวนี้ก็ไม่เลว

ตรงตัวเลยนะคับ multi select คือ การเลือกหลายๆตัวเลือก ซึ่งใน Flutter ทำได้หลายแบบ แต่หนึ่งในวิธีที่สะดวกคือ การใช้ package ตัวนี้ ซึ่งมีข้อดีที่

• รองรับ FormField แบบ validator ได้ด้วย
• เลือกได้ง่ายๆว่าจะแสดงในรูปแบบไหน ไม่ว่าจะเป็น Dialog, BottomSheet หรือ ChoicChip.
• ทำ Searchable ได้ด้วย
• Designed ไว้แบบมาตรฐานแล้ว ที่เหลือเราก็ไป custom เพิ่มได้เลย

https://pub.dev/packages/multi_select_flutter/versions/3.1.8

ในการใช้ Lib ตัวนี้จะมี MultiSelect ให้เลือกใช้ได้หลายแบบเลย เช่น

• MultiSelectDialogField
• MultiSelectBottomSheetField
• MultiSelectButtomSheetField with validators
• MultiSelectChipField
• MultiSelectDialogField with initial values

ลองมาเล่นกันดูดีกว่า ซึ่งใน Article นี้จะใช้ lib version นี้นะคับ

multi_select_flutter: ^3.1.8

MultiSelectDialogField()

1. เราจะสร้างทดลองสร้าง Dialog ที่ถามว่าคุณมีภาษาโปรแกรมมิ่งอะไรที่เขียนได้บ้าง นั่นคือ
   เริ่มจากสร้าง List ของ Languages ขึ้นมาตามลำดับในรูป

สร้าง Model, List ของ object, _items , List ของ Language และ GlobalKey ขึ้นมา

2. จากนั้นมาทดลองใช้กันโดยจะใช้ MultiSelectDialogField()

กำหนด UI, ส่วนของ items และ ส่วนของ onConfirm

จริงๆแล้วใน ​MultiSelectDialogField() ยังมี property ให้เลือกได้เลยใช้อีก เช่น

• listType: MultiSelectListType.CHIP,
• selectedItemsTextStyle: TextStyle(color: Colors.black),
• searchable: true,

properties in MultiSelectDialogField()

ทดลองกำหนดค่าให้กับ Property ซึ่งค่อนข้างใช้งานได้ง่าย

3. จากนั้นเราก็สามารถทำ multi select ได้ล่ะ

code:

Multi select and show with Chips.

MultiSelectDialogField()

MultiSelectBottomSheetField()

เป็นอีกแบบนึงที่อยากทดลองใช้คับ คือ การย้ายจากที่เป็น Dialog มาเป็น BottomSheet บ้าง

Properties in MultiSelectBottomField()

มาดูกันเลย !!! คือ มันง่ายแค่นี้เอง

เพียงแค่เปลี่ยนจาก
class MultiSelectDialogField() มาเป็น MultiSelectBottomSheetField ที่เหลือเหมือนเดิม

Select Chips from buttomSheet position แต่เมื่อเรากดที่ Chips ที่แสดงใน UI จะไม่มี effect อะไรนะ

ถัดไปเมื่อ lib ตัวนี้สามารถ validate ได้ด้วย key: ดังนั้นจึงสามารถจัดการกับ chip ได้ด้วย โดยในที่นี้จะทดลอง remove chips ที่ได้เลือกไว้แล้วออกไป โดยที่ไม่ต้องเปิด bottomSheet อีกครั้งนึง

ขั้นตอนการเพิ่ม key และ ส่วนของการ remove items in List เมื่อกดที่ Chips

ผลลัพธ์จึงออกมาเป็นแบบนี้

สามารถกดที่ Chip เพื่อลบ element in List

Code:

MultiSelectBottomSheetField() with validator

MultiSelectChipField()

อีกแบบนะคับ คือ ChipField() ซึ่งแบบนี้เราจะแสดงเป็น Chip หรือจะตาม widget ที่เรา custom ขึ้นมาก็ได้ ลองดูกันคับ

ใน ChipField() ก็มี properties ให้เราได้ปรับแต่งเช่นกัน

Properties in MultiSelectChipField()

การใช้งาน MultiSelectChipField()

MultiSeelctChipField() ซึ่งเราสามารถกำหนดให้ Chip เป็นรูปแบบอื่นก็ได้ เช่น รูปภาพ

กรณีที่เราต้องการสร้าง Multi select ขึ้นมาเอง ลองดูได้จาก Article นี้เลยคับ

แล้วพบกันใหม่คับ

References:
https://pub.dev/packages/multi_select_flutter/versions/3.1.8
https://karthikponnam.medium.com/flutter-multi-select-choicechip-244ea016b6fa