มาลองสร้าง Flutter App กันเถอะ
พรุ้งนี้จะมีงาน Flutter Dev Day ก็เลยคิดว่ามาลองเขียน Flutter App ดูก่อนไปงานดีกว่า จะได้เข้าใจมากขึ้นว่าเค้าพูดอะไรกัน ไม่ได้ไปแบบไม่รู้อะไรเลย ซึ่งทางทีมงานก็ได้ให้ link สำหรับไปเรียนที่ Udacity โดย Google แต่ด้วยระยะเวลา 2 weeks คงไม่ทันแน่ๆ ไว้วันกลังค่อยเรียนดีกว่า งั้นเลยมาลองทำ Flutter App ตาม Get Started น่าจะได้ concept คร่าวๆ ของ Flutter
เริ่มเลย!
ตามขั้นตอนของ Get Stated สิ่งที่เราจะได้เรียนรู้ คือ:
- ติดตั้ง Flutter Framework และ Dependency ต่างๆ
- สร้าง, รัน และ เปลี่ยนแปลง Flutter App แรกของเราดูว่าเป็นอย่างไรบ้าง
- เรียนรู้เกี่ยวกับ Concept หลัก ของ Flutter ตามขั้นตอน
- คำแนะนำสำหรับเรียนรู้ Flutter ต่อไป
ติดตั้ง
การติดตั้ง Flutter Framework ก็ขึ้นอยู่กับว่าเราใช้ OS ไหน ก็จะมีให้เลือกเป็น Windows , macSO หรือ Linux ก็เลือกตามสบายใจ ซึ่งผมจะติดตั้งบน macOS
- Download ไฟล์ Flutter SDK (macOS[flutter_macos_v0.5.1-beta.zip])
- แตกไฟล์ที download มาไปไว้ใน location ที่ต้องการ ผมจะเก็บไว้ใน /opt
- เพิ่ม
flutterไปยัง PATH ของเครื่อง (วิธีเพิ่ม PATH ชั่วคราวเท่านั้น)
$ cd ~/opt
$ unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip
$ export PATH=/opt/flutter/bin:$PATHลองรัน flutter doctor ในเครื่องดูเพื่อให้หมอตรวจสุขภาพเครื่องว่าเราขาดอะไร
$ flutter docter
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.6 17G65, locale en-TH)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.1)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio (version 3.1)
[✓] IntelliJ IDEA Community Edition (version 2018.1.6)
[!] VS Code (version 1.25.1)
[✓] Connected devices (1 available)ถ้ามีส่วนใหนที่ require ให้ลงเพิ่มเติมก็ให้ทำตามขั้นตอนที่ flutter doctor แนะนำให้มาเพื่อที่จะรัน flutter ในเครื่องไห้อย่างไม่มีปัญหา
ใช้ macOS ในการพัฒนา flutter จะมีข้อดีคือสามารถรันได้ทั้ง iOS และ Android ดังนั้นก็ต้องติดตั้ง XCode และ Android Studio (ถ้าติดตั้งไว้อยู่แล้วในขั้นตอนการใช้ flutter doctor จะแสดงว่าทุกอย่าง OK แต่ถ้าไม่ติดตั้งไว้จะฟ้องว่าต้องติดตั้งอะไรบ้าง)
ตั้งค่า VS Code
ในที่นี้ผมจะใช้ VS Code สำหรับเป็น Editor ดั้งนั้นก็จะต้องมาตั้งค่าให้ VS Code เราสามารถรัน flutter ได้ (ซึ่ง flutter สามารถใช้ Editor ตัวอื่นอย่างเช่น IntelliJ หรือ Android Studio ได้ด้วย)
- เปิด VS Code แล้วไปที่ Command Palette … (Shift+Command+P)
- พิมพ์ flutter ในช่องค้นกา และเลือก
Flutterและกด Install - หลังจากติดตั้ง
Flutterเสร็จเรียบร้อยแล้วก็ reload VS Code
เป็นอันเสร็จเรียบร้อย 👌🏻
ทดสอบระบบ
หลังจากที่ติดตั้งทั้งหมดแล้ว ก็ลองดูว่ามันใช้งานได้ไหม โดยการสร้าง Fletter App ซึ่ง New Project ของ Flutter จะสร้างโครง App ง่ายๆ มาให้แล้ว ดังนั้นเราสามารถรันได้เลย เพื่อดูว่าระบบของเราใช้งานได้ไหม
สร้างโปรเจ็คใหม่
- เปิด VS Code (ถ้าเปิดไว้แล้วก็ใช้ต่อได้เลย) ไปที่ Command Palette…
- พิมพ์ flutter และเลือก
Flutter: New Project - ใส่ชื่อของโปรเจ็ค ในที่นี้จะใช้ชื่อว่า myapp ก็จะใส่
myapp - และก็รอจนกว่า Flutter จะสร้างโปรเจ็คเสร็จ ก็จะมีโฟลเดอร์ใหม่ และ VS Code ก็จะเปิดอีกหน้าต่างของโปรเจ็คใหม่
ลองรัน App
- ไปที่ status bar ของ VS Code (สีฟ้าด้านล่างของหน้าต่าง VS Code)
- เลือก device จาก Device Selector ถ้าไม่มี device ให้เลือกแสดงว่ายังไม่มี Simulator จะต้องไปตรวจสอบการติดตั้ง XCode หรือ Android Studio ดู
- ไปที่ Debug > Start Debugging หรือกดปุ่ม F5
- รอ…….. สักพักเพื่อจะเปิด App
- ถ้าทุกอย่างทำงานได้ App จะเปิดบน Simulator แบบนี้!
ลอง hot reload
Flutter จะรองรับ fast development cycle ด้วย hot reload ที่สามารถ reload code ของ app ที่รันอยู่ใน Simulator โดยไม่ต้อง restart หรือ load app อีก ทำให้เราสามารถพัฒนา app ได้อย่างต่อเนื่อง ลองดูดีกว่าว่าจริงไหม
- เปิดไฟล์ lib/main.dart
- เปลี่ยนข้อความ
You have pushed the button this many times:เป็นYou have clicked the button this many times: - และ Save หรือ click ที่ Hot Reload (วงกลมสีเขียวด้านบนของ VSCode)
จะเห็นได้ว่าข้อความทีเราปลี่ยนไปใน VSCode จะเปลี่ยนบน Simulator ด้วย
สำเร็จแล้ว Flutter App แรก Cool!
ลองเขียน Flutter App แรกดู
ขั้นตอนนี้จะสอนเราให้เขียน Flutter App แรก หลังจากที่เราได้สร้างโปรเจ็คมาแล้วในขั้นตอนก่อนหน้านี้ โดยไม่ต้องมีพื้นฐานของ Dart มาก่อนเลย
โดยจะมีขั้นตอนย่อยดังนี้
- สร้าง Flutter App เบื้องต้น
- ใช้ package ภายนอก
- เพิ่ม stateful widget
- สร้าง scrolling ของ ListView
- เพิ่ม interactivity
- เปิดไปยัง screen ใหม่
- เปลี่ยน UI themes
สร้าง Flutter App เบื้องต้น
โดยเราสร้าง Flutter App มาแล้วในขั้นตอนก่อนหน้านี้ ดังนั้นเราสามารถใช้โปรเจ็คเดียวกันได้เลย
- แทนที่ไฟล์
lib/main.dartลบโค้ดเก่าทั้งหมด และแทนที่ด้วยโด้ดด้านล่างนี้ เพื่อจะแสดงข้อความHello Worldบนหน้าจอของ app
- รัน app จะได้หน้าจอของ app ดังนี้
ใช้ package ภายนอก
ขั้นตอนนี้เราจะลองใช้ open-source package ชื่อว่า english_words ซึ่งจะมีคำภาษาอังกฤษที่ใช่บ่อยเป็นพันคำ และจะมีฟังค์ชันต่างๆ สำหรับใช้งาน
- ในไฟล์
pubspec.yamlเพิ่ม english_words (3.1.0 หรือใหม่กว่า) ไปที่รายการ dependencies
- ใน VSCode ถ้ากด Save จะรัน
flutter packages getให้เองโดยอัตโนมัติ - ใน
lib/main.dartเพิ่ม import สำหรับenglish_words - ใช้ english words package เพื่อสร้างข้อความแทนที่ “Hello World”
- เมื่อ reload app จะได้หน้าจอของ app แบบนี้ จะเห็นได้ว่าคำว่า “Hello World” ถูกแทนที่ด้วยคำจาก english words package เป็นข้อความสุ่ม สามารถลองข้อความสุ่มได้โดยกดปุ่ม reload ของ VSCode debug
เพิ่ม stateful widget
Stateless widgets เป็น immutable นั้นก็หมายความว่ามันไม่สามารถเปลี่ยนแปลงได้ แต่ Stateful widgets จะรักษาสถานะของ app ซึ่งมันจะสามารถเปลี่ยนแปลงได้
- เพิ่ม stateful RandomWords widget ไปที main.dart มันสามารถอยู่ตรงไหนก็ได้ของไฟล์ ภายนอก MyApp แต่ในที่นี้จะวางไว้ด้านล่างของ main.dart ซึ่ง RandomWords widget ไม่ทำอะไรนอกเหนือจากการสร้าง State class
- สร้าง RandomWordsState class ส่วนใหญ่ของ code จะอยู่ใน class นี้ จะรักษา State สำหรับ RandomWords widget, class นี้จะบันทึกและสร้างคำ ซึ่งจะเพิ่มขึ้นอย่างต่อเนื่องในขณะที่ user เลื่อนหน้าจอ app ไปเรื่อยๆ และจะบันทึกคำที่ชอบเป็น user เพิ่มหรือลบจากรายการโดยการกดที่ไอคอนหัวใจ
- หลังจากที่เพิ่ม RandomWordState ไปที่ไฟล์ main.dart ไปแล้ว VSCode จะเตือนว่าให้ implement override method ของ State
- แก้ไข MyApp ในไฟล์ main.dart โดยลบ
wordPaireออกจาก MyApp และแทนที่Text(wordPair.asPascalCase)ด้วยRandomWords()
- เมื่อ reload app จะได้ผลเหมือนกับขั้นตอนก่อนหน้าแต่ว่าภายในจะใช้ State แทนสุ่ม word paire โดยตรงใน MyApp
สร้าง infinity scrolling ของ ListView
ในขั้นตอนนี้ เราจะขยาย RandomWordsState ที่จะสร้างและแสดงรายการของคำเมื่อ user scrolls รายการจะแสดงใน ListView widget ที่จะขยายไปเรื่อยๆ
builder factory constructor ของ ListView จะให้คุณสร้างรายการแสดง แบบ Lazy ตามความต้องการ
- เพิ่มรายการ
_suggestionsในคลาส RandomWordsState สำหรับบันทึกคำที่แนะนำ ตัวแปรจะนำหน้าด้วย underscore (_) เพื่อจะระบุด้วย underscore enforeces privacy ของภาษา Dart
- เพิ่มฟังก์ชัน
_buildSuggestions()ในคลาส RandomWordsState, method นี้จะสร้าง ListView เพื่อแสดงรายการของคำแนะนำ
_buildSuggestions()เรียก_buildRowแต่ละครั้งต่อคำ ฟังก์ชันนี้จะแสดงแต่ละคำใหม่ใน ListTile ซึ่งจะทำให้เราสามารถสร้างแถวต่อเนื่องได้ เพิ่มฟังก์ชัน_buildRowใน RandomWordState
- แก้ไข build method ของ RandomWordsState โดยใช้
_buildSuggestions()แทนที่จะเรียกฟังก์ชันสร้างคำโดยตรง
- แก้ไข build method ของ MyApp โดยลบ Scaffold และ AppBar ออก โดยจะใช้ RandomWordsState เป็นตัวจัดการแทน ซึ่งจะทำให้ง่ายต่อการเปลี่ยนชื่อของ route ใน app bar เป็นตามที่ user เลือกจาก screen หนึ่งไปอีก screen หนึ่งในขั้นตอนต่อไป
เมื่อ reload app จะเห็นรายการของคำแสดงบนหน้าจอ ดังนี้
เพิ่ม interactivity
ในขั้นตอนนี้ เราจะเพิ่มไอคอน “หัวใจ” ที่แตะได้ ไปในแต่และแถวของคำ เมื่อ user แตะที่รายการจะเปลี่ยนสถานะเป็น “favorited” โดยจะสามารถ เพิ่ม หรือ ลบ คำออกจากรายการได้
- เพิ่มฟังก์ชัน
_savedในคลาส RandomWordsState โดย Set นี้จะเก็บ word pair ของคำที่เป็น “favorited” - ในฟังก์ชัน
_buildRowให้เพิ่มalreadySavedเพื่อตรวจสอบให้แน่ใจว่าไม่มีคำที่เลือกไว้แล้วมาเพิ่มเข้ารายการ favorite ได้อีก - และในฟังก์ชัน
_buildRowเพิ่มไอคอนหัวใจใน ListTiles เพื่อจะแตะให้คำนั้นเป็น favorite ได้ เราจะเพิ่มความสามารถนี้ภายหลัง
- เมื่อ reload app จะเห็นได้ว่ามีไอคอนหัวใจ เพิ่มเข้ามาในแต่ละแถวของรายการ แต่ยังไม่สามาถตอบสนองต่อการแตะของเราได้
- ทำให้รายการคำสามารถแตะได้ ในฟังก์ชัน
_buildRowถ้าคำถูกเพิ่มเข้าไปยังรายการโปรดแล้ว เมื่อแตะอีกครั้งจะเป็นการลบคำนั้นออกจากรายการโปรด เมื่อแถวโดนแตะจะเรียกsetState()เพื่อ notify framework ว่าสถานะของมันเปลี่ยนไปแล้ว
เมื่อ reload app จะได้หน้าจอของ app ที่แสดงรายการของคำและสามารถแตะเพื่อเพิ่มคำไปในรายการโปรดได้ โดยคำที่เพิ่มไปในรายการโปรดแล้วไอคอนรูปหัวใจจะเป็นสีแดง
เปิดไปยัง screen ใหม่
ในขั้นตอนนี้ เราจะทำเพิ่มหน้าจอใหม่ (เรียก route ใน Flutter) แสดงรายการโปรด เราจะรู้ว่า navigate ระหว่าง home route และ new route ได้อย่างไร
- เพิ่มรายการไอคอนใน AppBar ใน build method ของ RandomWordsState เมื่อ user แตะบนรายการไอคอน route ใหม่จะมี รายการโปรด ที่ใส่เข้าไปใน Navigator และแสดงไอคอน เพิ่มไอคอนเพื่อการนี้
- เพิ่มฟังก์ชัน
_pushSaved()ในคลาส RandomWordsState เมื่อ user แตะที่รายการไอคอนใน app bar สร้าง route และ push เข้าไปใน stack ของ Navigator โดย action นี้จะเปลี่ยนไปแสดงรายการของ route ใหม่
เมื่อ reload app จะได้หน้าจอ app แบบด้านซ้าย แต่เมือแตะตรงไอคอนรายการ (ด้านบนขวาของ app) จะแสดงรายการโปรดบนหน้าจอใหม่ แบบด้านขวา
เปลี่ยน UI themes
ขั้นตอนสุดท้ายนี้จะเปลี่ยน theme ของ app โดยที่ theme จะควบคุมความรู้สึกการมองดู app ของเรา ถ้าเราไม่ได้เปลี่ยนจะใช้ default theme ซึ่งจะขึ้นอยู่กับ device หรือ emulator หรือเราสามารถปรับเปลี่ยนได้ตามความต้องการของเรา
- เราสามารถเปลี่ยน theme ได้ง่ายมากเพียงแต่ตั้งค่าคลาส ThemeData ซึ่งตอนนี้เราใช้ default theme แต่เราจะเปลี่ยนให้เป็น theme สีขาว
หลังจาก reload app จะเห็นได้ว่า app จะเปลี่ยนจากสีน้ำเงินเป็นสีขาว ดังนี้
เสร็จแล้ว Hooyah!! 📱
คำแนะนำสำหรับเรียนรู้เพิ่มเติม
เรียนรู้เพิ่มเติมเกี่ยวกับ Flutter framework
- สอนสร้าง layout ใน Flutter
- สอนเพิ่ม Interactivity
- Flutter Widget Framework
- Flutter สำหรับ Android Developer
อื่นๆ
- Udacity online Flutter training
- Flutter Cookbook
- From Java to Dart codelab
- Bootstrap into Dart: learn more about the language
ทั้งหมดนี้แปลและลองทำจาก https://flutter.io/get-started/
