Flutter UI Challenge-1

สวัสดีทุกคน!. ฉันต้องการเริ่มซีรีส์ความท้าทาย UI ใหม่สำหรับการกระพือปีก นอกจากนี้ ฉันต้องการแบ่งปันประสบการณ์การพัฒนาของฉันกับ UI เหล่านี้ ฉันเป็นแฟนตัวยงของ Flutter โอเค ไม่มีคำที่น่าเบื่ออีกต่อไป มาเริ่มความท้าทาย UI ของวันนี้กัน

ฉันพบสิ่งนี้จากอินเทอร์เน็ตและพยายามใช้งานดังนี้ ก่อนอื่นให้พิจารณาหน้าจอแรก หลังจากศึกษา UI แล้ว ฉันแยกหน้าจอออกเป็นสองส่วน
1) พื้นที่ด้านบน - รายละเอียดรูปภาพโปรไฟล์ ปุ่มสองปุ่ม
2) พื้นที่ด้านล่าง - พื้นที่เล็กๆ สามส่วนที่มีชุดไอคอน การยืนยันอีเมล ข่าวสาร และการอัปเดต
มาสร้างแต่ละส่วนให้ถูกต้องกันเถอะ อย่างไรก็ตาม สำหรับสองส่วนข้างต้น เราจำเป็นต้องมีวิดเจ็ตเลย์เอาต์แบบหลายลูกใน flutter(เช่น: Row, Column,etc..)

หน้าแรก ส่วนบน

ในขั้นแรกในการสร้าง UI นี้ ฉันได้สร้างหน้าจอหลักโดยใช้ Scaffold Widget ในตัววิดเจ็ตนั้น ฉันใช้คอลัมน์เพื่อประกาศวิดเจ็ตทั้งหมดที่อยู่ภายใน นี่คือส่วนหลักของหน้าจอหลักด้านบน
1)รูปโปรไฟล์ ชื่อโปรไฟล์ ข้อความย่อย ไอคอนกระดิ่ง- ทั้งหมดนี้เป็นรายการแนวนอน ดังนั้นเราจึงสามารถใช้ Row(Multi child Layout) สำหรับสิ่งเหล่านี้ได้

2) หมายเลขตำรวจ ปุ่มตัวเลข และปุ่มไอคอนด้านขวา - เราสามารถใช้วิดเจ็ต Row สำหรับสิ่งนี้

3)เส้นประแนวนอน-สามารถใช้ข้อความสำหรับสิ่งนี้

4) จำนวน มูลค่า และวันที่- สามารถใช้แถวร่วมกับคอลัมน์สำหรับข้อความแนวตั้ง

5) สองปุ่มแนวนอน - แถวที่มีสองคอนเทนเนอร์

หลังจากเพิ่มส่วนต่างๆ ด้านบน ส่วนบนของบ้านจะเป็นแบบนี้

ที่นี่ฉันสร้างวิดเจ็ตแยกต่างหากสำหรับหน้าแรกของหน้าจอหลัก นอกจากนี้ยังเป็นวิดเจ็ตไร้สัญชาติด้วย ไม่มีวิดเจ็ตที่ซับซ้อนที่นี่ คอนเทนเนอร์ส่วนใหญ่ใช้เพื่อเพิ่มการตกแต่งและใช้ ClipRect เพื่อเพิ่มเส้นขอบวงกลมให้กับรูปภาพ ใช้ VerticalDivider Widget เพื่อแบ่งสองปุ่มที่นี่

หน้าแรก ส่วนล่าง

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

วิธีการของฉันสร้างสามคอนเทนเนอร์และวางไว้ภายในหนึ่งต่อจากคอนเทนเนอร์อื่น

คอนเทนเนอร์รายการไอคอน (คอนเทนเนอร์หลัก)

• Bot Alert Container- (รวมข้อความยืนยันอีเมลและดูข้อความทั้งหมด)

• ข่าวสารและอัปเดตคอนเทนเนอร์

1) คอนเทนเนอร์รายการไอคอน (คอนเทนเนอร์หลัก) - สร้างคอนเทนเนอร์ที่กำหนดเองสำหรับไอคอน ไอคอนแสดงแถวในแนวนอน

2) Bot Alert Container- คอนเทนเนอร์ย่อยของ Iconlist Container ใช้วิดเจ็ต Row สองแถวสำหรับข้อความ Bot Alert ปุ่มยืนยันอีเมลและข้อความ

3)News and Updates Container- นี่คือลูกของ Bot Alert Container ยังใช้สองแถว Widgets สำหรับข้อความและรูปภาพ

บันทึก:

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

ดังนั้นส่วนหลักจึงเสร็จสมบูรณ์ การใช้ด้านบน IconWidget และส่วนด้านล่างของวิดเจ็ตอื่น ๆ ถูกสร้างขึ้นดังนี้

บันทึก:

คุณจะสับสนเกี่ยวกับการตกแต่งภาชนะด้านบน เราต้องใช้ Decorations อย่างต่อเนื่องในแอป flutter เพื่อลดการอ่านและเพิ่มความสามารถในการรักษา ฉันได้ใส่ไว้ในคลาสแบบนี้

สรุปทั้งหมด

ตอนนี้ทุกส่วนเสร็จเรียบร้อยแล้ว และเราต้องสร้าง UI แบบเต็ม เลยเอามาใส่ใน Scaffold และสร้าง Home Screen ดังนี้

บทสรุป

ตามแนวทางของฉันสำหรับ UI นี้อาจแตกต่างจากของคุณ ดังนั้นแสดงความคิดเห็นด้านล่าง คุณสามารถรับซอร์สโค้ดแบบเต็มได้ที่นี่

หวังว่าคุณจะสนุกกับบทความ อย่าลืมปรบมือ !!. ขอบคุณ.