Print
Details: Category: บทความ Flutter | Published: 14 July 2018 | Hits: 2345

Button Icon Menu คืออะไร ?

 

ให้ภาพ อธิบายครับ อยากได้แบบนี่ ต้องเริ่มจาก

ตั่งต้นจากตรงนี่ ใครไม่ทันไปดูที่ http://androidthai.in.th/android-flutter/120-standart-structure-coding-flutter-app หรือ http://androidthai.in.th/android-flutter/124-basic-layout-on-flutter-platform-serial2 ได้ครับ

สร้าง Widget ที่ เป็น Row แบบนี้ ใครไม่ทันดูที่ http://androidthai.in.th/android-flutter/123-basic-layout-on-flutter-platform

มาจัด Content โดยการใช้ MainAxisAlignment แบบ center

แบบ spaceEvenly

แบบ spaceAround 

อันนี่ spaceBetween

 

มาสเตอร์ กลับมา spaceEvenly

ปรับ TextStyle แบบนี่

 

 แยกออกมาสร้าง Widget ที่ชื่อว่า buttonButton

โดยเมธอด buttonButton จะรับ Argument สองตัวคือ

  1. IconData รูปของ Icon
  2. String  คือ Title ที่จะแสดง

มาดูการ Call Method buttonButton

ลองทดสอบโค้ด

ทั้งหมด ครับ เมธอด buttonButton จะรับ IconData, String และ Return ค่ากลับ เป็น Object Column แบบนี่ครับ

มาสร้าง เมธอด widgetLongText ในการแสดง Text จำนวนมากๆ 

ครับลองทำดูนะครับ แต่ถ้าไม่ได้อย่างไร ? ลองดูที่ Source Code บน GitHub ของมาสเตอร์ ที่นี่ครับ   https://github.com/masterUNG/button_icon