Thursday, April 9, 2020

เตรียมพร้อมระบบสำหรับเขียน Flutter ด้วย Visual Studio Code บน Ubuntu 18.04

  • ประเด็นคือหัดเขียน Flutter ได้สักพักเล็กๆ แล้ว แต่ติดตั้ง Environment ไม่เป็น
  • พอดีลงระบบ Ubuntu ใหม่อีกรอบเลยขอเก็บรายละเอียดการตั้งค่าเตรียมความพร้อมเขียน Flutter ด้วย VSCode บน Ubuntu ซะหน่อย
ระบบที่ใช้สำหรับตั้งค่าตามขั้นตอนด้านล่างคือ
  • Ubuntu 18.04.4
ติดตั้งโปรแกรมที่จำเป็นต้องใช้ 
Java (repo ระบบมี java 8 กับ 11 ให้เลือกหว่า เลือก 11 แล้วกัน)
$ sudo apt install openjdk-11-jdk
GIT
$ sudo apt install git
Android SDK (คอนฟิกเกี่ยวกับการแปลงโค้ด dart ไปเป็น native ของ android มันถ้าผมไม่มั่วนะ)
  • มันจะมีอยู่ใน Android Studio ฉนั้นเราต้องลงตัว Android Studio 
  • ติดตั้งผ่าน Ubuntu Software 
  • ตั้งค่าให้ Flutter ใช้งานได้โดยไปที่ Configure -> Setting
  •  Android SDK -> SDK Tools -> Uncheck "Hide Obsolete Packages" -> Check "Android SDK Tools (Obsolete)" และ OK
Visual Studio Code (เราจะใช้ตัวนี้แหละเขียน Flutter)
  • ติดตั้งผ่าน Ubuntu Software 
Flutter SDK
  • ไปดาวน์โหลดได้จากเว็บเค้าเลย https://flutter.dev/docs/get-started/install/linux ซึ่งเราจะได้ไฟล์ tar.xz  มา ณ ขณะนี้จะเป็นไฟล์นี้
https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_v1.12.13+hotfix.9-stable.tar.xz
  • ผู้เขียนจะวางไฟล์ที่โหลดมาไว้ที่ home ของ user ปัจจุบันแล้วกัน
  • จากนั้นแตกไฟล์ด้วยคำสั่งประมาณนี้
$ tar xf ~/flutter_linux_v1.12.13+hotfix.9-stable.tar.xz
  • เราจะเห็น folder ชื่อว่า flutter 
Set path
  • เพิ่มพาธให้ระบบรู้จักคำสั่ง flutter ซะหน่อยซึ่งในที่นี้จะเพิ่มเฉพาะของ user ปัจจุบันเท่านั้น
  • เปิดไฟล์ด้วยคำสั่งนี้
$ nano ~/.bashrc
  • เพิ่มคำสั่งประมาณนี้ไปต่อท้ายในไฟล์ (jui คือชื่อ user)
export PATH="$PATH:/home/jui/flutter/bin"
  • บันทึกไฟล์ และ Logout - Login ใหม่อีกรอบ
ตรวจสอบความพร้อม Flutter ใช้งานได้หรือยัง
$ flutter doctor 
  • มันขึ้นแจ้งปัญหา ประมาณยังไม่มี lincenses ประมาณนี้แหละ ใช้คำสั่งนี้
$ flutter doctor --android-licenses
  • ในกรณีเราจะใช้คำสั่ง --android-licenses แล้ว error เราไปตั้งค่า Android SDK ผ่าน Configure ของ Android Studio ก่อน
  • ทดสอบ flutter doctor อีกรอบ 
  • ในที่นี้ผู้เขียนต่อสาย USB กับโทรศัพท์และเปิด Debug mode เรียบร้อย
  • ถ้าทุกอย่างเรียบร้อยก็จะได้ประมาณนี้ 
  • เปิด VSCode แล้วไปที่เมนู View -> Command Palette... พิมพ์ Flutter: New Project
  • ตั้งชื่อ Flutter Project และเลือกพาธวาง เป็นอันเรียบร้อย
  • หรือสร้าง flutter project ผ่าน terminal ด้วยคำสั่ง
$ flutter create project_name
Ref
  • https://flutter.dev/docs/get-started/install/linux#get-sdk
  • https://medium.com/@jitihn/flutter-setup-in-ubuntu-vs-code-93771dc2e19
  • https://www.techomoro.com/how-to-install-and-setup-flutter-on-ubuntu-18-04-1-lts-bionic-beaver/
  • https://www.digitalocean.com/community/tutorials/how-to-install-git-on-ubuntu-18-04-quickstart
  • https://github.com/flutter/flutter/issues/16280

No comments:

Post a Comment