flutter

เมื่อไม่กี่วันที่ผ่านมา ทาง google ได้ประกาศ flutter 2 เป็น stable version แล้ว ซึ่งจะสามารถ run ใช้งานที่ platform web ได้แบบสมบูรณ์ ทำให้นักพัฒนาเกิดความอยากได้อยากลองที่จะ upgrade flutter version จากเดิมเวอร์ชั่น 1.22.6 สุดท้าย ขยับไปเป็น 2.0.1 ซึ่งแน่นอนว่า โปรเจคเก่า ๆ ที่พัฒนาไว้แล้ว บางโปรเจคจะไม่สามารถรันที่ flutter version 2 ได้ (เวอร์ชัน 2 จะ deprecated บาง feature จะไม่สามรถทำงานได้ที่ เวอร์ชั่น 2)

สำหรับการที่จะทำการติดตั้ง flutter ทั้ง เวอร์ชัน 1 และ 2 ในเครื่องเดียว พร้อมทั้ง set FLUTTER_HOME เพื่อให้ editor ต่าง ๆ เช่น VSCode ,Android Studio ให้สามารถเข้าถึง path flutter ได้ ก็ไม่สะดวกในการที่จะใช้งาน

FVM (Flutter Version Management: A simple cli to manage Flutter SDK versions.)

cli ที่จะช่วยที่นักพัฒนาเลือกใช้ flutter sdk ได้สะดวก และง่ายยิ่งขึ้นด้วยการ สลับ sdk version ง่าย ๆ ใน command เดียว

คุณสมบัติของ FVM

• กำหนดค่าและใช้เวอร์ชัน Flutter SDK ต่อโปรเจ็กต์
• ความสามารถในการติดตั้งและแคช Flutter SDK หลายเวอร์ชัน
• สลับระหว่างช่องและเวอร์ชันของ Flutter ได้อย่างรวดเร็ว
• พาธ dynamic SDK สำหรับการสนับสนุนการดีบัก IDE
• กำหนดค่าเวอร์ชัน FVM พร้อมโปรเจ็กต์เพื่อความสอดคล้องกันระหว่างทีมและสภาพแวดล้อม CI
• ตั้งค่าเวอร์ชัน flutter sdk global ในโปรเจ็กต์ต่างๆ

ติดตั้ง FVM

• ติดตั้งผ่าน pub (package manager for the Dart programming language)

$ pub global activate fvm

*** Window OS ให้ทำการ set environment PATH \Users\poolsawat\AppData\Local\Pub\Cache\bin เพื่อให้สามารถเรียก fvm cli แบบ global ได้

• fvm help เช็ค options ต่างๆ

$ fvm help
Flutter Version Management: A cli to manage Flutter SDK versions.

Usage: fvm <command> [arguments]

Global options:
-h, --help       Print this usage information.
    --verbose    Print verbose output.

Available commands:
  config     Set configuration for FVM
  flutter    Proxies Flutter Commands
  install    Installs Flutter SDK Version
  list       Lists installed Flutter SDK Version
  releases   Lists Flutter SDK releases.
  remove     Removes Flutter SDK Version
  use        Which Flutter SDK Version you would like to use
  version    Prints the currently-installed version of FVM

Run "fvm help <command>" for more information about a command.

• fvm list แสดงเวอร์ชัน flutter sdk ทั้งหมด

PS C:\WINDOWS\system32> fvm list
Versions path:  \Users\poolsawat\fvm\versions
2.0.1
1.22.6

• fvm releases แสดง flutter sdk versions ที่สามารถ donwload มาใช้งานได้

$ fvm releases
Feb 27 18  │ v0.1.6
...
Jan 25 21  │ 1.22.6
Mar 3 21   │ 2.0.0
Mar 3 21   │ 2.0.0
Mar 3 21   │ 2.1.0-10.0.pre
Mar 4 21   │ 2.0.1
Mar 4 21   │ 2.0.1
--------------------------------------
Mar 12 21  │ 2.0.2             stable
--------------------------------------
--------------------------------------
Mar 13 21  │ 2.1.0-12.1.pre    dev
--------------------------------------
--------------------------------------
Mar 15 21  │ 2.0.2             beta
--------------------------------------

• fvm install 2.0.2 ติดตั้ง flutter sdk เวอร์ชัน 2.0.2

