Day 06-สร้าง Page Layout

BiteSizeStory

3 min readJan 6, 2021

สอนตัวเองเขียน app ด้วย Flutter ใน25วัน (Flutter Self-Learning Challenge in 25 Days)

วันที่6 นี้จะเป็นการทำตาม codelab ที่เกี่ยวข้องกับการวาง Layout

Building layouts

What you'll learn How Flutter's layout mechanism works. How to lay out widgets vertically and horizontally. How to…

flutter.dev

ซึ่งมีลักษณะคล้ายกับ detail page เพื่อแสดงรายละเอียดที่มีทั้งรูปภาพ ข้อความและไอคอน โดยตัวโครงสร้างของ Layout จะคล้ายกับใน Day 02 หลังจาก runApp เพื่อเรียก MyAppLayout ที่เป็น stateless widget จะ return ค่า MaterialApp ที่มี Scaffold widget และมี appBar property กับตัว body ที่จะใส่ ListView ที่แสดงรูปภาพ และมี Container ในส่วนของ titleSection, buttonSection และ textSection ตามลำดับ โดยใน codelab จะต่างตรงที่การทำContainer ดังกล่าวจะใช้วิธีการเขียนเป็น class ที่เป็น Container widget ขึ้นมา

โครงสร้างของโค๊ดในการแบ่ง Layout ก็จะเป็นดังรูป

โค๊ดในส่วนของการ return ค่า MaterialApp ก็จะมีส่วนของ home: ที่มี Scaffold widget ที่มีappBar: และ body: ที่มี ListView widget โดยในส่วน children: ก็จะมี Image และ Container widget class 3 อันที่เขียนขึ้นมา

ในโค๊ดส่วน titleSection ที่เป็น Container widget class ก็จะมี Row ที่มี 3 ส่วน ส่วนแรกจะเป็น column ที่มี Text อยู่ 2 ส่วน ใน Row ส่วนที่2 จะเป็นไอคอนรูปดาวสีแดง และ Row ส่วนสุดท้ายจะเป็น Text ที่แสดงหมายเลข 41

โค๊ดส่วน buttonSection ที่เป็น Container widget class ก็จะมี Row ที่มี children: ซึ่งเรียกใช้ method ในการสร้าง Icon ที่ชื่อ _buildButtonColumn() โดยจะมีการส่งคืนค่า Column 3 ค่าคือ color, Icon และชื่อ

ซึ่งใน _buildButtonColumn () ก็จะreturn ค่า Column ที่มีการจัดวางและกำหนดคุณสมบัติของ สีของไอคอน ตัวไอคอน และรูปแบบตัวอักษร

และส่วนสุดท้าย textSection ที่เป็น Container widget class จะ return ค่าText ที่มี softWrap: เป็น Property สำหรับในการตัดคำ

จะเห็นได้ว่าการเขียนโค๊ดเพื่อให้ Widget ซ้อนอยู่ใน Widget สามารถทำได้หลากหลายวิธีมาก ซึ่งต้องอาศัยการมองภาพโครงสร้างหลักของLayout ให้ออกก่อนแล้ววางโค๊ดเป็น block ไว้จากนั้นค่อยมาใส่หรือปรับรายละเอียด ก็จะเป็นการช่วยทำให้การเขียนโค๊ดในส่วนของ Interface นั้นมีความสวยงามตามต้องการ

Support me at:

Ko-fi :https://ko-fi.com/bitesizestory

Buy me a coffee :https://www.buymeacoffee.com/bitesizestory

ติดตามบทความ สอนตัวเองเขียน app ด้วย Flutter ใน25วัน (Flutter Self-Learning Challenge in 25 Days) ทั้งหมดได้จากลิงค์ด้านล่าง

Day25-สร้าง app สำหรับอัพเดทยอดผู้ติดเชื้อโควิด19 ทั่วโลก

Day24-สร้าง app สำหรับอ่านข่าวด้วย NewsAPI ตอนที่3

Day23-สร้าง app สำหรับอ่านข่าวด้วย NewsAPI ตอนที่2

Day22-สร้าง app สำหรับอ่านข่าวด้วย NewsAPI ตอนที่1

Day21-ใช้ WebView ในการแสดงผลไฟล์ html5 ด้วย webview_flutter_plus package

Day20-ใช้ GridView และการเปลี่ยน interface แนวตั้งและแนวนอน

Day19-ทำ Flip Card ด้วย flip_card package

Day18-สร้าง ListView จากไฟล์ json