Flutter: autocomplete in text field by flutter_typeahead

Sample of autocomplete in Google.

จากตัวอย่างด้านบนคือ Feature of Autocomplete ใน Google นะคับ ซึ่ง Flutter ก็มีวิธีทำเพื่อให้ UX น่าจดจำเช่นกัน ลองมาดูกันคับ

จิงๆแล้วเนี่ย ในการ call API สามารถทำได้ 2 แบบคือ

1. ไป get ทั้งหมดมาก่อน แล้วค่อยมาจัดการ suggestion ด้วย lib

2. ส่ง query string เข้าไปที่ BE ทุกครั้งที่มีการพิมพ์โดยใช้ onChange เข้ามาช่วย

ซึ่งทั้งนี้ทั้งอยู่ที่ว่าปริมาณข้อมูลมีเยอะขนาดไหนที่จะส่งผลต่อ performance

ทดลองกันเลยดีกว่าคับ ผมจำใช้ lib ตัวนี้flutter_typeahead: ^2.0.0 ส่วน data ที่ใช้จะ mock เข้ามาจาก faker และจากเว็บ unsplash

1. ติดตั้ง flutter_typeahead: ^2.0.0
2. สร้าง Text field ขึ้นมาสำหรับ กรอกข้อมูล ในที่นี้เราจะไมใช้ TextField() ทั่วไป แต่จะใช้ TypeAheadField() แทนนะคับ ซึ่งเราจะกำหนด style ได้เลย เพราะมีการ override TextField() เอาไว้แล้ว

เรียกใช้งาน TypeAheadField

3. สร้าง class User และ UserData โดย

• User ทำหน้าที่เก็บ name, job, imageUrl เพื่อให้ UserData เรียกใช้
• UserData ทำหน้าที่ generate mock data ขึ้นมาโดยจะสร้าง users ออกมาครั้งละ 50 users ด้วย List.generate(), ใช้ faker ในการ mock name, job และใช้เว็บ unsplash ในการสร้าง imageUrl แบบ random ขึ้นมาเช่นกัน

ซึ่งวิธีการนี้ เป็นการ generate fake data ขึ้นมาเก็บไว้ใน List<User> รอไว้ก่อน 50 ชุดแล้วค่อยใช้ lib ล้วงเข้ามาเช็คดูว่ามี user.name ไหนไหมที่ตรงกับ query ที่พิมพ์เข้ามา

สร้าง class User และ UserData เพื่อเก็บค่า name, job, imageUrl และสำหรับ generate ค่าขึ้นมาตามลำดับ

หน้าตาของการเชื่อมโยงกันแต่ละส่วนระหว่างโค้ดกับ UI

เปรียบเทียบระหว่างโค้ดและ UI

จะขึ้น auto complete ให้แบบนี้จากชื่อที่ค้นหา

Code:

UI page.

model and part of generating fake data.

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

References:
https://betterprogramming.pub/how-to-implement-an-autocomplete-feature-in-flutter-bea21d6b1847
https://youtu.be/ybV1aIyKFE0