web analytics

Flutter : เลือกรูปภาพจาก Gallery

สวัสดีครับ ผู้อ่านครับ วันนี้ว่างๆลองหาอะไรเล่นใน Flutter ก็เจอ library สำหรับทำ multi image picker ช่วยในการเปิด gallery แล้วเลือกรูปภาพมาใช้ในแอปของเรา ซึ่งเท่าที่ผมดูมาหลายตัว พบว่าตัวนี้ค่อนข้างดูดี เพราะว่าเลือกใช้ library ที่ได้รับความนิยมอยู่แล้วจาก native อีกที ทำให้ได้ UX ที่เหมาะสมกับ platform นั้น

อ่าน doc ของเขาได้ที่นี่ ทำไว้ดีทีเดียวนะ
https://sh1d0w.github.io/multi_image_picker/

เริ่มต้น

หากโปรเจคเรามี android library ที่ใช้ AndroidX ให้ใช้ package เวอชัน 4.x แต่ถ้าไม่ใช้ก็ใช้ 2.x โปรเจคนี้ผม migrate มาใช้ androidx แล้ว เลยใช้ 4.x

สำหรับการ Migrate มาใช้ androidx อ่านได้ที่ลิงค์ด้านล่างนี้เลย

เพิ่ม permission

ใน android เพิ่ม permission นี้ ที่ android/src/main/AndroidManifest.xml

แล้วก็ที่ android/app/build.gradle
เปลี่ยน minSdkVersion เป็น 19

สำหรับ iOS เพิ่มที่ Info.plist

การใช้งาน

มาลองเล่นกัน ก่อนอื่นก็ import เข้ามาที่ main.dart

ประกาศ List<Asset> อันนี้เป็น class ของ library ที่ทำการ map ตัว asset object ของแต่ละ platform มาให้เป็น Asset

ใส่ method สำหรับเปิดหน้าจอเลือกรูปภาพ และหลังจากเลือกแล้วก็จะได้ List<Asset> นั่นเอง เราก็เอาไปเก็บไว้ในตัวแปรที่เตรียมไว้ จากนั้นเรียก setState

ทำส่วนเลือกรูปภาพแล้ว แต่ยังไม่ได้ทำปุ่มให้กดแล้วเปิดหน้าจอขึ้นมา ในตัวอย่างนี้ผมเพิ่ม action เป็นไอคอนไว้มุมขวา

ได้แบบนี้ ซึ่งพอกดปล้วจะเรียก loadAsset() นั่นเอง

จากนั้นแอปจะถามหา permission ส่วนนี้ library จัดการให้เรียบร้อย ไม่ต้องเขียนเช็ค permission เลย

สิ่งที่ได้คือ หน้าจอ gallery สำหรับเลือกรูปภาพ

สามารถเลือกรูปได้ตาม max ที่เรากำหนดไว้

แต่ว่า เรายังไม่ได้ทำส่วนสำหรับเลือกรูปภาพแล้วนำมาแสดงในแอปของเราเลย ดังนั้นเลยต้องเพิ่ม GridView สำหรับแสดงรูปภาพ

หลังจากเราเลือกรูปภาพแล้ว รูปเหล่านั้นก็จะเอามาใส่ใน GridView แล้วละ

ที่เหลือ เรายังสามารถตกแต่งหน้า gallery ที่เลือกรูปภาพได้ด้วย เช่นใน android ก็กำหนดที่ materialOptions ใส่สี ActionBar สีตัวหนังสือ

ได้แล้ว