สวัสดีชาวเดฟทุกคนครับ สำหรับบทความนี้ ก็ถือว่าเป็นการแนะนำเล็กๆน้อยๆ เกี่ยวกับการใช้การปุ่ม (Button) ใน Fluter ฉบับผู้เริ่มต้นแล้วกันน่ะครับ จริงๆแล้วอยากเขียนบทความอธิบายเกี่ยวกับ Flutter ก่อน แต่น่าจะต้องใช้เวลารวบรวมข้อมูลสักพัก เลยเริ่มจาก เรื่องนี้ก่อนแล้วกัน..จริงๆคือกันลืม 555+ 😆
Flutter เป็น Framework ที่ใช้สร้าง UI สำหรับ Mobile Application แบบ Cross Platform ทั้ง Android และ iOSโดยภาษาที่ใช้ใน Flutter คือภาษา Dart ซึ่งถูกพัฒนาโดยทีมงาน Google และที่สำคัญคือเป็น Open Source Platform ซึ่งสามารถใช้งานได้ฟรี ดีงามพระรามแปด อะไรเช่นนี้..
สำหรับการใช้งานปุ่ม (Button) นั้น ทาง Flutter เค้าก็ได้เตรียมมาให้เราได้เลือกใช้งานกันหลากหลายรูปแบบเลยทีเดียว ไปดูกันเลยครับว่า มีอะไรกันบ้าง ^^
- RaisedButton
- FlatButton
- OutlineButton
- ButtonBar
- FloatingActionButton
- RawMaterialButton (base of RaisedButton and FlatButton)
- Create Button from other widget
ก่อนจะไปดูปุ่มแต่ละแบบ ขออธิบายเกี่ยวกับองค์ประกอบสำคัญๆ ของปุ่มกันก่อนแล้วกันน่ะ จะเข้าใจตรงกัน โดยองค์ประกอบหลักจะมีดังนี้
TypeButton { onPressed: /* ส่วนของการ handle callback */ shape: /* ส่วนของการกำหนดลักษณะ รูปร่าง */ color: /* ส่วนของกำหนดสีของพื้นหลัง */
child: /* ส่วนของ widget ลูก */}
องค์ประกอบหลักๆของปุ่ม (Button) ก็จะมีประมาณนี้ครับ ว่าไปก็ดูใช้งานง่ายดีน่ะ มีให้เรากำหนดทุกอย่างเลย สะดวกดีแท้ เอาล่ะ!!! เราไปดูปุ่มแต่ละแบบกันดีกว่า ว่ามันแตกต่างกันยังไงบ้าง แล้วแบบไหนเหมาะกับการใช้งานอะไร ลุยโล๊ดดดดดด…..
RaisedButton
- สำหรับปุ่มแบบแรก คือ Raised Button ซึ่งเป็นปุ่มจะถูกนำมาใช้งานค่อยข้างบ่อย
- Raised Button คือ ปุ่มที่มีมิติ มีสีพื้นหลัง(Color) มีสีขอบ (Border)
- ข้อแนะนำ คือไม่ควรใช้ร่วมกับ Dialogs หรือ Cards
FlatButton
- Flat Button คือ ปุ่มที่ไม่มีมิติ ไม่มีสีพื้นหลัง(Color) ไม่มีสีขอบ (Border) ส่วนใหญ่จะถูกใช้งานร่วมกับ Dialogs และ Cards โดยจะอยู่บริเวณชิดมุมด้านล่าง
- ข้อแนะนำ คือการจัดวางตำแหน่งของปุ่ม ไม่ควรจัดวางให้อยู่ในตำแหน่งตรงกลางของเนื้อหา เนื่องจากปุ่มมีลักษณะค่อยข้างกลมกลืนกับเนื้อหา อาจทำให้มองได้ยาก
OutlineButton
- Outline Button คือ ปุ่มที่มีลักษณะเหมือนกับ FlatButton ที่เซ็ตค่า shape: RoundedRectangleBorder()
- เป็นปุ่มที่มีเฉพาะเส้นขอบ (Default สีเทา) พื้นหลังใส (Transparent)
- สามารถปรับค่ารูปร่าง และลักษณะการแสดงได้ ด้วยค่า properties เหล่านี้ borderSide disabledBorderColor highlightedBorderColor
- ***ถ้า onPressed มีค่าเป็น null ปุ่มจะปิดโดยอัตโนมัติ คล้ายกับ FlatButton และ RaisedButton
ButtonBar
- Button Bar คือ พื้นของการจัดวางปุ่มในแนวนอน (Horizontally) โดยมีระยะห่างภายใน (Padding)
- ข้อแนะนำ คือใช้ร่วมกับ Dialog (AlertDialog, SimpleDialog, showDialog) สำหรับเป็น Action ของปุ่ม โดยจัดวางไว้ตำแหน่งด้านล่าง
- และโดยปกติแล้วจะจัดวางอยู่ตำแหน่งด้านล่างของ Card Widget
FloatingActionButton
- Floating Action Button คือ ปุ่ม Icon วงกลม ที่ลอยอยู่บนสุดของ Content บนหน้าจอโดยจะมีได้เพียง 1 ปุ่มต่อหน้าเท่านั้น ปุ่มนี้ถูกใช้มากที่สุดบน Scaffold
- ข้อแนะนำ คือควรใช้ปุ่มนี้สำหรับ การสร้าง(Create) , การแชร์ (Share), การลิ้งค์ไปยังส่วนอื่นๆของแอพ (Navigate)
- สามารถกำหนดตำแหน่งของปุ่มบนหน้าจอได้ โดยใช้ Property ของ Scaffold ชื่อ floatingActionButtonLocation
- ***ถ้า onPressed มีค่าเป็น null ปุ่มจะไม่ทำงาน แต่ว่าสีพื้นหลังของปุ่มไม่เปลี่ยนแปลงเหมือนกับ RaisedButton (Default เป็นสีเทา) โดยเราต้องจัดการเรื่องสีพื้นหลังของปุ่มเอง
Scaffold คือ Class ที่จัดการเกี่ยวกับการออกแบบ Layout พื้นฐาน เช่น Drawers Snack Bars หรือ Bottom Sheets.
RawMaterialButton
- ปุ่มที่เมื่อสร้างจะไม่ได้อ้างอิงกับค่าของ Theme และ ButtonTheme. ซึ่งปุ่มนี้คือ ปุ่มต้นแบบ(base) ของ RaisedButton และ FlatButton นั้นเอง
- สำหรับปุ่มชนิดนี้ไม่ค่อยได้ถูกนำไปใช้งานโดยตรง แต่จะถูกใช้งานโอบๆ ^^
Create Button from other widget
- เราสามารถสร้างปุ่มขึ้นมาเองได้โดยใช้ widget อื่นๆ อันที่จริงแล้ว การออกแบบ UI ด้วย Flutter นั้นไม่มีสูตร หรือท่า ตายตัว เราสามารถที่จะพลิกแพลงได้เสมอ เนื่องจาก Flutter ออกแบบมาค่อยข้างยืดหยุ่น ให้เราสามารถ Custom widget ต่างๆ ได้อย่างอิสระ โดยนำเอาสิ่งที่มีมาให้มาประยุกต์ใช้นั้นเอง
“จินตนาการ สำคัญ กว่าความรู้”
เย้!! จบแล้วววว++ เป็นยังไงกันบ้างครับ น่าจะพอเข้าใจเกี่ยวกับปุ่ม (Button) แต่ละแบบที่ Flutter ได้เตรียมมาให้ใช้งานมากขึ้น หากต้องการศึกษาเพิ่มเติม สามารถเข้าไปอ่านในเว็บไซต์ของ Flutter ได้เลย Doc ค่อยข้างดีมาก สามารถ copy ตัวอย่างไปลอง Run ใน app ได้เลยครับ
สุดท้ายก็หวังว่า บทความนี้จะเป็นประโยชน์ไม่มากก็น้อย สำหรับทำความเข้าใจและนำไปต่อยอดใช้งานกับการเขียน Flutter App หากมีส่วนใดผิดพลาดก็ขออภัยไว้ ณ ที่นี่ด้วยครับ ^^
Reference:
(ข้อมูลอาจมีข้อผิดพลาด ถ้าจะเอาบทความนี้ไปอ้างอิงที่อื่นให้ตรวจสอบให้ดีก่อนนะครับ ขอบคุณครับ)
สำหรับวันนี้ ต้องขอลาไปก่อน สวัสดีครับ NottDev :)
