Part 1 :: สวัสดี Flutter ด้วยการติดตั้ง

เห็นมีการพูดถึงเยอะกับ Flutter เป็น open source platform สำหรับการพัฒนา mobile app แบบ cross platform ทั้ง Android และ iOS ด้วยภาษา Dart แน่นอนว่าส้รางโดยทีมของ Google นั่นเอง เมื่อไปอ่านเอกสารก็พบการขายของนิดหน่อยคือ

•  Look and Feel ของ app จะเหมือนกับ native เลย
• ประสิทธิภาพแจ่มมาก
• ได้รับแรงบันดาลใจมาจาก Reactive framework
• Debug ได้รวดเร็วมาก ด้วย hot reload นั่นคือ แก้ code ไปดูผลการทำงานไป
• สามารถเข้าถึง feature ต่าง ๆ ของแต่ละ platform ได้ เช่น battery และ GPS แต่ต้องเขียน code เฉพาะไป
• ที่ชอบคือ Flutter testing support ซึ่งใช้ทั้ง unit + mocking framework และ device testing ผ่าน Flutter Driver รวมทั้ง Widget testing ซึ่งทุกอย่างในหน้าจอจะเป็น widget ทั้งหมด ทำให้เราสามารถทดสอบ widget แต่ละตัวได้เลย น่าสนใจจริง ๆ

จริงหรือไม่ มาลองกันดีกว่า

ปล. Flutter ยังอยู่ในสถานะ beta นะ ดังนั้นอาจจะมีการเปลี่ยนแปลงครั้งใหญ่ได้ จะใช้ Flutter ก็ต้องศึกษาใหม่ รวมทั้งภาษา Dart ด้วย ความสามารถของภาษา Dart ยังไม่เท่าเทียวกับ Swift หรือ Kotlin นะ แต่ Dart 2 ก็ดีขึ้น สำหรับชาว Android นั้นสนับสนุน Android 4.1 ขึ้นไปนะ (Jelly Bean) สำหรับชาว iOS ก็ iOS 8 ขึ้นไป และไม่สนับสนุน device 32 bit ด้วยนะ

ขั้นตอนที่ 1 เริ่มต้นด้วยการติดตั้ง

สามารถติดตั้งได้ทั้ง Windows, MacOS และ Linux เลือกได้เลยจาก Get Started :: Install ผมติดตั้งบน MacOS นะ ต้องทำการ download Flutter SDK มีขนาด 621 MB ในตอนที่ติดตั้งเป็น version 0.5.1 beta จากนั้นทำการ extract และกำหนดในตัวแปร $PATH จะสามารถ run คำสั่ง Flutter ได้ใน command line ดังนี้ [code] $flutter [/code] จะบอกว่าสิ่งที่เราติดตั้งนั้นมัน out of date ดังนั้นทำการ update ซะ [code] $flutter upgrade [/code] จากนั้นจะทำการ upgrade และตรวจสอบให้ว่า ต้องทำการติดตั้งอะไรบ้าง ซึ่งตรงนี้ง่ายดี ทำให้เรารู้ว่าต้องทำอะไรบ้าง สามารถพิมพ์คำสั่งเองได้ด้วย (ให้หมอตรวจดูให้) [code] $flutter doctor -v [/code] จะทำการตรวจสอบสิ่งต่าง ๆ ดังนี้ให้

• Flutter SDK และผองเพื่อน เช่นภาษา Dart
• Android Toolchain ทั้ง Android SDK และ JDK
• iOS Toolchain ทั้ง Xcode, iOS-deploy และ Cocoapods
• Android Studio IDE ติดตั้งพวก plugin ให้ครบ
• IntelliJ IDEA ติดตั้งพวก plugin ให้ครบ
• VS Code ติดตั้งพวก plugin ให้ครบ
• การเชื่อมต่อกับ device หรือพวก Emulator

ปล. สำหรับใครที่ติดตั้ง JDK หลาย version แนะนำให้กำหนด JAVA_HOME ให้เป็น JDK 1.8 ไปเลย เอาแค่ Flutter, Android และ iOS Toolchain และ Device/Emulator/Simulator ให้ผ่าน ก็เพียงพอต่อการเริ่มต้นแล้ว

ผลการติดตั้งต้องเป็นประมาณนี้นะ [gist id="d1acc9b4941cc5a1bb30f4fe4fbdc2eb" file="result.txt"]

เพียงขั้นตอนแรกก็จัดว่าลำบากน่าดู !!

Issues ต่าง ๆ ของการติดตั้ง Flutter ก็เพียบนะ !!

• ปัญหาของ XCode
• Android unknown licence
• ปัญหาของ VS Code

เมื่อทุกอย่างพร้อม ก็เริ่มพัฒนา app กันเลย

[code] $flutter create hello $cd hello $flutter run [/code] ผลที่ได้คือ การสร้างและ run app บน device/simulator/emulator น่าจะพอไปวัดไปวาได้ สำหรับการเริ่มต้นกับ flutter แถมมีความสามารถให้ใช้งานเพียบ เช่น

• ทั้งการ capture หน้าจอด้วยการกดปุ่ม s
• ทั้งการดูลำดับชั้นของ element ในหน้าจอด้วยการกดปุ่ม i

แสดงการทำงานดังนี้

สำหรับคนเริ่มต้น เหนื่อยแน่นอน !! แต่ Keep claim and coding/learning

ไว้มาพัฒนา app ด้วย Flutter กันต่อไปใน part 2