มาลองสร้าง Flutter App กันเถอะ

พรุ้งนี้จะมีงาน Flutter Dev Day ก็เลยคิดว่ามาลองเขียน Flutter App ดูก่อนไปงานดีกว่า จะได้เข้าใจมากขึ้นว่าเค้าพูดอะไรกัน ไม่ได้ไปแบบไม่รู้อะไรเลย ซึ่งทางทีมงานก็ได้ให้ link สำหรับไปเรียนที่ Udacity โดย Google แต่ด้วยระยะเวลา 2 weeks คงไม่ทันแน่ๆ ไว้วันกลังค่อยเรียนดีกว่า งั้นเลยมาลองทำ Flutter App ตาม Get Started น่าจะได้ concept คร่าวๆ ของ Flutter

เริ่มเลย!

  1. ติดตั้ง Flutter Framework และ Dependency ต่างๆ
  2. สร้าง, รัน และ เปลี่ยนแปลง Flutter App แรกของเราดูว่าเป็นอย่างไรบ้าง
  3. เรียนรู้เกี่ยวกับ Concept หลัก ของ Flutter ตามขั้นตอน
  4. คำแนะนำสำหรับเรียนรู้ Flutter ต่อไป

ติดตั้ง

  • 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 แล้วไปที่ Command Palette … (Shift+Command+P)
  • พิมพ์ flutter ในช่องค้นกา และเลือก Flutter และกด Install
  • หลังจากติดตั้ง Flutter เสร็จเรียบร้อยแล้วก็ reload VS Code

เป็นอันเสร็จเรียบร้อย 👌🏻

ทดสอบระบบ

สร้างโปรเจ็คใหม่

  • พิมพ์ flutter และเลือก Flutter: New Project
  • ใส่ชื่อของโปรเจ็ค ในที่นี้จะใช้ชื่อว่า myapp ก็จะใส่ myapp
  • และก็รอจนกว่า Flutter จะสร้างโปรเจ็คเสร็จ ก็จะมีโฟลเดอร์ใหม่ และ VS Code ก็จะเปิดอีกหน้าต่างของโปรเจ็คใหม่

ลองรัน App

  • เลือก device จาก Device Selector ถ้าไม่มี device ให้เลือกแสดงว่ายังไม่มี Simulator จะต้องไปตรวจสอบการติดตั้ง XCode หรือ Android Studio ดู
  • ไปที่ Debug > Start Debugging หรือกดปุ่ม F5
  • รอ…….. สักพักเพื่อจะเปิด App
  • ถ้าทุกอย่างทำงานได้ App จะเปิดบน Simulator แบบนี้!

ลอง hot reload

  • เปิดไฟล์ 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 แรกดู

โดยจะมีขั้นตอนย่อยดังนี้

  1. สร้าง Flutter App เบื้องต้น
  2. ใช้ package ภายนอก
  3. เพิ่ม stateful widget
  4. สร้าง scrolling ของ ListView
  5. เพิ่ม interactivity
  6. เปิดไปยัง screen ใหม่
  7. เปลี่ยน UI themes

สร้าง Flutter App เบื้องต้น

  • แทนที่ไฟล์ lib/main.dart ลบโค้ดเก่าทั้งหมด และแทนที่ด้วยโด้ดด้านล่างนี้ เพื่อจะแสดงข้อความ Hello World บนหน้าจอของ app
  • รัน app จะได้หน้าจอของ app ดังนี้

ใช้ package ภายนอก

  • ในไฟล์ 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

  • เพิ่ม 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

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

  • เพิ่มฟังก์ชัน _saved ในคลาส RandomWordsState โดย Set นี้จะเก็บ word pair ของคำที่เป็น “favorited”
  • ในฟังก์ชัน _buildRow ให้เพิ่ม alreadySaved เพื่อตรวจสอบให้แน่ใจว่าไม่มีคำที่เลือกไว้แล้วมาเพิ่มเข้ารายการ favorite ได้อีก
  • และในฟังก์ชัน _buildRow เพิ่มไอคอนหัวใจใน ​ListTiles เพื่อจะแตะให้คำนั้นเป็น favorite ได้ เราจะเพิ่มความสามารถนี้ภายหลัง
  • เมื่อ reload app จะเห็นได้ว่ามีไอคอนหัวใจ เพิ่มเข้ามาในแต่ละแถวของรายการ แต่ยังไม่สามาถตอบสนองต่อการแตะของเราได้
  • ทำให้รายการคำสามารถแตะได้ ในฟังก์ชัน _buildRow ถ้าคำถูกเพิ่มเข้าไปยังรายการโปรดแล้ว เมื่อแตะอีกครั้งจะเป็นการลบคำนั้นออกจากรายการโปรด เมื่อแถวโดนแตะจะเรียก setState() เพื่อ notify framework ว่าสถานะของมันเปลี่ยนไปแล้ว

เมื่อ reload app จะได้หน้าจอของ app ที่แสดงรายการของคำและสามารถแตะเพื่อเพิ่มคำไปในรายการโปรดได้ โดยคำที่เพิ่มไปในรายการโปรดแล้วไอคอนรูปหัวใจจะเป็นสีแดง

เปิดไปยัง screen ใหม่

  • เพิ่มรายการไอคอนใน 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 ได้ง่ายมากเพียงแต่ตั้งค่าคลาส ThemeData ซึ่งตอนนี้เราใช้ default theme แต่เราจะเปลี่ยนให้เป็น theme สีขาว

หลังจาก reload app จะเห็นได้ว่า app จะเปลี่ยนจากสีน้ำเงินเป็นสีขาว ดังนี้

เสร็จแล้ว Hooyah!! 📱

คำแนะนำสำหรับเรียนรู้เพิ่มเติม

อื่นๆ

ทั้งหมดนี้แปลและลองทำจาก https://flutter.io/get-started/

Software Engineer 👨🏻‍💻 Stay Hungry Stay Foolish

Software Engineer 👨🏻‍💻 Stay Hungry Stay Foolish