Day 3/100 — Flutter coding

เริ่มต้นการเรียนรู้อีกครั้ง ก่อนหน้านี้ผมเองเคยได้สัมผัสการเรียนแอปพลิเคชันด้วยภาษา flutter framework มาแล้วบ้าง แต่ก็ไปได้ไม่ถึงฝัน อาจจะด้วยปัญหาต่าง ๆ นา ๆ ครั้งนี้เอาใจช่วยผมด้วยนะครับทุกคน …

Table of content

• เกี่ยวกับ Styling
• ทำ Theme กัน
• ทำ Bottom Navigation Bar

เกี่ยวกับ Styling

วันนี้มาลุยบทที่ 3 ของหนังสือเล่มนี้ต่อครับ ต้นบทมีการนำเสนอการเลือกใช้ conponent style ที่เป็น default ของแต่ละค่าย อย่างของ Android จะใช้ชื่อ Material component สามารถ import มาใช้ได้

import 'package:flutter/material.dart';

หรือถ้าใครต้องการ ios component ก็สามารถ import มาใช้ได้เหมือนกัน แต่ขอบอกว่า component น้อยมากๆ ทางที่ดีผมคิดว่าเราควรมี UI, UX ที่เป็นกลาง และที่สำคัญเราควรเลือกสัก 1 style

import 'package:flutter/cupertino.dart';

FYI:

• Material UI Components:
https://flutter.dev/docs/development/ui/widgets/material
• Cupertino UI Components:
https://flutter.dev/docs/development/ui/widgets/cupertino

Font เราสามารถหยิบของ google มาใช่ได้เหมือนกัน ดูได้จาก link นี้

ทำ Theme กัน

ผม init project จาก source code ที่มีมาให้ใน Github จะได้ไฟล์ที่เกี่ยวกับการทำ design system class ไว้เรียบร้อย ให้ดูตัวอย่างไฟล์หน่อย จะเห็นว่ามี variable ชื่อ lightTextTheme และ darkTextTheme อีกทั้งยังใช้ GoogleFont ได้อีกด้วย แต่ที่สำคัญมาก เวลาไป clone project มาต้องรันคำสั่งเพื่อ install dependecies ก่อนรันโปรแกรมนะ อย่าง Cocoapods เราก็จะใช้

pod install

ใน flutter ก็เช่นกัน เราจะใช้คำสั่งนี้ ภายใต้ directory ของ project นั้นๆ

flutter pub get

Theme data

ผู้เขียนได้สร้าง Text, App theme ที่ใช้ model ThemeData ไว้เรียบร้อยแล้ว ฉะนั้นเรามาดูวิธีการเรียกใช้กันดีกว่า เริ่มต้นง่ายมากสร้างตัวแปร theme เก็บไว้ในหน้า view ก่อนเลย view เริ่มต้นเราจะเริ่มกันที่ main.dart หลังจากนั้นนำตัวแปรใส่ลงไปใน พารามิเตอร์ของ MaterialApp(themeData:….) เพื่อให้ MaterialApp เรียกใช้ design system ของเรา หลังจากนั้นก็แก้ไข style ของ text widget ดังภาพนี้

Trying change text style with theme data model

Result

จากโค้ดสังเกตุดีๆจะเห็นว่าเวลาใช้ theme จะเรียกเค้าไปใน static variable ตรงๆ ถูกไหม ? ผมมี solution ใหม่ การสร้าง widget จะเป็นลักษณะ Tree ฉะนั้นเมื่อเรา define ตัว theme เข้าไปใน MaterialApp เรียบร้อย เราสามารถเรียก object นี้ได้จากโค้ดนี้ ภายในโค้ดจะเรียก object type themeData จาก BuildContext

Theme.of(context).xxx.xxx

ทำ Bottom Navigation Bar

ทุกคนคงรู้จัก Bottom navigation bar ? มันคือ widget ตัวหนึ่งที่เป็น menu bar ด้านล่างของจอ หลายคนอาจจะคุ้นเคยจาก iOS design system ซึ่งใน Flutter ก็มีเช่นกัน สามารถสร้างได้จากพารามิเตอร์ของ Scaffold ที่ชื่ว่า bottomNavigationBar

Create bottom navigation bar

จากรูปสร้าง Widget ธรรมดาเลย เวลาใส่สีก็ใส่จาก Theme.of(context) ส่วนของ detail แต่ใน item ก็ใส่ icon กับ label ส่วนของ Icon(xxx) เป็น widget โชว์ icon และเอารูป icon มาจาก object Icons จาก material libary

หน้าจะจะโชว์แค่ bottom navigation bar เท่านั้นยังไม่สามารถเช็คการกด หรือสลับตำแหน่งของ selected index ได้ นั้นเรามาทำกันต่อเลย!

ใน bottom navigation bar จะมีพารามิเตอร์ที่ชื่อว่า onTap รับเป็น type function มีพารามิเตอร์ 1 ตัว เป็น index แบบนี้สบายเลยถูกไหมครับ เราสามารถจัดการหน้าจอของแต่ละ tab ได้แล้ว ผมอธิบายโค้ดสำหรับเก็บหน้าต่าง ๆ กัน

จากภาพตัว Home state จะมีพารามิเตอร์ 1 ตัวที่เป็น control variable และ มี static พารามิเตอร์สำหรับเก็บหน้าจอของแต่ละหน้า (ปล..อนาคตคงมีการสร้าง file เพื่อแยกเป็นหน้า ๆ และจะง่ายต่อการจัดการในโปรเจคขนาดใหญ่)

ตัวสุดท้ายคือ function ที่จะเอาไปรับกับตอนได้ trigger จาก bottom navigation bar
… ติ๊ก ต๊อง!!! เห็นอะไรไหม ?!?!? function Set state ไง! คราวนี้แหละถึงบางอ๋อเลย ใช่แล้วครับ เมื่อใดที่มี trigger มาจาก bottom navigation bar เจ้าฟังก์ชันนี้จะทำการบอก flutter ว่า _selectedIndex ถูก update แล้ว ทำให้ widget ที่มีส่วนเกี่ยวข้องจะเข้าไป update ของตัวเองทันที

ในรูปถัดไปจะเห็นว่า body ถูก contol ด้วย _selectedIndex ที่ไปเรียกข้อมูลหน้าจอจากตัวแปร static ที่เก็บหน้าจอต่าง ๆ ตาม index

Control variable and function

Bottom Navigation Bar

สรุป

จบกันไปแล้วสำหรับวันนี้ Day 3/100 กับ flutter challenge 🤯 อาจจะสั้นหน่อยแต่อยากจะลงรายละเอียดให้ clear เพื่อสร้างพื้นฐานที่แข็งแรงพร้อมลุยใน widget ต่อไป

สำหรับโค๊ตผมจะอัพไว้ที่ Github repo