$ fvm install 2.0.2
Installing version: 2.0.2
Cloning into '\Users\poolsawat\fvm\versions\2.0.2'...
remote: Enumerating objects: 286632, done.
remote: Total 286632 (delta 0), reused 0 (delta 0), pack-reused 286632
Receiving objects: 100% (286632/286632), 131.73 MiB | 9.98 MiB/s, done.
Resolving deltas: 100% (220826/220826), done.
Checking out files: 100% (5202/5202), done.
Version installed: 2.0.2
Checking Dart SDK version...
Downloading Dart SDK from Flutter engine ...
Building flutter tool...
Running pub upgrade...
Flutter 2.0.2 • channel unknown • unknown source
Framework • revision 8962f6dc68 (4 days ago) • 2021-03-11 13:22:20 -0800
Engine • revision 5d8bf811b3
Tools • Dart 2.12.1

• fvm use 2.0.2 เลือกใช้งาน flutter sdk เวอร์ชัน 2.0.2

$ fvm use 2.0.2
Project now uses Flutter: 2.0.2

• fvm remove 2.0.2 ลบ flutter sdk เวอร์ชัน 2.0.2

$ fvm remove 2.0.1
Removing 2.0.1

• fvm config –cache-path D:\newpath\fvm\versions แก้ไข path cache ใหม่ กรณีจะย้ายจาก drive c ไป drive อื่น

$ fvm config --cache-path D:\newpath\fvm\versions

• fvm flutter run เพื่อ รัน code ด้วย flutter sdk ที่เลือก

$ fvm flutter run

ตั้งค่าการใช้งานบน IDE VSCode

ให้เปิด settings.json (Ctrl + Shift + P)

"dart.flutterSdkPaths": [
     "/Users/poolsawat/fvm/versions"
]

พาทุกคนมาเริ่มสร้าง Flutter Project แรกมีขั้นตอนอย่างไร บทความนี้จะพาทุกคนมาเริ่มทำการ create flutter starter project ที่ทาง flutter สร้างระบบ counter ง่าย ๆ มาให้ได้ลองเล่นกัน ด้วยเครื่องมือ VSCode ที่เป็นเครื่องมือที่กำลังได้รับความนิยมอยู่ในตอนนี้ มาเริ่มกันเลย

เริ่มสร้าง Counter Flutter Project ง่าย ๆ

• เปิด Visual Studio Code
• เปิด Command Pallette (Ctrl + Shift + P) และพิมพ์ “flutter ” เลือก “Flutter: New Application Project”

• จะมีการให้เลือกที่เก็บ Project จากนั้น ระบบจะให้ตั้งชื่อ Project ก็ตั้งตามที่ต้องการ ตัวอย่างจะตั้ง “counter_app” รอสักครู่…

• เปิด emulators ด้วยคำสั่ง “‘flutter emulators –launch <emulator id>” (<emulator id> คือ id emulator ที่เราสร้างไว้)
  • “flutter emulators” แสดง emulators ทั้งหมดที่เคยสร้าง (ขั้นตอนการสร้าง emulators ผ่าน android studio)
  • “flutter emulators –launch Pixel_C_API_30” รอ start emulator สักครู่

• สั่งรันโค๊ดตัวอย่างที่ flutter มีให้ด้วยคำสั่ง “flutter run” หรือสั่ง run ผ่านไฟล์ lib/main.dart ด้วยปุ่ม Run

Flutter run key commands.
r Hot reload.
R Hot restart.
h Repeat this help message.
d Detach (terminate “flutter run” but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on sdk gphone x86 arm is available at: http://127.0.0.1:53236/Vgi_F0zG2PU=/

สรุปท้ายบทความ

ขั้นตอนต่าง ๆ จากบทความนี้เป็นการทดสอบสร้างบท environment ของผู้เขียนที่ได้ทำการตั้งค่า flutter sdk , dart sdk, android sdk เรียบร้อยแล้ว หากเพื่อน ๆ คนใดยังไม่ได้ติดตั้งโปรแกรม หรือไลบารี่เหล่านี้ให้ทำการติดตั้งให้เรียบร้อย จากบทความนี้นะครับ Flutter เริ่มต้น Setup Flutter เตรียมตัวก่อนเขียนโค๊ด EP1