web analytics

การติดตั้ง Flutter บน Windows

สวัสดีครับ ช่วงนี้กระแส Flutter แรงมาก วันนี้เลยถือโอกาสมาลองเล่น Flutter ครับ ซึ่งเป็นอีกเทคโนโลยีสำหรับทำ Cross Platform บทความนี้ก็จะพาไปติดตั้ง Flutter on Wondows ครับ แล้วถัดๆไปผมก็จะลองเล่น Flutter ตาม Tutorial ครับ มาลองทำกันเลย

ติดตั้ง Git

ถ้ายังไม่ได้ติดตั้งให้ดาวน์โหลด Git มาลง แล้วก็กด Next รัวๆ

https://git-scm.com/downloads

ติดตั้งเสร็จแล้ว เช้า cmd ดูเวอชัน Git โดยพิมพ์คำสั่ง

git --version

1

ดาวน์โหลด Flutter

ต่อไปก็ใช้ Git clone โปรเจค flutter ลงมา
ดังนั้นต้องไปสร้างโฟลเดอร์สำหรับเก็บ Flutter ก่อน แล้วเปิด cmd
cd ไปที่โฟลเดอร์นั้น แล้วใช้คำสั่ง

git clone -b master https://github.com/flutter/flutter.git

2

รอจนเสร็จ เราจะได้ไฟล์ Flutter มาแล้ว

12

กำหนด Flutter ใน ENV Path

ต่อไปเราจะกำหนดให้ Windows รู้จักกับ Path ของ Flutter
ใน Windows 10 ให้พิมพ์ envi แล้วก็เลือกอันแรก Edit the system environment variables

13

แล้วกดปุ่ม Environment Variable ด้านล่าง
กดไปที่ Path อันบน กด EDIT

แล้วกด New ให้ ใส่ path flutter ของเรา /bin ลงไป
เช่นของผม C:\Work\flutter\flutter\bin

9

อัพเกรด Flutter

ต่อมาก็มาเช็คสุขภาพของ flutter โดยมันจะเช็คเวอชันแล้วก็ดาวน์โหลดอะไรที่จำเป็น
ให้ดับเบิ้ลคลิกที่  flutter_console.bat

แล้วพิมพ์

flutter doctor

3

ติดตั้ง Plugin ใน Android studio

เนื่องจากเครื่องผมลง Android studio ไว้แล้ว เลยขอใช้ตัวนี้เขียนโปรแกรมเลย ใครยังไม่มีก็ดาวน์โหลดมาติดตั้งได้
ให้ไปที่เมนู Setting > Plugin > Browse Repositories

พิมพ์ว่า Flutter แล้วกดดาวน์โหลด
โหลดเสร็จก็ Restart โปรแกรม

4

มันจะมีเมนู New Flutter Project ขึ้นมาให้เลือก

5

แล้วก็จะมีประเภทโปรเจคให้เลือก กดเลือกได้เลย เลือกเป็น Flutter Application

6

ใส่ชื่อโปรเจค บลาๆ แล้วก็กำหนด Path ของ Flutter SDK ที่เรากำหนดไว้ข้างต้น ถ้ากำหนดผิดมันจะไม่ให้ไปต่อ
หรือจริงๆเราจะโหลด Flutter จากตรงนี้เลยก็ได้นะ ซึ่งมันก็โคลนมาจาก Git เหมือนกัน แต่ว่าตรงนี้มันไม่บอกสถานะดาวน์โหลด เหมือนรอไม่มีจุดหมาย เอาเป็นว่าใช้ Git clone เอาเองสบายใจสุด

7

รันแอป

จากนั้นก็จะได้โปรเจค Flutter เปล่าๆแบบนี้ แต่ว่าปุ่ม RUN จะยังกดไม่ได้

8

ให้เปิด Emulator ขึ้นมาก่อน

10

ทีนี้ปุ่มรันจะใช้งานได้ กดรันแล้วก็จะได้แอป Flutter Demo แอปแรก
ถ้ารันไม่ได้ก็ลองตรวจสอบ error เช่น มันบอกไม่เจอ Android SDK Build Tools 27.0.3
เราก็ดาวน์โหลดมาให้ตรง

11

จบแล้ว

การติดตั้งก็ง่ายอยู่นะ ตอนนี้ผมก็ยังเขียน Flutter ไม่เป็น จคงต้องใช้เวลาเรียนรู้อีกพักใหญ่

ตอนต่อไป มาลองทำความเข้าใจกับ Flutter Demo โปรเจคนี้ กันครับ

บันทึกการเรียน Flutter ของผม ตอนที่ 1