web analytics

บันทึกการเรียน Flutter ของผม ตอนที่ 2

cover

สวัสดีครับ บทความนี้เป็นบันทึกการเรียน Flutter + ภาษา Dart ของผม ซึ่งตัวผมในตอนนี้ยังไม่มีความรู้เรื่อง Flutter และ Dart เท่ไาหร่นัก บทความนี้ก็เลยมาบันทึกการเรียน และการทำความเข้าใจเกี่ยวกับ Flutter ของผมครับ โดยบทความนี้จะลองทำตาม Tutorial ที่สอนในเว็บของ Flutter ครับ

 

ในตอนที่แล้ว ผมได้ลองเล่น โปรเจคที่มากับ Flutter ใน Android Studio แล้ว อ่านได้ที่

บันทึกการเรียน Flutter ของผม ตอนที่ 1

 

บทความนี้เป็นบันทึกที่ผมได้เรียนจากเว็บนี้

https://flutter.io/get-started/codelab/

ซึ่งจะเป็นการพาไปเรียนรู้เกี่ยวกับการสร้าง ListView

a1

 

 

Step 1 : Hello world

ตัวอย่างนี้จะมีโค้ดของ main.dart มาให้

ทำความเข้าใจโค้ดด้านบนกัน เริ่มจากมี main() เรียก runApp(w) ซึ่ง runApp(w) ต้องการ Widget เป็น argument ก็เลยเขียน class ชื่อว่า MyApp ที่ extends StatelessWidget ให้มัน ซึ่งใน StatelessWidget จะมี method ชื่อ build() ไว้สำหรับสร้าง Widget  ในตัวอย่างนี้ในขึ้นตอน build ก็สร้าง widget ตัวนึงชื่อ MaterialApp ซึ่งเป็น StatefulWidget ตัวนึงของ Flutter อยู่แล้ว (กดเข้าไปดูจะเห็นว่ามัน extends StatefulWidget แสดงว่ามันคือ Widget)

2

จากนั้นก็มีการสร้าง Scaffold ซึ่งเป็นเหมือนการวางโครงสร้าง ให้กับ MaterialApp แล้วก็มีการกำหนด AppBar กับ Text คำว่า Hello World ซึ่งจะเห็นว่า MaterialApp เป็นเหมือนโครงสร้างที่ทาง Flutter เตรียมไว้ให้ คือมีส่วน title , home อะไรแบบนี้วางไว้ให้เลย

ผมอ่านโค้ดตัวอย่างนี้แล้วก็เข้าใจเลย เพราะว่าพอทำความเข้าใจมาก่อนจาก ตอนที่ 1 ก่อนหน้านี้ซึ่งซับซ้อนกว่านี้แล้วนั่นเอง

ลองรัน

1

3

  1. มีรายละเอียดเพิ่มเติมที่ทาง Flutter บอกไว้สำหรับมือใหม่ คือ Material คือ รูปแบบมาตรฐานการออกแบบบนมือถือและเว็บ  ซึ่ง Flutter เตรียมมาให้ใน Material Widgets
  2. วิธีการเขียน method อีกวิธีคือใช้ วิธีที่เรียกว่า arrow คือใช้ =>
  3. การ extends StatelessWidget คือ การทำงานด้วยตัวมันเอง ซึ่งใน Flutter ทุกอย่างคือ Widget
  4. Scaffold คือ Widget ที่มากับ Material library ซึ่งมันก็มาพร้อมกับ AppBar , Body แล้วก็คุณสมบัติสำหรับ หน้าจอ
  5. งานหลักๆของ Widget คือ  build() ซึ่งมันคือ ชุดคำสั่งการทำงานของ Widget
  6. ที่ body ของตัวอย่างนี้ จะเห็นว่ามี AppBar กับ Center เป็นลูกใน Scaffold() ซึ่งทั้งคู่ ก็เป็น Widget ดังนั้นแทบทุกอย่างคือ Widget อยู่ที่จะเป็น StatelessWidget หรือ StatefulWidget

 

Step 2 : ใช้ Package ข้างนอก

Flutter สามารถใช้ library จากข้างนอกได้ ซึ่งก็ Flutter ก็ทำศูนย์รวม package เอาไว้ ชื่อว่า “Flutter Packages”
ดูได้ที่นี่ https://pub.dartlang.org/flutter/

ในตัวอย่างนี้จะลอง ใช้งาน package ข้างนอกเข้ามาใช้ในโปรเจคของเรา โดยจะใช้ library ชื่อว่า “English words” ซึ่งมันก็คือที่เก็บคำศัพท์ภาษาอังกฤษนับพันคำเอาไว้

เปิดไฟล์ pubspec.yaml แล้วเพิ่ม english_words ลงไปใต้ dependencies

4

 

