ลอง Flutter for Web บ้าง

ลอง Flutter for Web บ้าง เป็น Backend สำหรับจัดการข้อมูลของ Mobile App อีกทีหนึ่ง ตัว Web App ใช้ Flutter เชื่อมต่อกับ Firebase ใช้เหมือนกับ Mobile App ดึงข้อมูลจาก Firestore, Firebase Storage และ Firebase Authentication


ตัว Plugin ที่ใช้ รองรับ Firebase service ที่เขียนออกแนว Web สักหน่อย ซึ่งคำสั่งแตกต่างจากการเขียนบน Flutter Mobile มาก เท่าที่ลองแกะ Plugin ดูเป็นการเขียน wrap เข้ากับ API ของ Firebase โดยเรียกผ่าน Javascript อีกทีนึง (dart2js) แต่ที่น่าเป็นห่วงคือจะมีคนดูแล Plugin ตัวนี้ไหมนี่แหละ

ทำ Web Responsive ใน Flutter for Web

เริ่มมาดู Flutter for Web และทะยอยทดสอบ Widget และ Plugin ที่ใช้ใน Mobile App ว่าตัวไหนใช้ได้บ้างไม่ได้บ้าง และทดสอบเรื่อง Responsive ด้วย ซึ่งในเว็บ Flutter ก็มีอธิบายอยู่นิดเดียว คือ ให้จัดการกับ properties ต่างๆ ที่ใช้กับ Widget ก็เลยเป็นที่มาของ blog ครั้งนี้
จากที่ทดลองเขียนจัดการเรื่อง responsive เอง (วิธีที่ไม่ดี) พบว่าก็เหนื่อยเหมือนกัน เพราะต้องตรวจสอบขนาดของหน้าจอและปรับค่า propertiy ของ Widget ที่เราใช้งานด้วย ตัวอย่างเช่น GridView ถ้าเป็นหน้าจอ mobile ให้แสดงผล 2 คอลัมน์ ถ้าเป็น tablet ให้แสดงผล 4 คอลัมน์ ถ้าเป็น desktop ให้แสดงผล 6 คอลัมน์ อะไรแบบนี้ ซึ่ง ไม่ค่อยสะดวกเท่าไร

หน้าจอ Desktop

หน้าจอ Tablet

หน้าจอ Mobile
อีกวิธีนึงใช้ resource selection เหมือนกับ Android แล้วเรียก layout ที่เหมาะสม แทนการ handle widget บนกันในหน้าเดียว แบบนี้จะทำให้ง่ายมากขึ้นและโค้ดสะอาด หลังจากไปค้นแบบจริงจังมาก็พบว่ามีคนทำ package แบบ resource selection มาไว้แล้ว ชื่อ responsive_builder ลองเข้าไปดูเว็บของนักพัฒนาท่านนี้ได้ครับ

ลองดูแล้วก็พบว่าใช้ได้ดีเลย ไม่ต้อง handle ให้เหนื่อย แยก layout ไปเลยก็ดีเหมือนกัน