ลองสร้างแอพพลิเคชั่นตัวแรกด้วย Flutter 🐦
ทดลองเขียนแอพพลิเคชั่นด้วย Flutter
การสร้างแอพพลิเคชั่นนั้นอาจจะเป็นเรื่องยากสำหรับหลาย ๆ คน เพราะในการพัฒนาแอพพลิเคชั่นขึ้นมา เราอาจจำเป็นต้องเรียนรู้ภาษาโปรแกรมมิ่งมากกว่าหนึ่งภาษา จำเป็นต้องเรียนรู้เครื่องไม้เครื่องมือที่เหมาะสมสำหรับการพัฒนาบนอุปกรณ์แต่ละอุปกรณ์
ปัจจุบันนั้นการพัฒนาแอพพลิเคชั่นนั้นง่ายขึ้นมาก ด้วยการมาของเฟรมเวิร์คอย่าง React Native, Ionic หรือ Flutter ซึ่งช่วยให้เราสามารถพัฒนาแอพพลิเคชั่นที่สามารถใช้งานได้บนหลากหลายอุปกรณ์จากโค้ดชุดเดียว
ตัวที่ผมเลือกมาทดลองในครั้งนี้คือ Flutter เป็นผลมาจากการประกาศเปิดตัว Flutter 3
ซึ่งสิ่งที่ผมสนใจมากที่สุดคือการประกาศการซัพพอร์ต Linux และ Mac อย่างเป็นทางการ ทำให้ตอนนี้ Flutter กลายเป็นหนึ่งในเฟรมเวิร์คที่รองรับการเขียนแอพพลิเคชั่นแบบ Cross-platform ที่ครอบคลุมที่สุดไปแล้ว
Flutter คืออะไร
Flutter เป็น framework ของภาษา dart จุดประสงค์เพื่อให้นักพัฒนาสามารถสร้างแอพพลิเคชั่น ที่รองรับหลากหลายอุปกรณ์ไม่ว่าจะเป็น web, smart phone หรือ desktop จากโค้ดชุดเดียว
Flutter จะมีแนวคิดคล้ายกับ React คือ declarative UI หรือหมายถึงสถานะของ UI จะขึ้นอยู่กับ state ของแอพพลิเคชั่นในตอนนั้น
ผลสรุปการทดลองใช้
เป็นการสรุปโดยเน้นไปที่หัวข้อสำคัญและความสามารถโดยรวม การสรุปของผมอาจช่วยให้เริ่มต้นหรือเข้าใจ Flutter ได้ดีขึ้น แต่หากสนใจจะเริ่มเขียนแอพพลิเคชั่นอย่างจริงจังแนะนำให้เริ่มที่ flutter.dev ได้เลยครับ 🚀
การติดตั้งเครื่องมือ
Documentation ของ Flutter ได้เขียนวิธีการติดตั้งสำหรับแต่ละแพลตฟอร์มไว้ละเอียดมาก มือใหม่ก็น่าจะเข้าใจได้ไม่ยาก
ใช้คำสั่ง flutter doctor เพื่อตรวจสอบว่าเราขาดแพคเกจส่วนไหนไปไหมในการพัฒนาแอพพลิเคชั่นด้วย Flutter
หากเราไม่สนใจจะพัฒนาแอพพลิเคชั่นสำหรับ Android เราไม่จำเป็นต้องติดตั้ง Android Studio ก็ได้
การสร้างโปรเจคครั้งแรก
พิมพ์คำสั่ง flutter create <project_name>เพื่อเริ่มสร้างโปรเจค
โครงสร้างไดเรกทอรี่ของโปรเจคจะมีลักษณะประมาณนี้ ซึ่งส่วนตัวเห็นครั้งแรกก็รู้สึกอึดอัดเหมือนกัน มีไฟล์อะไรเยอะไปหมด ต้องปรับอะไรเยอะไหมนะ
.
..
linux/
macos/
windows/
test/
lib/
pubspec.lock
pubspec.yaml
analysis_options.yaml
project.imlแต่จริง ๆ ส่วนที่เราจะเข้าไปแก้ส่วนมากจะอยู่ภายใต้ lib/ ซึ่งคือแหล่งรวมไฟล์ UI นั่นเอง
แต่จริง ๆ ก็ยังดูน่าอึดอัดน้อยกว่าของ React Native นะครับ 🤣
Developer experience (DX)
เราสามารถรันโปรเจคได้ทันทีโดยใช้คำสั่ง flutter run
ยกตัวอย่างหากต้องการรันโปรเจคบน Linux ก็ใช้คำสั่ง flutter run -d linux เราสามารถแก้ไขโค้ดและดูผลลัพท์ได้ทันทีโดยไม่ต้องรีสตาร์ทแอพพลิเคชัน
การ debug ก็ทำได้อย่างลื่นไหลด้วยเครื่องมือที่ Flutter มีให้ ช่วยให้การพัฒนาง่ายขึ้นอย่างมาก
Stateless Widget
ทุกส่วนของแอพพลิเคชั่นคือ Widget ที่ประกอบกันกลายเป็นแอพพลิเคชั่นขึ้นมา
Widget จะมีความคล้ายคลึงกับ Component ของทางฝั่ง React (Native) เลย
ตามตัวอย่าง Widget HelloWorld จะเรนเดอร์ Widget Row ซึ่งภายในก็เรนเดอร์ Text และ ByeWorld ตามลำดับ
สำหรับ Widget Row และ Text เป็น Widget ที่แถมมากับ Flutter ความสามารถตามชื่อเลย คือ Row จะแสดง Widget ที่เราเลือกเป็นแถว ส่วน Text จะเรนเดอร์ข้อความออกมา
เป็นหนึ่งในเรื่องที่ต้องชื่นชมทีมนักพัฒนา Flutter คือเรื่องการกำหนดชื่อ การเขียน Documentation สามารถเข้าใจได้ในทันที แทบไม่ต้องเปิดเว็บเบราเซอร์เพื่อหาคู่มือเลย
Stateful Widget
Stateless Widget ตามที่ได้เขียนมาข้างบนนั้นมีข้อจำกัดคือ ไม่สามารถเก็บสถานะ (state) เป็นของตัวเองได้ นั่นหมายถึง Stateless Widget จะเรนเดอร์ตามข้อมูลที่ได้รับมาเท่านั้น
ยกตัวอย่างหากเราต้องการทำแอพพลิเคชั่นนับเลข (counter) เราจำเป็นต้องสร้าง state เพื่อเก็บตัวเลขปัจจุบัน จากนั้น Widget จึงเรนเดอร์ตาม state ปัจจุบัน เมื่อ state ถูกอัพเดธ Widget ก็จะรีเรนเดอร์โดยอัตโนมัติ
Widget Counter เรนเดอร์ข้อความที่แสดงตัวเลขปัจจุบัน และปุ่มที่เมื่อกดก็ให้อัพเดธ state โดยการเรียก setState
หากต้องการตรวจสอบการอินพุต เช่น เมื่อมีการกดเกิดขึ้น สามารถใช้ Widget GestureDetector ได้
Material Design
สำหรับ Flutter จะมาพร้อมกับ Material Design ซึ่งเป็น design system ของ Google ซึ่งช่วยให้การออกแบบเว็บหรือแอพพลิเคชั่นเป็นระบบมากขึ้น
ในเฟรมเวิร์คจะมาพร้อมกับ Widget มากมายเพื่อช่วยให้การสร้างแอพพลิเคชั่นนั้นง่ายและสะดวกขึ้น อย่างเช่น TextField เพื่อสร้างฟอร์ม หรือ ElevatedButton เพื่อสร้างปุ่ม
Build
เมื่อแอพพลิเคชั่นพร้อมใช้งานแล้ว ก็สามารถ build ให้ผู้อื่นใช้งานได้ทันทีโดยใช้คำสั่ง flutter build
ยกตัวอย่างหากต้องการสร้างแอพพลิเคชั่นสำหรับ Linux สามารถใช้คำสั่ง flutter build linux ซึ่งผลลัพท์จะอยู่ภายในไดเรกทอรี่ build/linux/
สำหรับบางแพลตฟอร์มอาจมีขั้นตอนเติมเพิ่ม เช่นการรับรองตัวแอพพลิเคชั่นก่อน (Application Signing) นำไปเผยแพร่
สรุป
Flutter เป็นเฟรมเวิร์ค ที่ช่วยให้การพัฒนาแอพพลิเคชั่นข้ามแพลตฟอร์มนั้นง่ายขึ้น ด้วยเครื่องมือที่พร้อมและทันสมัย
โครงการ Flutter ยังเป็นโครงการโอเพนซอร์สอีกด้วย เปิดโอกาสให้นักพัฒนาเข้าไปช่วยกันพัฒนาเพื่อให้เป็นเฟรมเวิร์คที่แข็งแกร่งยิ่งขึ้น
Flutter ค่อนข้างจะพร้อมใช้งานสำหรับพัฒนาแอพพลิเคชั่นจากต้นจนจบด้วยตัวเอง ด้วย library ที่พร้อมรองรับ use case ต่าง ๆ ซึ่งต่างกันกับ React Native ซึ่งค่อนข้างต้องพึ่ง third-party library เป็นส่วนมาก
ข้อเสียของ Flutter สำหรับผมคือบางครั้งก็ต้องเขียน boilerplate มากเกินไป อย่างเช่นการสร้าง state จำเป็นตัวสร้าง class ถึงสองตัว ต่างกับ React ที่แค่เพียงประกาศ useState ก็พอแล้ว (แต่ IDE มี snippet รองรับก็ช่วยได้เยอะ)
(แถม) ตัวอย่างแอพพลิเคชั่น
แอพพลิเคชั่นที่ผมทดลองสร้างคือแอพพลิเคชั่นจัดการรูปภาพ โดยเราสามารถกดเลือกรูปภาพเพื่อนำเข้า แสดงรายการรูปภาพที่มี สามารถแก้ไขหรือลบข้อมูลได้
เป็นแอพพลิเคชั่นเฉพาะทาง อธิบายความสามารถเชิงลึกอาจจะยาก แต่ซอร์สโค้ดอาจจะเป็นประโยชน์กับหลาย ๆ คน จึงนำมาแบ่งปันครับ ❤️
สามารถเข้าไปดูซอร์สโค้ดได้ที่ Repository นี้
