หลังจากที่เราทำงานติดตั้ง Flutter กันไปแล้ว
จาก blog :: Part 1 :: สวัสดี Flutter ด้วยการติดตั้ง
จากแนวคิดของ Flutter นั้นมาจาก React
โดยทุก ๆ component จะเรียกว่า widget
ประกอบไปด้วย
- การแสดงผล
- State
- ทำงานตาม state ที่เปลี่ยนแปลงไป
มาเริ่มต้นพัฒนา app กันดีกว่า
ก่อนอื่นมาดูโครงสร้างของ Flutter project กัน
แสดงดังรูป
คำอธิบาย
- android สำหรับ code ของ Android app
- ios สำหรับ code ของ iOS app
- lib สำหรับไฟล์การทำงานหลักของ app เขียนด้วยภาษา Dart ที่เราจะทำความรู้จักและเขียนกัน
- test สำหรับไฟล์ของชุดการทดสอบ ที่จะพูดกันใน blog ต่อ ๆ ไป
- pubspec.yaml สำหรับ configuration ต่าง ๆ ของ app เช่น package หรือ dependency ต่าง ๆ
มาเริ่มเขียน code ในไฟล์ lib/main.dart
เนื่องจาก code ตัวอย่างที่สร้างมาจากตอนสร้าง project มันเยอะมาก ๆ
แถมอ่านก็ไม่รู้เรื่องเลย !!
ดังนั้นทำการลบแล้วเริ่มเขียนใหม่ดีกว่า
เขียน code ตามระเบียบคือ Hello Flutter World กัน
คำอธิบาย
- แสดงคำว่า Hello Flutter World ตรงกลางหน้าจอ
- อยากให้ตัวอักษรหนา ๆ และขนาดตัวอักษรใหญ่ ๆ
แสดงการทำงานดังรูป
การทำงานจะเริ่มต้นจาก function main()
จากนั้นจะทำงานที่ function runApp() เพื่อกำหนด root ของ widget ของ app เรา
code ตัวอย่างนั้น มี 3 widget คือ Center, Text และ TextStyle
ดังนั้น Widget ต่าง ๆ จะถูกจัดการในรูปแบบ tree นั่นเอง
แนวคิดเหล่านี้ไม่ได้ต่างจาก React และ Angular component มากนัก
แสดงดังรูป
เรื่องต่อมา Flutter ได้เตรียม Widget พื้นฐานมาให้ใช้เยอะเลย
เราสามารถนำมาใช้ได้เลย ประกอบไปด้วย
- Text สำหรับการแสดงผลข้อความต่าง ๆ
- Row, Column เรียกว่า Flex widget สำหรับการสร้าง layout แบบยืดหยุ่นทั้งแนวตั้งและแนวนอน ซึ่งการออกแบบก็ตาม Flexbox ใน web นั่นเอง
- Stack สำหรับการสร้าง layout ที่ทับกันได้ (overlap)
- Container ตามเชื่อเลยคือ ที่รวบรวม widget ต่าง ๆ เข้าด้วยกัน
- ยังมีตัวอื่น ๆ อีกนะ ทั้ง Listview และ GridView และอื่น ๆ อีกมากมาย
ถ้าเราต้องการสร้าง Widget เอง ก็สามารถทำได้
โดยสามารถสร้าง Widget ใหม่ด้วยการ extend มาจาก 2 class คือ
จะทำการ extend จาก class ไหนดีละ ?
ตอบง่าย ๆ ตามชื่อเลย
นั่นคือ ถ้าต้องการจัดเก็บ state ต่าง ๆ ของการทำงานไว้
ก็ใช้ StatefulWidget กันเลย
ถ้าไม่จัดเก็บ state ก็ใช้ StatelessWidget ซะ เช่นพวกการแสดงผลเป็นต้น
ดังนั้นเรามาสร้าง Widget และ app เล่นกันดีกว่า
มาสร้าง Widget แรกชื่อว่า HelloApp กัน
ลองใช้งาน Material design ที่มีให้มาอยู่แล้วกัน
ทำการแสดงผลในรูปแบบเดิม เพิ่มเติมคือใช้ Scaffold widget ของ Material Design
เป็น layout ง่าย ๆ ทำให้เรากำหนดชื่อของ title ในส่วนของ App bar ได้เลย
เนื่องจาก widget ที่จะสร้างไม่มีการจัดเก็บข้อมูลหรือ state อะไรเลย
ดังนั้นจึงทำการ extend จาก class StatelessWidget
พวก property ต่าง ๆ ของ class ต้องเป็น immutable ด้วยนะ นั่นคือเปลี่ยนแปลงไม่ได้
นั่นคือ ต้องทำการใส่ keyword final เข้าไปด้วย
การแสดงผลจะทำงานใน function build()
ถ้าเป็น React จะทำงานใน function render() นั่นเอง
ผลการทำงานเป็นดังนี้ ดูสวยงามขึ้นเป็นกองนะ
เพื่อทำความเข้าใจมากยิ่งขึ้น มาลองสร้าง App จริง ๆ กันหน่อย
สิ่งที่ต้องการประกอบไปด้วย
- ดึงข้อมูลของเบียร์จาก PUNK API
- นำข้อมูลมาแสดงใน ListView widget
มาเริ่มกันเลย
โดยปัญหาของมือใหม่แบบผมจะเยอะมาก ๆ
มาพัฒนาด้วยปัญหาหรือคำถามกัน แล้วไปลองค้นหาดู
ปัญหาที่ 1 จะดึงข้อมูลจาก API ผ่าน internet อย่างไร ?
เอกสารของ Flutter ก็มีให้เช่นกันคือ Fetch data from the internet
ซึ่งจะใช้งาน http package
เมื่อได้ข้อมูลมาจาก API แล้ว
จะทำการแปลงมาอยู่ในรูปแบบของ Dart object โดยใช้ package dart/convert
มาเขียนกันเลย
ในภาษา Dart ได้เตรียม Future class สำหรับการทำงานแบบ Asynchronous
เขียนในรูปแบบ async-await ได้ดังนี้
ผลการทำงานเป็นดังนี้ อ่านไม่ค่อยรู้เรื่องเท่าไร !!
สิ่งที่อยากทำต่อไปคือ การแปลง JSON ให้อยู่ในรูปแบบของ Dart object ว่าแต่ทำอย่างไรละ ?
ใน function getBeers() จะต้องทำการ return ข้อมูลเป็น List ของ Beer object !!
ดังนั้นมาสร้าง class Beer กัน
ซึ่งจะสร้างอยู่ในไฟล์ใหม่ชื่อว่า beer.dart ดังนี้
คำอธิบาย
- Constructor จะรับ 3 ค่า สำหรับการสร้าง object ตรงนี้แล้วแต่เราต้องการ
- มี static function/method สำหรับการแปลงจาก JSON message มาอยู่ในรูปแบบของ Beer Object ซึ่งในภาษา dart จะใช้ keyword ว่า factory
- ทำการ override function toString() สำหรับการแสดงผลข้อมูลของ Beer แบบสวย ๆ ตามที่ต้องการ
กลับมาที่ไฟล์หลักคือ main.dart ใน function getBeers()
ทำการเพิ่ม code การแปลงข้อมูล JSON message ให้มาอยู่ในรูปแบบ List ของ Beer กัน
รวมทั้งเปลี่ยนชนิดข้อมูลที่จะ return กลับด้วย
ยังไม่พอนะ ต้องทำการ import beer.dart ด้วย
มิเช่นนั้นจะใช้งานไม่ได้
มี code ดังนี้
แสดงผลการทำงานแบบสวย ๆ กันแล้ว ดังนี้
มาถึงตรงนี้เขียนไปเขียนมา นึกว่าเขียนภาษา Java อยู่นะ !!!
เมื่อเรื่องข้อมูลที่จะนำมาใช้งานเรียบร้อยแล้ว ก็มาถึงในส่วนของการแสดงผล
เป็นส่วนที่ยากที่สุดสำหรับผมแล้ว !!
ใน blog นี้จะไม่มีการเก็บค่าใด ๆ ดังนั้นจะสร้าง Widget แบบ Stateless
ส่วนการแสดงผลจะอยู่ในรูปแบบของ ListView
ใน ListView นั้นประกอบไปด้วย Item ซึ่งจะนำข้อมูล Beer มาแสดง
ตอนนี้เอาแค่ชื่อเบียร์มาแสดงก่อนก็แล้วกัน !!
มาเริ่มกันเลย
ก่อนอื่นต้องออกแบบ Widget ที่จะสร้าง
โดยผมทำการแยกออกเป็น 3 widget ตามหน้าที่การทำงาน
- MyApp เป็น widget เริ่มต้นหรือ root ของ app นั่นเอง ทำการกำหนดว่าจะใช้ Material design นะ
- Firstpage เป็น widget ลูกของ MyApp ทำหน้าที่กำหนด Layout ของหลักของ app รวมทั้งทำหน้าที่ดึงข้อมูลของ beer จาก PUNK API ด้วย ในส่วนนี้นี่เองที่ผมต้องการให้มี Progress bar ขึ้นมาในขณะที่กำลังดึงข้อมูล ซึ่งจะใช้ widget ชื่อว่า CircularProgressIndicator เราน่าจะเรียก widget นี้ว่า Smart/Container component/widget ก็ได้นะ
- ListBeer เป็น widget ลูกของ FirstPage ทำหน้าที่แสดงข้อมูลของ beer ทั้งหมด เราน่าจะเรียก widget นี้ว่า Dumb/Presentational component/widget ก็ได้นะ
มี code ดังนี้
ผลการทำงานเป็นดังรูป
ลองเปลี่ยนไปใช้ GridView เพื่อแสดงรูปของ beer กันหน่อย ก็พอได้นะ
ยากจริง ๆ สำหรับการแสดงผล !!
ถ้าจะให้สวยต้องใช้พวก Flex และ Card widget เข้ามาช่วยอีกนะ
เป็นเรื่องที่ต้องศึกษาและนำมาใช้ต่อไป
แต่เพียงเท่านี้ ก็น่าจะทำให้เห็นว่า Flutter มีหน้าตาอย่างไรบ้างแล้ว
รวมไปถึง code ที่เขียนด้ววยภาษา Dart รวมกับ package ต่าง ๆ
จะพัฒนา app ด้วย Flutter ให้ดี ต้องไปเรียนรู้ภาษา Dart เพิ่มเติมอีก
ดังนั้น part ต่อไป มาทำความรู้จักกับภาษา Dart กัน ( Dart 2.0 )
รวมทั้งการพัฒนา app ที่ซับซ้อนและสวยงามขึ้น
Source code ตัวอย่างอยู่ที่ Github::Simple App with Flutter
ขอให้สนุกกับการ coding ครับ
