Copyright 2024 - Custom text here

 

เป็นตอนต่อจากครั้งที่แล้ว http://androidthai.in.th/android-flutter/134-create-drawer-menu-on-flutter-platform  เราจะมาต่อยอดจาก Drawer เก่าที่เราทำไว้

มาสเตอร์ จะเพิ่มรูปภาพ ไปแสดงที่ Drawer

เหมือนตอนเรา ต้องการแสดง Image บน Flutter จะต้องไป Config ไฟร์ pubspec.yaml เสมอ http://androidthai.in.th/android-flutter/121-listview-show-image-on-flutter 

 

กำหนดที่ assets

กลับมาที่ mainPage.dart ที่เราทำค้างเอาไว้เมื่อครังที่แล้ว

ใสรูปภาพ ขนาดของรูปภาพ ความสู้ไม่ควรเกิน 80 นะ

เพิ่ม Tac creooAxisAligmnent และ mainAxisAlignment เพื่อให้ รูปภาพ และ Text ชิดซ้าย

เพิม เทค decoration ของ Object BoxDocoration กำหนดสีฟ้า เข้าไป

กำหนด padding ใน ListView ให้เป็น 0

มาสเตอร์ จะย้าย decoration ไปที่

ใต้ Containner และ ทดสอบโค้ด อ้อ ไปเปลี่ยนสี Text เป็น ขาวด้วย

 

เพิ่ม Object ListTile ส่วนของ Photo

ลองเพิ่มหลายๆ ส่วนดูครับ

ถ้าจะขีดเส้นแบ่งใช้ Object Divider การกำหนดสีของเส้น หรือ ความหนา ตาตัวอย่างเลยครับ

เพิ่มแต่ Text เปล่าๆ แบบนี่ก็ได้ครับ

แต่ถ้าต้องการให้ คลิกที่ เมนู Drawer และ Active จะต้องใช้ onTap และใ้ห Navigator.pop() ครับ ใครไม่ทันอย่างไร ? ลองไปดู้ Source Code ที่ https://github.com/masterUNG/drawer_menu ครับ

 

คอร์ส สอนโปรเจ็คแอนดรอยด์ ตัวต่อตัว

privateProject2019v1

คอร์ส เบสิกแอนดรอยด์ สอน ตัวต่อตัว

privateAndroid2019v1

คอร์ส iOS สอน ตัวต่อตัว

privateIos2019V1

คอร์ส Flutter สอน ตัวต่อตัว

privateFlutter2019v1

f t g