Flutter

Framework สร้าง UI ของ mobile flatform ที่กำลังได้รับความนิยมมาก

Flutter จัดการ flutter SDK versions ด้วย fvm (Flutter Version Management) EP3

เมื่อไม่กี่วันที่ผ่านมา ทาง 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"
]
03/16/2021 by Flutter General 0

Flutter สร้าง Flutter Project แรก เริ่มต้นอย่างไร พร้อมทดสอบรันบน Emulator devices EP2

พาทุกคนมาเริ่มสร้าง 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 มีให้ด้วยคำสั่ง “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

03/11/2021 by Flutter General 0

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

บทความแรกนี้ สำหรับผู้เริ่มต้นอยกาที่จะเขียน 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 หรือถ้ายังไม่สามารถแก้ไขได้ สามารถฝากคำถามไว้ในเม้นข้างล่างบทความนี้ได้เลยครับ

02/25/2021 by Flutter General 0

คลังเก็บเรื่องราวต่าง ๆ

วงแหวนเว็บ

วงแหวนเว็บ