เสร็จแล้วก็รัน command ใน terminal เพื่อให้มันไปดาวน์โหลด packages มาใส่ในโปรเจคของเรา

หรือถ้าใช้ Android Studio จะมีที่ให้กด Packages get มุมบนขวา มันก็จะรันคำสั่งด้านบนให้เหมือนกัน

5

 

เสร็จแล้วจะขึ้น Process finished

6

 

หลังจากนั้นที่ไฟล์ pubspec.lock จะมีการ generate รายชื่อ library เพิ่มขึ้นมา ซึ่งไฟล์นี้ก็จะนิยาม package ที่เราใช้ในโปรเจคนั่นเอง ถ้ามี English_words ก็แสดงว่า เราดาวน์โหลด มาเรียบร้อยแล้ว พร้อมใช้งาน

7

 

มาลองใช้งานกัน
ที่ main.dart ก็ให้ import package เข้ามาแบบนี้

 

ถามว่ารู้ได้ไงว่าต้องเขียนแบบนี้ ก็คือเราสามารถเข้าไปอ่าน Package ได้ว่าใช้งานอย่างไร ได้ที่เว็บ Flutter Package แล้วค้นหาดู

8

 

จากนั้นก็มาลองใช้งาน English words ที่เราโหลด
วิธีใช้งาน เช่น สุ่มคำ

แล้วเอาไปใส่ใน Text

9

 

Step 3 : สร้าง StatefulWidget

ที่ main.dart เขียนต่อด้านล่าง
สร้าง class RandomWords ซึ่งเป็น StatefulWidget

 

ซึ่งถ้าจำกันได้ StatefulWidget มันคือ widget ที่มี state ดังนั้นจะต้องมีการกำหนดส่วนของ createState
ซึ่ง State นี้เราก็ต้องไปสร้าง class State ของเราเอง ในที่นี้กำหนดชื่อว่า RandomWordsState แล้ว extends State<T>
ส่วนภายใน State ก็มีข้อมูล _suggestion คือ array สำหรับเก็บคำ แล้วก็ biggerFont ก็กำหนดขนาดตัวอักษร

จะเห็นว่ามีโค้ดส่วนที่ไขว้กันอยู่แบบนี้ นั่นก็คือ class 2 ประเภทนี้ มันจะมาคู่กัน

10

 

จากนั้นก็มาเพิ่ม ส่วนของ build ที่เหลืออยู่ method นี้จะถูกเรียกเมื่อ State มีการเปลี่ยนแปลง
ก็คือให้ random คำ แล้วก็สร้าง Text เอาคำที่ random กำหนดให้มัน

 

เสร็จแล้วก็เปลี่ยน body มาใช้ StatefulWidget ของเรา ก็คือ  RandomWords

 

ลองรัน

11

 

สังเกตว่า จะเขียน new หรือไม่ก็ได้นะ สามารถเขียนแค่ RandomWords() เฉยๆก็ได้

 

Step 4 : สร้าง ListView

เขียน method สำหรับสร้าง ListView และ Row
เริ่มจาก ListView ก่อน ก็ทำ method สำหรับ return ListView กลับไป
วิธีการใช้ ListView คือ ListView.builder() โดยพารามิเตอร์ที่สำคัญคือ itemBuilder ซึ่งจะเป็นเหมือนการนิยามแถวแต่ละแถวใน ListView (จะเรียกว่า item ก็ได้) ซึ่งในแต่ละแถว ก็ให้เราทำการสร้าง Row นั่นเอง จะแสดงอะไรก็ตามใจได้เลย ซึ่งในที่นี้จะทำการเอาคำที่เก็บไว้มาสร้างแถว แล้วก็ถ้าเลื่อนจนหมดทุกคำที่มีก็มีการสุ่มคำมาเพิ่ม

 

ข้อสังเกต การใช้ ~/ มันคือการ หารแล้ว cast เป็น int

 

อีก method ก็ทำการ return ListTile ให้กับ ListView.builder (Tile นะไม่ใช่ Title) โดยพารามิเตอร์หลักๆก็คือ title

 

สุดท้ายที่ build ของ State ก็เปลี่ยนมาใช้ buildListView() ของเราแทน

 

ลองรันก็จะได้ ListView แล้ว

a1

 

 

จบแล้ว

ถึงจุดนี้ ได้เรียนรู้เรื่องของ การใช้ External Package และการทำ ListView โดยมีคอนเซ็ปเรื่อง StatelessWidget , StatefulWidget , State<T> อยู่เหมือนเดิม ซึ่งถ้าใครเคยเขียน Android Native มาก่อนแบบผม จะเห็นว่าตอนนี้ main.dart เหมือนกับ มี Activity + View Layout + Adapter นั่นเอง

ตอนหน้าจะไปเรียน Codelab Part 2 ของ Flutter กันต่อครับ

บันทึกการเรียน Flutter ของผม ตอนที่ 3