วิธีสร้างเลย์เอาต์ Flutter ที่ตอบสนอง

เผยแพร่แล้ว: 2022-12-25

สำหรับการกำหนดค่าแอพมือถือ การแก้ไขเป็นเรื่องปกติ เมื่อแป้นพิมพ์ของมือถือปรากฏขึ้น คุณจะต้องหมุนมือถือของคุณในแนวนอนหรือแนวตั้ง และสมาร์ทโฟน (แบบพับได้) มุมมองของหลายหน้าต่างสำหรับ Android เช่นเดียวกับ Catalyst (โครงการนี้อนุญาตให้ผู้ใช้ที่มีคุณค่าเพียงเรียกใช้แอปพลิเคชัน iOS บน macOS) โดยเฉพาะอย่างยิ่งสำหรับ iOS ได้เปิดเผยรูปแบบขนาดหน้าจอที่นับไม่ถ้วน

ในฐานะที่เป็น SDK ข้ามแพลตฟอร์มแบบโอเพ่นซอร์ส Flutter framework รองรับอุปกรณ์ขนาดหน้าจอที่หลากหลาย ดังนั้นอุปกรณ์อาจมีขนาดเล็กมากเช่นสมาร์ทวอทช์หรืออาจใหญ่พอเช่นทีวีขนาดใหญ่ เนื่องจากเฟรมเวิร์ก Flutter ทำงานบนฐานรหัสเดียว ดังนั้นด้วย Flutter จึงเป็นความท้าทายอย่างมากในการปรับแอปพลิเคชันมือถือของคุณให้มีขนาดหน้าจอจำนวนมากเช่นเดียวกับความหนาแน่นของพิกเซล

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

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

แต่ก่อนที่จะไปสร้างเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์ เราอยากจะกล่าวถึงหัวข้อเกี่ยวกับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์

การออกแบบที่ตอบสนอง

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

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

เป้าหมายของ Responsive Design คืออะไร?

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

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

ในขั้นตอนของการพัฒนาแอปตามความต้องการ นักพัฒนามักจะใช้กฎ “ปล่อยให้รุ่นมือถือไปก่อน” เนื่องจากค่อนข้างง่ายที่จะแก้ไขหรือปรับการออกแบบแอปที่สร้างขึ้นสำหรับอุปกรณ์ (เช่น สมาร์ทโฟนและทีวี) เป็นหน้าจอที่ใหญ่ขึ้น เราจึงสามารถพูดได้ว่าแนวทางนี้มีประโยชน์และสะดวก หรืออาจกล่าวได้ว่าทีมพัฒนาสามารถเปลี่ยนสิ่งที่มีขนาดเล็กให้กลายเป็นสิ่งที่ซับซ้อนได้ อย่างไรก็ตาม หากคุณกำลังมองหากระบวนการย้อนกลับ มันก็จะซับซ้อนมากขึ้นอย่างแน่นอน

ตอนนี้ให้เราบอกคุณว่า Android และ iOS จัดการเลย์เอาต์ที่ตอบสนองตามอุปกรณ์สำหรับหน้าจอมากกว่าหนึ่งขนาดได้อย่างไร

แนวทาง iOS

ขั้นแรก เค้าโครงอัตโนมัติ

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

ประการที่สอง คลาสขนาด

คลาสเหล่านี้ช่วยให้เราแยกแยะขนาดอุปกรณ์ได้ และช่วยสร้างเลย์เอาต์ที่ปรับเปลี่ยนได้ซึ่งดูดีในทุกขนาด ตลอดจนการวางแนวของ iPad และ iPhone ดังนั้นเราจึงอัปเดตส่วนติดต่อผู้ใช้ได้ง่ายๆ

ประการที่สาม องค์ประกอบ UI

ตัวควบคุม UISplitView

UIViewController

UIStackView เป็นต้น

เป็นองค์ประกอบส่วนต่อประสานผู้ใช้บางส่วนที่ช่วยสร้างส่วนต่อประสานผู้ใช้ที่ตอบสนองบน iOS

อ่านเพิ่มเติม- บริษัทพัฒนา Flutter 5 อันดับแรกในปี 2023

แนวทาง Android

ขั้นแรก เค้าโครงข้อจำกัด

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

ประการที่สอง เค้าโครงทางเลือก

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

ประการที่สามชิ้นส่วน

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

ประการที่สี่ กราฟิกแบบเวกเตอร์

หากต้องการเพิ่มหน้าจอ Android จำนวนมาก สามารถสร้างกราฟิกแบบเวกเตอร์เหล่านี้ได้อย่างง่ายดายด้วยความช่วยเหลือจาก Vector Asset Studio ใน Android Studio

การตอบสนองใน Flutter Layout

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

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

ประการแรก MediaQuery

การใช้ MediaQuery นั้นคุ้มค่าอย่างแน่นอน ซึ่งจะช่วยให้คุณสามารถชดเชยขนาด (ในแง่ของความกว้าง/ความสูง) และเรียกคืนการวางแนว (ในแง่ของแนวตั้ง/แนวนอน) ของหน้าจออุปกรณ์ได้อย่างแน่นอน

ประการที่สอง LayoutBuilder

ด้วยความช่วยเหลือของ LayoutBuilder คุณสามารถรับออบเจกต์ชื่อ BoxConstraints ได้อย่างง่ายดาย ซึ่งสามารถใช้ในการกำหนด maxHeight และ maxWidth ของวิดเจ็ต

ประการที่สาม OrientationBuilder

การใช้คลาสที่ชื่อว่า OrientationBuilder จะดีที่สุดหากคุณยินดีที่จะกำหนดการวางแนวปัจจุบันของวิดเจ็ต

ประการที่สี่ ขยายและยืดหยุ่น

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

ประการที่ห้า FractionallySizedBox

วิดเจ็ตนี้ซึ่งรู้จักกันในชื่อ FractionallySizedBox ช่วยในการปรับขนาด (เป็นส่วนย่อยของพื้นที่ว่างทั้งหมด) ลูกของมัน มันมีประโยชน์อย่างมากในวิดเจ็ตแบบขยายและแบบยืดหยุ่น

ประการที่หก อัตราส่วนภาพ

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

เทคสุดท้าย

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

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

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