Flutter | มาลองทำแอป Icon Showcase || Part I การดีไซน์

3 min readJan 4, 2020

พาร์ทอื่นๆ

เริ่ม

หลังจากไม่ได้เขียนมาซักพัก รอบนี้มาลองทำแอป Icon Showcase โดยจะประกอบไปด้วย 2 ส่วน การดีไซน์ กับ การทำอนิเมชั่น แต่ในรอบนี้จะมีเฉพาะส่วนการดีไซน์ก่อน เพื่อไม่ให้ยาวจนเกินไป

ครั้งนี้ เราจะมาแนะนำ Widget ต่างๆดังนี้

Card
ListTile
SafeArea
Stack
Positioned
Align

แอปเราจะประกอบไปด้วย 2 หน้า หน้าหลัก (main.dart) และหน้ารายละเอียด (detail_page.dart) แต่ก่อนหน้านั้นเรามาเตรียมสีที่จะใช้ กับข้อมูลกันก่อน

หมายเหตุ โค๊ดที่นำมาลงประกอบนั้น จะเป็นโค๊ดที่เขียนเสร็จแล้วของพาร์ทนั้นๆ ดังนั้นอาจจะมีโค๊ดบางส่วนที่ยังไม่ถูกอธิบาย ณ ตอนนั้น แต่จะวนกลับมาอธิบายในส่วนถัดๆไป แนะนำให้ลองโหลดไฟล์ท้ายโพสมาลองรันไปควบคู่ไปกับการอ่านจะช่วยให้เข้าใจได้ง่ายขึ้น ถ้าพร้อมแล้วก็ไปต่อกันเลย

การเตรียมการ

ชุดสีที่เราจะใช้ตามนี้

#F2F6F5
#C8DAD3
#93B5B3
#63707E

เราก็ดำเนินการสร้างไฟล์ color_palette.dart โลด

color_palette.dart

ทีนี้ เราก็เรียกใช้สีของเราได้ง่ายๆแล้ว

ต่อมาเตรียมข้อมูลที่ใช้แสดงกันต่อ สร้างไฟล์ icon_data.dart

icon_data.dart

เราจะสร้างรูปแบบข้อมูลขึ้นมาก่อนจะได้เรียกใช้ง่ายๆ ตั้งชื่อว่าIconModel โดยข้อมูลแต่ละอันจะประกอบไปด้วยชื่อ title กับไอคอน icon และสร้างข้อมูลต่อ เป็น List ของ IconModel เก็บไว้ในตัวแปร iconList

การเตรียมการเรียบร้อยแล้ว เราก็มาเริ่มการดีไซน์

หน้าแรก `main.dart`

main.dart

มาที่ class _MyHomePageState

ใน Scaffold เราจะตั้งสีพื้นหลัง ทั้งหมดเป็น ColorPalette.grey90

ต่อมาใน Appbar เราก็ทำให้สีพื้นหลังโปร่งใสซะ และไม่ให้มันเกิดเงา ก็ตั้ง elevation เป็น 0.0 แล้วเพิ่ม leading เป็น icon menu จะได้ดูเหมือนมีฟีเจอร์อื่น แต่เราจะไม่ได้ใส่เมนูลงไปจริงๆ

ต่อไปเราส่วน body เราจะทำเป็น ListView ที่ประกอบไปด้วย Card ที่สร้างมาจากข้อมูลของเรา เราจะใช้ ListView.builder ให้มันสร้าง Card แล้วในจะใส่ ListTile เข้าไป เพื่อจัดวางข้อมูลของเรา

มาอธิบาย Widget ที่ใช้กันก่อน

Card จะช่วยสร้างสี่เหลี่ยมผืนผ้านมุมมน ให้อัตโนมัติ เราเพียงส่ง Widget child เข้าไปก็ใช้งานได้ทันที ถ้าอยากปรับความมนของขอบก็ส่ง shape: เข้าไปได้เลย

เมื่อมี Card แล้ว เราอยากจัดองค์ประกอบแบบง่ายๆก็ใช้ Widget ListTile

ListTile จะประกอบไปด้วย 4 ส่วนหลักๆ leading, title, subtitle, trailing ซึ่งถ้าเราอยากวางตรงตำแหน่งไหน ก็ส่ง Widget child ของเราเข้าไปตรงนั้นเลย (ปล.ไม่จำเป็นต้องอยู่ใน Card นะ แค่ส่วนใหญ่ชอบใช้คู่กัน)

ที่เหลือเราก็จัดรูปต่อ ใส่ padding เพื่อให้องค์ประกอบออกมากำลังดี ได้ผลลัพธ์สุดท้ายดังนี้

หน้ารายละเอียด

เรามาลองทำอะไรทีซับซ้อนมาหน่อย ไปกันที่หน้า detail_page.dart กันเลย

ในหน้านี้ ตัว Scaffold เราจะไม่มี appbar ดังนั้นที่ body เราจะหุ้ม widget ด้วย SafeArea

SafeArea จะช่วย padding หลบพวก notification bar, รูกล้อง (notch, punch hole) ให้อัตโนมัติ

ต่อมาเราก็จะใช้ Card เช่นเคย

เพื่อให้เราสามารถยัดหัวข้อกับไอคอนในตำแหน่งดังรูปด้านบนได้ เราก็เลือกใช้ Widget Stack

Stack เป็น Widget ที่รับ Children หรือ Widget หลายๆอัน แล้วนำมาซ้อนทับกัน โดย อันที่อยู่ก่อนจะอยู่ด้านหลัง แล้วอันที่อยู่หลังจะอยู่ด้านหน้า นอกจากนี้ถ้าต้องการให้ child แต่ละอันของเรามีตำแหน่งอื่น อยากให้อยู่มุมอื่น เราจะใช้ Widget Positioned หรือ Widget Align มาช่วย
Positioned จะต้องใช้ใน Stack เท่านั้น เพื่อจัดให้อยู่ในตำแหน่งที่เราต้องการแบบละเอียดได้
Align ช่วยให้ Widget ของเราอยู่ตามตำแหน่งอย่างง่ายได้เลย เช่นตามมุมต่างๆ ตรงกลาง กลางซ้าย ฯลฯ

เมื่อจัดทุกอย่างเรียบร้อบแล้ว ผลลัพธ์เราก็จะออกมาตามนี้