เริ่มต้นใช้งาน Flutter พัฒนา Nativiely Compiled Apps เบื้องต้น

เขียนเมื่อ 4 ปีก่อน โดย Ninenik Narkdee
android sdk flutter android

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ android sdk flutter android

ดูแล้ว 10,731 ครั้ง


เราสามารถทำความรู้จัก หรือค้นหาว่า Flutter ที่่เรากำลังจะศึกษา
ว่าคืออะไร ใช้ทำอะไร ได้ด้วยคำค้น "Flutter คืออะไร" หรือสามารถดูรายละเอียด
ที่เว็บไซต์หลักได้ที่ https://flutter.dev/
    ในที่นี้เราจะทำการศึกษา และพัฒนา App จาก Flutter ผ่าน windows ดังนั้นแนวทางที่จะแนะนำ
จะเป็นแนวทางการใช้งานสำหรับ windows ทั้งหมด
 
 

    การติดตั้ง Flutter

    เราสามารถทำการติดตั้ง Flutter ใน windows โดยทำตามแนวทางตามลิ้งค์ด้านล่าง
    

    ความต้องการระบบ

  • OS: Windows 7 SP1 หรือใหม่กว่า (64-bit)
  • พื้นที่: 400 MB ขึ้นไป
  • เครื่องมือ: สำหรับการใช้งาน command line โดยใช้
    •     Windows PowerShell 5.0 หรือใหม่กว่า (มีติดตั้งมาให้แล้วใน Windows 10)
    •     Git เวอร์ชั่น 2.x สำหรับ Windows ที่สามารถเรียกใช้งาน คำสั่ง git ผ่าน command line ใน windows ได้
 
 

    ติดตั้ง Flutter SDK

    ในที่นี้เราจะทำการติดตั้ง Flutter SDK ไว้ในโฟลเดอร์ dev ใน Drive C: สามารถใช้โฟลเดอร์อื่นๆ หรือตำแหน่ง
ที่จะติดตั้งอื่นได้ตามต้องการ แต่ห้ามติดตั้งไว้ใน C:/Program Files/
    ไปที่ path โฟลเดอร์ที่เราจะติดตั้ง ผ่าน command line แล้วใช้คำสั่ง
 
git clone -b stable https://github.com/flutter/flutter.git
 
    จะได้เป็น
 
 

 
 
    กด Enter รันคำสั่ง และรอจนกว่าจะทำการดาวน์โหลด Flutter SDK สำเร็จ
 
    หลังจากทำการดาวน์โหลด Flutter SDK เรียบร้อยแล้ว เราจะได้โฟลเดอร์ ของ Flutter SDK ชื่อ flutter 




 
ให้เราเปิดเข้าไปในโฟลเดอร์นั้น แล้วหาไฟล์ที่ชื่อ flutter_console.bat แล้วให้ทำการรันไฟล์ โดยเปิดไฟล์นั้นขึ้นมา
เพื่อให้ทำงาน จะได้เป็นดังนี้
 
 


 
 
    หน้าต่าง Flutter Console เป็นส่วนที่เราสามารถใช้คำส่ง Flutter command ได้ อย่างไรก็ตาม เราไม่จำเป็นต้องเปิดไฟล์
flutter_console.bat ทุกครั้งที่ต้องการใช้งาน คำสั่ง flutter ก็ได้ โดยเราจะใช้งานคำสั่ง Flutter ผ่าน หน้าต่าง Command Prompt
หรือ PowerShell แทน ดังนี้
 
    ให้เข้าไปกำหนด Path โดยไปที่ ปุ่ม Start ไปที่ค้นห้า แล้วพิมพ์ "Edit environment variables for your account" เมื่อขึ้นรายการ
แสดง ให้คลิกเข้าไป จะขึ้นหน้าต่าง "Environment Variables" ให้กำหนด Path ของ flutter SDK เข้าไปในลักษณะดังรูปด้านล่าง
 
 

 
 
    เนื่องจากคำสั่ง command line ของ Flutter SDK ของเราอยู่ใน Path C:\dev\flutter\bin ก็ให้กำหนดค่าไปดังรูป แล้วกด OK
 
 
    ทดสอบการใช้งานโดยปิด และเปิด หน้าต่าง Command Prompt หรือ PowerShell เพื่อเรียกใช้งานใหม่อีกครั้ง
จากนั้นเรียกใช้งานคำสั่ง flutter doctor
 
 

 
 
C:\dev\flutter> flutter doctor
 
    หลังจากใช้คำสั่ง flutter doctor จะทำให้เราทราบว่า มีส่วนใดบ้าง ที่เราต้องติดตั้งเพิ่มเติม สำหรับเริ่มต้นการพัฒนาด้วย Flutter
ตัวอย่างผลลัพธ์ที่แจ้ง ตามรูปดังนี้
 
 

 
 
    จากการตรวจสอบข้างต้น จะเห็นว่า เราต้องทำการติดตั้ง Android SDK หรือหากติดตั้งแล้ว ต้องทำการกำหนด Path ให้สามารถ
