โดย Ashita Prasad ( LinkedIn , Twitter ), fluttergems.dev

นี่เป็นบทความที่สองในชุดบทความเชิงลึก“Mastering Dart & Flutter DevTools” ในบทความนี้ คุณจะได้เรียนรู้เกี่ยวกับ Flutter Inspector ของ DevTools ผ่านกรณีศึกษาแอปตัวอย่าง ในกรณีที่คุณต้องการดูบทความอื่นๆ ในชุดนี้ เพียงคลิกที่ลิงค์ด้านล่าง:

• ส่วนที่ 1: บทนำ & การติดตั้ง
• ตอนที่ 2: Flutter Inspector [คุณอยู่ที่นี่]
• ส่วนที่ 3: เครื่องมือขนาดแอป
• ส่วนที่ 4: มุมมองเครือข่าย
• ส่วนที่ 5: มุมมองการบันทึก
• ส่วนที่ 6: มุมมองตัวสร้างโปรไฟล์ CPU
• ตอนที่ 7: มุมมองหน่วยความจำ
• ตอนที่ 8: มุมมองประสิทธิภาพ

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

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

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

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

สารวัตรกระพือ

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

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

ตอนนี้ เรามาเริ่มกันที่กรณีศึกษา

ขั้นตอนที่ 1: รับซอร์สโค้ด

สร้างสำเนาในเครื่องของพื้นที่เก็บข้อมูลด้านล่าง

เปิด repo ใน GitHub ดังที่แสดงด้านล่าง

คลิกที่ปุ่มสีเขียว<> Codeจากนั้นไปที่Localแท็บและคลิกDownload ZIPเพื่อดาวน์โหลดซอร์สโค้ดสำหรับแบบฝึกหัดนี้

แตกไฟล์โดยใช้เครื่องมือคลายซิป

ขณะนี้เรามีสำเนาของแหล่งที่มาในเครื่องแล้วในflutter_inspector_demo-masterโฟลเดอร์

ขั้นตอนที่ 2: การเปิดโครงการใน VS Code

เรียกใช้ VS Code เปิดโฟลเดอร์โครงการใน VS Code และไปที่pubspec.yamlไฟล์

คลิกGet Packagesเพื่อดึงแพ็คเกจทั้งหมดที่จำเป็นสำหรับโครงการ

ขั้นตอนที่ 3: เปิดตัว Flutter Inspector ใน VS Code

ก่อนที่เราจะเปิดตัว Flutter Inspector เราต้องเปิดแอป

คลิกNo Deviceที่แถบสถานะและเลือกอุปกรณ์เป้าหมาย หากเลือกอุปกรณ์เริ่มต้นแล้ว คุณสามารถคลิกที่อุปกรณ์นั้นและเปลี่ยนอุปกรณ์เป้าหมายได้

เราจะดำเนินการต่อและเลือกโปรแกรมจำลอง Android เป็นอุปกรณ์เป้าหมาย

ตอนนี้คลิกRunเพื่อเรียกใช้แอพ (ฟังก์ชั่นหลัก) ดังที่แสดงในภาพด้านล่าง

Flutter Inspector สามารถเปิดใช้งานได้โดยใช้คำแนะนำต่อไปนี้:

Click Dart DevTools in status bar > 
Click Open DevTools in Web Browser > Click Flutter Inspector tab

      
                

                    
                    
                
            

หน้าต่าง Flutter Inspector มีสามส่วนหลัก:

1. แถบเครื่องมือ
2. บานหน้าต่างต้นไม้วิดเจ็ต
3. เค้าโครง Explorer / บานหน้าต่างรายละเอียดวิดเจ็ต

1. แถบเครื่องมือของ Flutter Inspector

แถบเครื่องมือของ Flutter Inspector มีคุณสมบัติที่ช่วยในการดีบักปัญหาเลย์เอาต์ หากต้องการเปิดใช้งานคุณสมบัติใดๆ คุณเพียงแค่กดปุ่มที่เกี่ยวข้องในแถบเครื่องมือ คุณสมบัติที่มีอยู่คือ:

