Flutter เริ่มต้น Setup Flutter เตรียมตัวก่อนเขียนโค๊ด EP1

Sharing is caring!

บทความแรกนี้ สำหรับผู้เริ่มต้นอยกาที่จะเขียน Flutter โดยที่จะแนะนำการเตรียมความพร้อมของเครื่อง เช่น Android Studio , Emulators ,Dart SDK , Flutter SDK , VSCode เป็นต้น โดยเนื้อหาสำหรับบทความนี้จะพา setup บน Window OS (Win 10) ฉะนั้นตัวอย่างบางขั้นตอน Mac OS อาจจะทำไม่ได้

ขออภัยสำหรับผู้ที่เข้ามาอ่าน แต่ใช้งาน Mac ไว้ ณ ที่นี้

ดาวน์โหลดไฟล์ที่ต้องใช้ และติดตั้ง

1. ดาวน์โหลดไฟล์ที่ต้องใช้ และติดตั้ง
   1. Flutter SDK ดาวน์โหลด จะได้ไฟล์ flutter.zip ให้ unzip flutter.zip (copy path ไว้ต้องใช้ในขั้นตอน set android studio config) set environment variables ทำตามขั้นตอน ข่างล่าง
      1. เปิด search ของ window (มุมล่างขวา แว่นขยาย) พิมพ์ ‘env’ กดที่ “Edit Environment Variables for your account”
      2. เลือก “Advance System Setting” (สังเกตุเมนูลำดับที่ 4 ทางซ้ายมือของหน้าจอ)
      3. เลือก “Environment Variables…” (จะอยู่ล่าง ๆ ของหน้าจอ)
      4. จะมีให้ใส่ 2 แบบ คือ Variables for user , Variables for system จะเลือกทำที่ไหนก็ได้ขั้นตอนเหมือนกัน
         1. มองหา Variable Name ที่ชื่อว่า Path จากนั้นให้กดเลือก และกด Edit
         2. กด New เพื่อสร้าง เพิ่ม Flutter Environment เข้าไปใน Path (*ให้ระบุ path flutter/bin เช่น D:\dev\programs\flutter\bin) จากนั้นกด OK
      5. ทดสอบว่า command flutter สามารถเรียกใช้งานผ่าน command line ได้หรือยัง
         1. เปิด search พิมพ์ cmd เลือก “Command Promt” ให้พิมพ์ไปใน command ว่า “flutter doctor” ถ้ามีการแสดงข้อความ “
            “Doctor summary (to see all details, run flutter doctor -v): … ” แสดงว่า flutter พร้อมใช้งานแล้ว
2. Android Studio ติดตั้ง ทำตามขั้นตอนการ
   • ตรวจสอบ Adnroid SDK ปกติขั้นตอนการติดตั้งระบบให้ให้ download Android SDK ในขณะการติดตั้ง (อาจจะใช้เวลาดาวน์โหลด ตามความเร็ว internet ของแต่ละคน) แนะนำให้เลือกย้ายไฟล์ android sdk ไปที่ directory ที่มีขนาดพอสมควร เพราะไฟล์มี android sdk มีขนาดใหญ่
     • Files -> Settings -> Appearance & Behavior -> System Setting -> Android SDK -> Android SDK Location: {แก้เป็น Path SDK ที่ย้าย}

3. ติดตั้ง plugins flutter ,dart บน android studio

• เข้าไฟที่ File -> Settings -> Plugins -> Maketplaces
• ค้นหา flutter ติดตั้ง
• ค้นหา dart ติดตั้ง

4. ตรวจสอบการตั้งค่าของ flutter ด้วย $flutter doctor -v

$flutter doctor -v
Downloading Material fonts...                                    1,373ms
Downloading Gradle Wrapper...                                       72ms
Downloading package sky_engine...                                  350ms
Downloading flutter_patched_sdk tools...                            3.7s
Downloading flutter_patched_sdk_product tools...                    3.4s
Downloading windows-x64 tools...                                    6.1s
Downloading windows-x64/font-subset tools...                       672ms
[√] Flutter (Channel dev, 1.27.0-8.0.pre, on Microsoft Windows [Version 10.0.19041.804], locale en-US)
    • Flutter version 1.27.0-8.0.pre at D:\dev\programs\flutter
    • Framework revision b7d4806243 (5 days ago), 2021-02-19 09:22:45 -0800
    • Engine revision 6993cb229b
    • Dart version 2.13.0 (build 2.13.0-30.0.dev)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at D:\dev\programs\Android\Sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = D:\dev\programs\Android\Sdk
    • ANDROID_SDK_ROOT = D:\dev\programs\Android\Sdk
    • Java binary at: D:\dev\programs\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.1.0)
    • Android Studio at D:\dev\programs\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] IntelliJ IDEA Community Edition (version 2020.3)
    • IntelliJ at D:\dev\programs\IntelliJ
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart

[√] VS Code, 64-bit edition (version 1.53.2)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.19.0

[√] Connected device (2 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.190
    • Edge (web)   • edge   • web-javascript • Microsoft Edge 88.0.705.74

• No issues found!

ถ้า setting [√] ทุกประเภท แสดงว่าพร้อมใช้งานและ แต่ถ้าหากยังมี [X] อยู่ก็ให้แก้ไขให้ผ่านก่อน ซึ่งวิธีแก้ไขก็สามารถ ค้นหาได้จาก google หรือถ้ายังไม่สามารถแก้ไขได้ สามารถฝากคำถามไว้ในเม้นข้างล่างบทความนี้ได้เลยครับ