Flutter เริ่มต้นดีก็ไปได้สวย หลังจากเริ่มประสบความสำเร็จในการรัน Flutter แรกได้สำเร็จเรามาดูกันเลย สิ่งที่เราต้องรู้จัก PATH อยู่ไหนเพื่อจะกำหนดค่าให้ ENV มองเห็น การติดต่อกับอุปกรณ์ Emulators, ตำแหน่งของโปรแกรม JAVA ,ตำแหน่งของ Android Studio SDK เป็นต้น ว่าเทคนิคขั้นตอนมันยุ่งยากมากอย่างไรกัน ขอบอกเลยว่ายุ่งยากมากของจริง
ขั้นตอนที่ 1 เป็นการติดตั้ง Flutter ก็ดาวน์โหลดตามลิงค์ที่แปะไว้ให้จากนั้น ก็แตกไฟล์ไปยังโฟลเดอร์ที่ต้องการ https://storage.googleapis.com/flutter_infra_release/releases/stable/windows/flutter_windows_2.2.2-stable.zip
ขั้นตอนที่ 2 ติดตั้ง Android Studio เพื่อให้โปรแกรม Flutter เชื่อมต่อกับ Android Studio และ Android toolchain
ขั้นตอนที่ 3 ติดตั้ง Visual Studio เพื่อให้โปรแกรม Flutter เชื่อมต่อกับ Visual Studio ได้ ขั้นตอนนี้ก็สำคัญและใช้เวลามาก ต้องเลือก Desktop C++ ขณะติดตั้ง
ขั้นตอนที่ 4 ติดตั้ง Emulator devices เพื่อติดต่อกับอุปกรณ์สำหรับทดสอบการทำงาน ขั้นตอนนี้ต้องใช้ Android Studio สร้างขึ้นมา และต้องไปกำหนดค่า Images แบบ Cold Boot ไม่เช่นนั้นจะมีปัญหาการติดต่อกับโปรแกรม Flutter
ทั้งหมดทั้งปวงก็ขอให้โชคดี สำคัญกว่านั้น Android Studio ไม่สามารถรันโปรแกรมทดสอบตามตัวอย่างได้ด้วย งานนี้ต้องพึ่งพา CLI ผสมกันไป
E:\Android\Projects>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, 2.3.0-17.0.pre.337, on Microsoft Windows [Version 10.0.19041.1052], locale th-TH)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.10.1)
[√] Android Studio (version 4.2.0)
[√] Connected device (4 available)
ขั้นตอนที่ 5 สร้างโปรแกรมแรกสำหรับทดสอบ Flutter กัน ไปเริ่มต้นที่ CLI ดีที่สุด
flutter create myapp
cd myapp
ขั้นตอนที่ 6 ก่อนจะรันโปรแกรมได้ ต้องไปเปิดใช้งาน Emulator ก่อน
flutter emulators
E:\Android\Projects\myapp>flutter emulators
1 available emulator:
Pixel_2_API_30 • Pixel 2 API 30 • Google • android
To run an emulator, run 'flutter emulators --launch <emulator id>'.
To create a new emulator, run 'flutter emulators --create [--name xyz]'.
ขั้นตอนที่ 7 การเรียกเปิดใช้งาน Emulator ต้องมือไวพอควร ในการเลือกอนุญาต Allow USB debugging? ทำไม่ทันก็ต้องกลับไปเริ่มต้นใหม่ สำคัญทีเดียวต้องกำหนด
อิมเมจที่จะเปิดใช้งานเป็นแบบ Cold Boot เท่านั้น หากตั้งแบบ Warm Boot รับรองปัญหาไม่รู้จักจบสิ้น ยืนยัน
flutter emulators --launch Pixel_2_API_30
ขั้นตอนที่ 8 ตรวจสอบว่ามี Emulators ตัวใดบ้างพร้อมทำงานได้
E:\Android\Projects\myapp>flutter devices
5 connected devices:
sdk gphone x86 (mobile) • emulator-5554 • android-x86 • Android 11 (API 30) (emulator)
Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19041.1052]
Windows (UWP) (desktop) • winuwp • windows-uwp-x64 •
Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.77
Edge (web) • edge • web-javascript • Microsoft Edge 91.0.864.48
ขั้นตอนที่ 9 บรรทัดบนสุดจะพบว่ามี sdk gphone x86(mobile) พร้อมใช้งาน แต่การจะเรียกใช้ได้ต้องใช้คอลัมภ์ที่ 2 เลือก "emulator-5554" แล้วเริ่มรันโปรแกรมกันเลย
flutter run -d "emulator-5554"
จากนั้นจะเห็นผลลัพธ์ของโปรแกรมตัวอย่าง ตามรูปแรกที่แสดงนี้เลย ฟังดูเหมือนง่าย ๆ แต่ไม่ง่ายเวลาทำจริง แต่อย่างไรก็แล้วแต่ ปัญหาที่ผู้เขียนพบเจอก็คืออย่าพยายามใช้การรันบนเครื่องมือ Android Studio เด็ดขาด หมดเวลาไปตามแก้หลายๆ วันก็ไม่สำเร็จ รันบนคอมมานไลน์ ง่ายๆ รวดเร็ว สำเร็จแน่นอนครับ สุดท้ายฝากแนะนำเวบไซต์ Toyota Majesty เช่า ขับเอง ได้บริการดีๆ จากแวนวีไอพี เตรียมเอกสารเพียงแค่ บัตรประชาชน ใบขับขี่และบัตรเครดิต จะเดินทางไปไหนเป็นหมู่คณะสะดวกปลอดภัย
ไม่มีความคิดเห็น:
แสดงความคิดเห็น