• เลือกโหมดวิดเจ็ต —สามารถเลือกวิดเจ็ตได้ใน Widget Tree Panel แบบโต้ตอบเพื่อตรวจสอบคุณสมบัติของวิดเจ็ต แต่อาจยุ่งยากในกรณีที่แผนผังวิดเจ็ตอยู่ลึก การเปิดใช้งานโหมดนี้ทำให้ผู้ใช้สามารถเลือกวิดเจ็ตได้โดยตรงบน UI ของแอป เพื่อให้สามารถตรวจสอบเพิ่มเติมได้
• ภาพเคลื่อนไหวแบบช้า — เมื่อเปิดใช้งานภาพเคลื่อนไหวแบบช้า ภาพเคลื่อนไหวทั้งหมดจะทำงานช้าลง 5 เท่า ช่วยให้ตรวจสอบภาพได้ง่าย มีประโยชน์สำหรับการสังเกตและปรับแต่งแอนิเมชันที่อาจดูไม่ถูกต้องทั้งหมด
• แสดงแนวทาง — เมื่อเปิดใช้งานคุณสมบัตินี้ แนวทางจะถูกวาดในแอพที่แสดงกล่องแสดงภาพ การจัดตำแหน่ง ช่องว่างภายใน มุมมองการเลื่อน การตัด และตัวเว้นวรรค เครื่องมือนี้สามารถใช้เพื่อทำความเข้าใจและแก้ไขเลย์เอาต์ได้ดีขึ้น เช่น การจัดแนววิดเจ็ตให้ดีขึ้น หรือลบช่องว่างภายในที่ไม่ต้องการออก
• แสดงเส้นฐาน — เครื่องมือนี้มีประโยชน์สำหรับการตรวจสอบการจัดแนวข้อความด้วยสายตาโดยใช้เส้นฐานที่เป็นเส้นแนวนอนที่ใช้สำหรับการวางตำแหน่งข้อความ การเลือกตัวเลือกนี้จะทำให้เส้นฐานทั้งหมดมองเห็นได้ ช่วยให้คุณตรวจสอบการจัดตำแหน่งแนวตั้งของข้อความได้อย่างแม่นยำ
• ไฮไลท์ทาสีใหม่ — เครื่องมือนี้มีประโยชน์สำหรับการเน้นวิดเจ็ตที่มีการทาสีซ้ำบ่อยๆ ซึ่งอาจขัดขวางประสิทธิภาพของแอป ทุกครั้งที่ทาสีกล่องใหม่ จะมีการวาดเส้นขอบรอบกล่องด้วยสีรุ้งที่หมุนได้
• ไฮไลท์รูปภาพขนาดใหญ่ — อย่างที่ชื่อบอก เครื่องมือนี้เน้นรูปภาพความละเอียดสูงที่ใช้หน่วยความจำมากเกินไปด้วยการกลับสีและพลิกกลับ การแก้ไขรูปภาพเหล่านี้มีความสำคัญเนื่องจากอาจทำให้ประสิทธิภาพการทำงานลดลง โดยเฉพาะบนอุปกรณ์ระดับล่าง และในกรณีที่คุณมีรูปภาพจำนวนมากบนหน้าจอ เช่น ใน GridView หรือ ListView

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

3. เค้าโครง Explorer / บานหน้าต่างรายละเอียดวิดเจ็ต

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

หลังจากทำความคุ้นเคยกับอินเทอร์เฟซ (กายวิภาคศาสตร์) ของหน้า Flutter Inspector แล้ว ให้เราดำเนินการกรณีศึกษาต่อไป

กรณีศึกษา

วัตถุประสงค์ของเราคือการใช้ Flutter Inspector เพื่อแก้ไขจุดบกพร่องของเลย์เอาต์ในแอปตัวอย่าง เพื่อให้เราได้ UI ที่เราต้องการ

เมื่อดูที่ UI ทั้งสอง เราสามารถระบุปัญหาหลัก 4 ประการในเลย์เอาต์:

• ปัญหาเลย์เอาต์ #1 — ข้อความล้นในแถวแรก
• ปัญหาเลย์เอาต์ #2 — อิโมจิไม่ได้เว้นระยะอย่างเหมาะสมและไม่ได้อยู่กึ่งกลางของพื้นที่แนวตั้งที่เหลืออยู่ในหน้า
• ปัญหาเค้าโครง # 3 — ตัวแบ่งแนวนอนหายไป
• ปัญหาเค้าโครง #4 — ปุ่มส่งไม่ได้อยู่กึ่งกลาง

ปัญหาเค้าโครง #1

ปัญหาแรกที่เราต้องแก้ไขใน UI ของเราคือข้อความล้น

ในการเปิดตัว Flutter Inspector เราจะเห็นError 1/1ใน Widget Tree Panel

คลิกที่ปุ่มลงตามที่แสดงในภาพด้านล่างเพื่อนำทางไปยังข้อผิดพลาดที่ก่อให้เกิดวิดเจ็ต ข้อผิดพลาดที่พบคือ‘A RenderFlex overflowed by...’ข้อผิดพลาด ซึ่งเป็นหนึ่งในข้อผิดพลาดที่เกิดขึ้นบ่อยที่สุด คุณจะเห็นแถบสีเหลืองและดำซึ่งระบุพื้นที่ล้นทั้งใน UI ของแอปและ Layout Explorer

