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

4 min readJan 19, 2021

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

วันนี้เป็นวันที่เขียนโค๊ดยาวมากที่สุดตั้งแต่หัดเขียนมา ส่วนใหญ่แล้วก็จะเป็นเรื่องของการจัด Layout เสียมากกว่าแล้วก็พาให้ชวนมึนกับวงเล็บมากมาย ถ้าเราไม่มองเป็นก้อนของโค๊ดจะทำให้สับสนมาก ดังนั้นก่อนเขียน app ควรมีการวางแผนและทำการวาด Layout เบื้องต้น เพื่อจะได้ใส่โค๊ดเป็น บล็อคไว้ก่อนแล้วค่อยมาเติมรายละเอียดทีหลัง ด้วยคำสั่ง wrap.. จะทำให้ไม่สับสน

วันนี้ก็จะทำการติดตั้ง package 2 ตัวด้วยกันคือ flip_card และ font_awesome_flutter โดยวิธีการก็เหมือนเดิมคือถ้าเราติดตั้ง Pubspec assist เราก็สามารถใช้คีย์บอร์ดพิมพ์ shift+ctrl+p แล้วพิมพ์ pubspec จากนั้นเลือก Pubspec Assist: Add/update dependencies แล้วพิมพ์ flip_card และ font_awesome_flutter ตัว vscode ก็จะทำการเพิ่ม package ให้ในไฟล์ pubspec.yaml อัตโนมัติ

จากนั้นให้เริ่มสร้าง main() โปรแกรมมาตราฐานที่เรียก runApp(MyApp) โดย MyApp() จะเป็น stateless widget class ที่ return ตัว MaterialApp widget ที่มีค่า home: Property แล้วไปเรียก HomePage() ที่เป็น stateful widget class ซึ่งเราจะทำการสร้างไว้ในไฟล์ ้homepage.dart

ให้เราทำการสร้างไฟล์ homepage.dart สร้าง stateful widget class ที่ชื่อ HomePage() ในส่วนของ state class ให้ return ตัว Scaffold widget โดยใน body: Property จะมี Stack widget ที่มี Container ซ้อนกันอยู่ 2 ตัว ตัวแรกจะเป็นการใส่ภาพ background จาก NetworkImage widget

ส่วน Container อีกอันจะใส่ FlipCard widget ซึ่งจะมี Property ที่สำคัญ 3 ค่าคือ direction: เพื่อเลือกว่าจะให้ flip ไปทางแนวตั้งหรือแนวนอน front: สำหรับใส่รายละเอียดด้านหน้าของตัว FlipCard และ back: สำหรับใส่รายละเอียดด้านหลังของตัว FlipCard ซึ่งในที่นี้เราจะใช้ Material widget เพื่อกำหนดสี ขอบ รวมถึงเงาของ FlipCard ทั้งด้านหน้าและหลัง และใน child: Property ก็จะทำการเรียก widget ที่ชื่อ _nameDetailContainer() และ _socialContainer() ตามลำดับ

จากนั้นให้เราสร้าง _nameDetailContainer widget ซึ่งในส่วนนี้จะเป็นการแสดงข้อมูลด้านหน้าของ FlipCard ซึ่งจะ return ตัว Container ที่มี 2 Container ย่อย ตัวแรกจะเป็นแถบของ FlipCard ด้านบน ซึ่งจะทำการกำหนดขนาดรูปแบบและการจัดวางของ Container โดยตัว child: Property จะใช้ ListTile widget ในการแสดง ภาพ และตัวอักษรที่เป็น title: และ subtitle:

ในส่วนรูปภาพ จะอยู่ในleading: Property ที่อยู่ใน Container widget อีกที และกำหนด shape: Peoperty ด้วยBoxShape.circle เพื่อให้รูปอยู่ในวงกลม

ในส่วนของ title: และ subtitle: จะเป็นการกำหนด padding และ TextStyle

ส่วน Container อีกอันจะเป็นการเรียก widget ชื่อ _detailContainer() ซึ่งเราจะต้องสร้างขึ้นเพื่อให้แสดงข้อความที่เป็นรายละเอียด

ใน _detailContainer() ก็จะ return เป็น Column ที่มี padding ของตัวอักษรข้อความต่างๆทั้งหมด 3 ชุด

padding ชุดแรกจะเป็นข้อความยาวๆเพื่ออธิบาย

padding ชุดที่2 จะเป็นการใส่ตัว Icon กับคำว่า NewYork

padding ชุดที่3 จะเป็นการใส่ Icon และ email

.ให้เราสร้าง _socialContainer() widget สำหรับใส่ข้อมูลด้านหลังของตัว FlipCard ซึ่งจะ return ตัว Container ที่มี Container 2 ตัว

Container ตัวแรกจะเป็นการใส่ Column ที่มีการจัด padding สำหรับใส่ ListTile ซึ่งจะมี leading: เป็นรูปภาพ และ title: กับ subtitle: เป็นตัวอักษร

ในส่วน leading จะใช้ Container ในการใส่รูปภาพจาก NetworkImage

ในส่วน title: และ subtitle: ก็จะเป็นการใส่ข้อความและมีการจัดpadding

Container อีกตัวจะเป็นการเรียก _socialdetailContainer widget ที่เราจะสร้างขึ้นเพื่อแสดงรายละเอียด

ใน _socialdetailContainer() จะ return ตัว Column ที่จะมี padding 4 ชุด สำหรับใส่ตัวไอคอนและข้อความตามลำดับ

จะเห็นได้ว่าโค๊ดที่ค่อนข้างยาวเพราะต้องการจัด Layout ให้สวยงาม ซึ่งโครงสร้างของโค๊ดไม่ได้มีอะไรมากมาย การใช้ flip_card package ก็ไม่ได้มีอะไรยุ่งยากนัก และเมื่อเราทำการรันโปรแกรมก็จะได้ผลลัพธ์ดังภาพ