Print
Details: Category: บทความ Flutter | Published: 11 January 2020 | Hits: 410

เรารู้อยู่แล้วว่า Flutter เขียน Website ได้ นอกจากจะ Deploy ไปเป็น Android และ iOS  แล้ว Flutter ยังทำ Website และ Desktop ได้ด้วย มาดูวิธี ทำ Website กันครับ

Screen Shot 2563 01 08 at 061941

สิ่งแรกเลย เปลี่ยน channel ไป dev ก่อน ด้วยคำสั่งนี่

flutter channel dev

Screen Shot 2563 01 08 at 062002

จะได้ ผลลัพธ์ แบบนี้ครับ

 Screen Shot 2563 01 08 at 062042

ต่อไปให้ เรา ใช้คำสั่งนี้

flutter upgrade

 เพื่อ upgrade version มาล่าสุดก่อน

Screen Shot 2563 01 08 at 062106

จะมีการ โหลด อะไร ? ยาวๆ แบบนี้ครับ

Screen Shot 2563 01 08 at 063235

ได้มาละ เวอร์ชั้นใหม่ ของ Flutter เรา

Screen Shot 2563 01 08 at 063738

ทีนี้มาตอนสำคัญละ ใช้คำสั่งนี่เพื่อ เปิดการใช้งาน การสร้าง Website บน Flutter

flutter config --enable-web

 Screen Shot 2563 01 08 at 063757

จะได้ ผลลัพธ์ เป็นแบบนี้ครับ

Screen Shot 2563 01 08 at 064056

ทีนี้ มาสเตอร์ จะลองสร้าง โปรเจ็ค Flutter ที่ Deploy ได้ทั้ง Android, iOS และ Website แบบนี้ครับ

flutter create --org com.flutterthailand -a kotlin -i swift flutterthailand

 Screen Shot 2563 01 08 at 064110

 รอจน Create Project Flutter เสร็จ

Screen Shot 2563 01 08 at 064126

ได้มาละ Project Flutter ที่ Deploy ได้ทั้ง Android, iOS และ Website

Screen Shot 2563 01 08 at 064156

มาสเตอร์ ลอง cd เข้าไปใน โฟวเตอร์ flutterthailand (ตัวโปรเจ็ค Flutter ที่เราทำเมื่อกี่นะ) จะเห็นว่า จะมี โฟวเตอร์ android, ios และ web ละ

Screen Shot 2563 01 08 at 064319

ที่นี่ มาสเตอร์ จะลอง ทดสอบว่า โค้ด Flutter ที่ได้เนีย รันบน Website ได้จริงๆ หรือไม่โดย ใช้คำสั่ง

flutter run -d chrome

 Screen Shot 2563 01 08 at 064338

จะเริ่ม สร้าง Website ละ

Screen Shot 2563 01 08 at 064422

จะมีการเปิด Chrome ขึ้นมา และได้ ผลลัพธ์ แบบนี้ครับ

Screen Shot 2563 01 08 at 064428

ส่วนนี่ ที่ Terminal หรือ cmd บน Windows เห็นไหม ? ครับ การสร้าง Website ด้วย Flutter ไม่ยากเลย ลองทำตามดูน่าจะได้ แต่ถ้าไม่ได้อย่างไร ? ลองเข้ามาเรียน คอร์ส สอน Flutter ต้วต่อตัว กับ มาสเตอร์ อึ่งได้ครับ มาสเตอร์ ยินดีต้อนรับ

ดูเพิ่มเติมที่

https://www.androidthai.in.th/private-project-android-flutter-course.html