ดังที่แสดงในภาพด้านล่าง สาเหตุของข้อผิดพลาดนี้เกิดจากการที่วิดเจ็ตลูกTextไม่ได้จำกัดขนาดและพยายามให้กว้างกว่า ( by 237 pixels) มากกว่าความกว้างที่อนุญาตโดยพาRowเรนต์ ( )

ดังที่แสดงในภาพด้านล่าง เราสามารถดีบักปัญหานี้ได้โดยตรงจาก Layout Explorer โดยตั้งค่าflexวิดTextเจ็ตเป็น 1 วิธีนี้เป็นการบอกTextวิดเจ็ตว่าสามารถขยายได้จนกว่าจะเต็มพื้นที่ว่างตามแกนหลักของRowวิดเจ็ต

โวล่า! ปัญหาได้รับการแก้ไขแล้ว

แต่เดี๋ยวก่อน หากคุณดำเนินการต่อและรีสตาร์ทแอป ปัญหาจะกลับมาหลอกหลอนเราอีกครั้ง

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

ให้เราดำเนินการต่อและแก้ไขรหัสปัญหา #1 ที่มีอยู่ที่ระบุด้านล่าง

// Problem #1
Row(
  children: const [
    Text(
      'Please provide your valuable feedback by sharing your experience with us!',
      style: TextStyle(
        fontSize: 18.0,
      ),
    ),
  ],
),

รหัสที่แก้ไขได้รับด้านล่าง:

// Problem #1
Row(
  children: const [
    Expanded(
      child: Text(
        'Please provide your valuable feedback by sharing your experience with us!',
        style: TextStyle(
          fontSize: 18.0,
        ),
      ),
    ),
  ],
),

หลังจากแก้ไขปัญหาเลย์เอาต์แรกแล้ว UI ของแอปของเราจะมีลักษณะดังนี้

ปัญหาเค้าโครง #2

ปัญหาต่อไปที่เราต้องแก้ไขคือเค้าโครงของอิโมจิ

ดังที่แสดงในภาพด้านบน อิโมจิควรอยู่กึ่งกลางของพื้นที่ว่างในแนวตั้งที่เหลืออยู่ นอกจากนี้ อิโมจิควรมีระยะห่างเท่าๆ กัน

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

ให้เราเริ่มต้นด้วยการสร้างระยะห่างระหว่างอิโมจิ

ดังที่แสดงในภาพด้านบน คลิกที่Rowวิดเจ็ตในแผนผังวิดเจ็ตที่มีEmojiวิดเจ็ต ใน Layout Explorer วิดเจ็ตภายในRowจะถูกจัดเรียงstartตามแกนหลัก คลิกที่ดร็อปดาวน์และเลือกการจัดตำแหน่งspaceEvenlyเป็น ตอนนี้คุณสามารถสังเกตได้ว่าEmojiวิดเจ็ตมีระยะห่างเท่าๆ กันตามที่เราต้องการ

ต่อไป เราต้องการขยายRowอิโมจิที่มีอีโมจินี้เพื่อครอบครองพื้นที่แนวตั้งที่เหลือทั้งหมด

ดังที่มองเห็นได้ใน Widget Tree Pane ในภาพด้านบน วิดเจ็ต Rowที่มีEmojiคือลูกที่สองของColumn. ไปข้างหน้าและคลิกที่Columnวิดเจ็ตหลักแล้วเลื่อนลงเพื่อค้นหาสิ่งนี้Rowในตัวสำรวจโครงร่าง ตอนนี้ตั้งค่าflexของสิ่งนี้Rowเป็น1. เนื่องจากพาเรนต์ของสิ่งนี้Rowคือ a Columnแกนหลักของมันจะอยู่ในแนวตั้ง ดังนั้นการตั้งค่าflexเป็น1บอกสิ่งนี้Rowว่าสามารถขยายในแนวตั้งได้ตราบเท่าที่Columnอนุญาต

แม้ว่าเราจะสามารถขยายแถวอีโมจิในแนวตั้งได้ แต่อิโมจิก็ยังไม่อยู่ตรงกลางตามที่ต้องการ นี่เป็นเพราะแต่ละEmojiวิดเจ็ตColumnมีอีโมจิTextและป้ายกำกับTextเป็นลูกของมัน เมื่อแถวขยายในแนวตั้ง คอลัมน์ก็ขยายตามไปด้วย ดังที่เห็นได้จากแนวทางปฏิบัติ แต่ลูกเหล่านี้อยู่ในแนวเดียวกับจุดเริ่มต้นของแกนหลักของColumnวิดเจ็ต ดังนั้นตำแหน่งจะไม่เปลี่ยนแปลง ดังที่แสดงในภาพด้านล่าง เราสามารถเปลี่ยนการจัดตำแหน่งผ่าน Layout Explorer คลิกที่Columnวิดเจ็ตภายในแต่ละEmojiวิดเจ็ตและเปลี่ยนการจัดแนวแกนหลักcenterเป็น

