web analytics

Flutter Preview : สร้าง Web App ด้วย Flutter Web

สวัสดีผู้อ่านครับ ของใหม่อีกอย่างของ Flutter 1.5 คือ เราสามารถลองเล่น Flutter Web กันได้แล้ว โดย Flutter Web จะทำการแปลง dart เป็น javascript ทั้งหมด ไม่ต้องเขียน HTML หรือ CSS อะไรเลย ทำให้สามารถใช้ code base เดียวกับ Flutter แอปเดิม ซึ่งตอนนี้ยังอยู่ในสถานะ preview อยู่นะ โอเค มาลองเล่นกันเลย

ย้าย Channel

Flutter Web ยังเป็น Technical preview ดังนั้นให้เราย้าย channel อื่นที่ไม่ใช่ stable ตัวอย่างนี้จะย้ายไปยัง master ดังนั้นให้เข้าไปที่โฟลเดอร์ flutter แล้วรัน cmd ด้วยคำสั่ง

อัพเกรด Flutter

ต้องอัพเกรด Flutter 1.5.4 ขึ้นไป ดังนั้นรันคำสั่ง cmd เพื่ออัพเกรด

Clone Flutter web

clone โปรเจคของ flutter web ลงมา

Activate webdev

จากนั้นให้เข้าไปที่โฟลเดอร์โปรเจคตัวอย่าง เช่น flutter_web\examples\hello_world
รันคำสั่ง cmd ดังนี้ จะเป็นการดาวน์โหลด web buildtool และ activate webdev

รอดาวน์โหลดจนเสร็จ จากนั้น จะมี warning มาว่าให้เราเพิ่ม path ของ webdev ใน Environment Variable

ให้ copy ไปเพิ่มเลย

รันเว็บไซต์

ขั้นตอนสุดท้าย คือ รันเว็บไซต์ โดยเข้าไปที่ path ของโปรเจค example เช่น helloworld แล้วรันคำสั่ง

$ webdev serve

รอจนเสร็จ จากนั้นเข้าไปที่ Chrome เข้า URL localhost:8080
ได้แล้วเว็บจาก Flutter

ลองดูโปรเจคอื่นๆบ้าง เช่น gallery ก็ให้รันคำสั่งตอนต้นใหม่ แล้วตามด้วย webdev serve จากนั้นตัว console นี้จะทำการรัน webserver จำลองขึ้นมา รันไปเรื่อยๆ แต่หากเราต้องการให้หยุด ให้กด Ctrl+C สองครั้ง

มาแล้ว ตัวเว็บของโปรเจค Gallery จะเป็นการแสดงตัวอย่าง Widget ต่างๆ

ลองกดดู Source ตัว body จะว่างเปล่า ทุกอย่างมาจาก JS ทั้งหมดเลย

จากนั้น ผมก็ลองนำโปรเจคเกมงูที่เคยเขียนไว้ใน Flutter มาลองรันดู โดย copy code มาทับใน example นี้ ซึ่งก็รันได้ เล่นได้ปกติ แต่ไอคอนปุ่มไม่มาแหะ

สรุป

Flutter Web เป็นจุดเริ่มต้นของการขยาย Platform ของ Flutter มาสู่ Web App ด้วย code base เดิม โดยใช้การแปลง dart เป็น javascript ซึ่งในตอนนี้ยังเป็นเพียง preview อยู่ ก็เลยได้แต่ลองเล่นคร่าวๆเท่านั้น ในอนาคตเราจะสามารถใช้ android studio พัฒนาแอปได้ทั้งหมดทั้ง web , mobile native , desktop นั่นเอง สุดยอดจริงๆ

เพิ่มเติม
https://github.com/flutter/flutter_web