เรียกใช้งาน Android SDK ได้  นอกจากนั้นก็ยังมี เราต้องทำการติดตั้ง Android Studio และติดตั้ง Flutter Plugin กับ Dart Plugin
เพื่อให้สามารถทำงานได้  รวมถึงตัวโปรแกรมที่ใช้ในการเขียนโค้ดอย่าง Visual Studio Code หรือ VS Code เราต้องทำการติดตั้ง Flutter
Extension ให้พร้อมใช้งานด้วย และคำแนะนำสุดท้ายคือ เรายังไม่ได้มีการเชื่อมต่ออูปกรณ์มือถือ สำหรับทดสอบ Flutter หรือยังไม่มีการ
สร้าง Emulator Device สำหรับจำลองการใช้งาน
    ทั้งหมดข้างต้น คือสิ่งที่คำสั่ง flutter doctor จะตรวจสอบความพร้อมให้กับเรา  เราสามารถทำการแก้ไขตามคำแนะนำและเรียกใช้คำสั่ง
นี้เพื่อเตรียมความพร้อมก่อนเริ่มใช้งานได้ตลอดเวลา

 

    การติดตั้ง Android Studio

    สำหรับในขั้นตอนการติดตั้ง Android Studio สามารถดูแนวทางจากเนื้อหานี้ได้ http://niik.in/610

 

    การติดตั้ง Android SDK  และสร้าง Emulator Device

    สำหรับการติดตั้ง Android SDK และการสร้าง Emulator Device สำหรับทดสอบ App ดูจากเนื้อหานี้เป็นแนวทาง http://niik.in/613
ในส่วนถ้าเราได้ทำการติดตั้ง Android Studio เรียบร้อยแล้ว เราสามารถจัดการ Android SDK ดังนี้
    เปิด Android Studio ในหน้าต่าง Welcome เลือกตัวเลือก Configure ตามรูป
 
 

 
 

 
 
    ในหน้าจัดการ Android SDK ถ้าเราติดตั้งไว้แล้ว จะมีตำแหน่ง Path ของ Android SDK  ในรูปข้างต้น เราติดตั้งไว้ที่ C:/SDK


 

    การกำหนด Path ของ Android SDK 

     ดูแนวทางได้ที่บทความ http://niik.in/583
ในที่นี้ Android SDK เราติดตั้งไว้ที่ C:\SDK  เราสามารถเข้าไปเพิ่ม ตัวแปร และ Path ได้ดังนี้
        ให้เข้าไปกำหนด Path โดยไปที่ ปุ่ม Start ไปที่ค้นห้า แล้วพิมพ์ "Edit the system environment variables" เมื่อขึ้นรายการ
แสดง ให้คลิกเข้าไป จะขึ้นหน้าต่าง "Environment Variables" ให้กำหนดตัวแปร ANDROID_HOME และ Path ของ Android SDK 
เข้าไปในลักษณะดังรูปด้านล่าง
 
ANDROID_HOME
C:\SDK
 

 
 
ต่อไปเพิ่ม Path ทั้งสองค่าด้านล่างลงไปดังนี้
 
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools
 

 
 

    ติดตั้ง Flutter Plugin และ Dart Plugin

    ต่อไปให้ทำการติดตั้ง Flutter Plugin และ Dart Plugin ลงใน Android Studio ให้เรียบร้อย โดยในหน้า Welcome ของ
Android Studio ให้เลือกที่ Configure แล้วเลือก Plugins
    จากนั้น ค้นหา และติดตั้ง Flutter และ Dart Plugins ให้เรียบร้อย
 
 
 

 

    ติดตั้ง Flutter Extension ใน VS Ccode

    เปิด VS Code แล้วทำการติดตั้ง Flutter Extension ให้เรียบร้อย
 
 


 

    เชื่อมต่อกับมือถือ หรือเปิดใช้งาน Emulator 

    เราสามารถใช้มือถือ Android เชื่อมต่อกับคอมพิวเตอร์ผ่าน USB หรือจะใช้งาน Emulator ที่สร้างไว้แล้วก็ได้
ในที่นี้จะเปิดใช้งาน Emulator โดยในหน้า Welcome ของ Android Studio เลือก Configure แล้วเลือก AVD Manager
 
 


 
 
    ข้างต้นเราได้สร้าง  Android Virtual Device สำหรับเป็น Emulator ไว้แล้ว กดปุ่ม Play แล้วรอสักครู่

 
 



 
 
    ตอนนี้เราเตรียมทุกอย่าง น่าจะเรียบร้อยแล้ว  
    เรากลับไปตรวจสอบความพร้อม ผ่าน คำสั่ง flutter doctor ผ่าน command line อีกครั้ง อย่าลืมปิด และเปิด
หน้าต่าง command line ใหม่ ก่อนใช้งานคำสั่ง
 
 

 
 
    เมื่อใช้คำสั่ง ตรวจสอบแล้วพบว่า เรายังติดในส่วนของ Android SDK อยู่ โดยยังไม่ได้ทำการ
ตอบรับหรือยอมรับเงื่อนไขการใช้งานใน Android licenses และมีคำแนะนำสำหรับแก้ไข โดยใช้คำสั่ง
 
flutter doctor --android-licenses

 
    ให้เราพิมพ์คำสั่งข้างต้น เพื่อแก้ไขปัญหา จะขึ้นให้เราตอบตกลงโดยพิมพ์ y เพื่อตอบรับหรือ accept 
ให้เราพิมพ์ y ตามคำแนะนำไปเรือยๆ จนเสร็จขึ้นตอน  เสร็จแล้วลองใช้คำสั่ง flutter doctor อีกครั้ง
 
 

 
 
    เมื่อทุกอย่างเรียบร้อย ก็จะแสดงดังรูปด้านบน ตอนนี้เราพร้อมสำหรับการใช้งาน Flutter แล้ว


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