เนื่องจากนี่เป็นวิธีแก้ปัญหาที่จำเป็น ให้เราดำเนินการเปลี่ยนแปลงโค้ดที่จำเป็นต่อไป

class Emoji extends StatelessWidget {
  ....

  @override
  Widget build(BuildContext context) {
    return Column(
      
      // Add this line to align Emoji & Text to center
      mainAxisAlignment: MainAxisAlignment.center,

      children: [
        ...      
      ],
    );
  }
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {

  ...
              //Problem #2

              // Wrap the Row widget inside an expanded widget to 
              // expand vertically
              Expanded(
                child: Row(
                  
                  // Add spaceEvenly main axis alignment inside Row
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,

                  children: const [
                    Emoji('', 'Good'),
                    Emoji('', 'Average'),
                    Emoji('', 'Bad'),
                  ],
                ),
              ),
    ...
  }
}

• วิดเจ็ ตRowของEmojiวิดเจ็ตถูกรวมไว้ในExpandedวิดเจ็ตเพื่อให้สามารถครอบครองพื้นที่แนวตั้งที่เหลือทั้งหมดได้
• mainAxisAlignment: MainAxisAlignment.spaceEvenlyเพิ่มในแถวด้านบนเพื่อเว้นวรรคEmojiวิดเจ็ตให้เท่ากันในแนวนอน
• mainAxisAlignment: MainAxisAlignment.centerเพิ่มในColumnวิดเจ็ตของEmojito center เพื่อจัดตำแหน่งลูกในแนวตั้ง

ปัญหาเค้าโครง #3

งานต่อไปคือการหากรณีที่อยากรู้อยากเห็นของตัวแบ่งแนวนอนที่ขาดหายไป

ในการตรวจสอบแผนผังวิดเจ็ตตามที่แสดงด้านล่าง เราจะเห็นว่าแม้ว่าDividerวิดเจ็ตนั้นมีอยู่ แต่ก็ยังมองไม่เห็นใน UI หากเราคลิกที่วิดเจ็ตและดูที่ Layout Explorer ความกว้างของวิดเจ็ตจะถูกคำนวณโดย0.0ที่ไม่มีข้อจำกัดด้านความกว้าง

ดำเนินการต่อและตั้งค่าflexas 1เพื่อให้มีการจำกัดความกว้างและขยายเพื่อครอบครองความกว้างที่มีอยู่ทั้งหมดRowของ

ให้เราทำการเปลี่ยนแปลงโค้ดที่จำเป็นโดยห่อ วิดเจ็ต Dividerไว้Expandedด้านในดังที่แสดงด้านล่าง:

// Problem #3
Row(
  children: const [
    // Wrap the Divider inside the Expanded widget
    // to provide width constrain
    Expanded(
      child: Divider(
        color: Colors.black,
      ),
    ),
  ],
),

ปัญหาเค้าโครง #4

งานสุดท้ายที่เหลืออยู่คือจัดตำแหน่งSubmitปุ่ม ให้อยู่ตรงกลาง

ปัญหานี้สามารถแก้ไขได้อย่างรวดเร็วโดยเปลี่ยนการจัดแนวแกนหลักของลูกภายในRowวิดเจ็ต สุดท้าย คลิกที่วิดเจ็ตและเลือกcenterจากดร็อปดาวน์การจัดแนวแกนหลักที่แสดงด้านล่าง

ให้เราดำเนินการเปลี่ยนแปลงรหัสที่เกี่ยวข้อง

// Problem #4
Row(
  // Add mainAxisAlignment as center
  mainAxisAlignment: MainAxisAlignment.center,

  children: [
    ElevatedButton(
      onPressed: () {
        debugPrint('Submit button pressed.');
      },
      child: const Text(
        'Submit',
      ),
    ),
  ],
),

เย้! เราได้รับเค้าโครง UI ที่ต้องการด้วยความช่วยเหลือของเครื่องมือ Flutter Inspector ที่ช่วยเราในการแก้ไขจุดบกพร่องด้วยภาพ

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

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

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

• ส่วนที่ 1: บทนำ & การติดตั้ง
• ส่วนที่ 3: เครื่องมือขนาดแอป
• ส่วนที่ 4: มุมมองเครือข่าย
• ส่วนที่ 5: มุมมองการบันทึก
• ส่วนที่ 6: มุมมองตัวสร้างโปรไฟล์ CPU
• ตอนที่ 7: มุมมองหน่วยความจำ
• ตอนที่ 8: มุมมองประสิทธิภาพ

ขอขอบคุณเป็นพิเศษสำหรับKamal Shree (GDE — Dart & Flutter) สำหรับการตรวจสอบบทความนี้