ทำ 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 ไปเลยก็ดีเหมือนกัน