อัพเดทบทความใหม่ 15/6/2020
โดยวันที่เขียนบล็อกอยู่นี้ Flutter เวอร์ชัน 1.19.0-4.1.pre

ตอนนี้ Flutter ได้ merge Flutter Web เข้ามาที่ Repo หลักของ Flutter แล้ว เลยมาเขียนอัพเดทบทความใหม่ครับ

สวัสดีผู้อ่านครับ ของใหม่อีกอย่างของ 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 channel beta

อัพเกรด Flutter

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

$ flutter upgrade

เปิดใช้งาน config

$ flutter config --enable-web

ลอง Run

จากนั้นลอง create project เริ่มต้น เป็น Application project

 $ flutter create myapp
 $ cd myapp

หรือใน Android studio เพียงแค่ไปที่ File > New > New Flutter Project

แล้วลองพิมพ์ command นี้ใน terminal

$ flutter devices

จะมีรายละเอียดว่า มีอุปกรณ์อะไรรันได้บ้าง เช่น Chrome

หากใช้ Android Studio จะมีรายละเอียดขึ้นมาเลยว่า Chrome(Web)

ลองกด run เลยจ้า ก็จะเปิด Browser ขึ้นมา ได้แล้วง่ายเกิ๊น

ลองกดดู source จะพบมีแค่ js ไฟล์เดียว จบงานได้ เพราะมันคือการแปลง dart เป็น js แบบเท่ๆ

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

สรุป

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

เพิ่มเติม
https://flutter.dev/docs/get-started/web