Google Flutter

Flutter 3 นาที กับ SingleChildScrollView: เริ่มต้นสร้างเนื้อหาแบบ Scroll ได้เอง ง่ายจัง!

เรื่องที่เกี่ยวข้อง - ,

Google Flutter วันละนิดกับโค้ชพลวันนี้ เราจะมาเริ่มต้นพื้นฐาน ขอมาแนะนำการสร้างเนื้อหาที่ Scroll ด้วยตัวเองกัน หลายคนที่ทำเว็บ หรือทำโปรแกรม Desktop มาอาจจะมองว่า เรื่อง Scroll เป็นเรื่องธรรมดาทั่วไป แต่พอเจอปัญหาจริงๆ แล้ว อาจจะร้องเยี๊ยกเหมือนโค้ชพลก็ได้

กรณีพวกที่เราต้องทำ Scroll เอง มีหลากหลาย อาทิ หลายครั้งที่มีเนื้อหาที่ล้นจอออกมา

หรือต้องการกำหนดเฉพาะส่วนของ User Interface ให้ Scroll ได้ แต่ไม่ได้หมายถึง Content ทั้งหน้าแอพ เช่น

  • ส่วนของ Comment ใน Youtube ที่ Scroll แล้วไม่ได้เลื่อนส่วนของตัวเล่นคลิปวิดีโอ Video Player ติดไปด้วย
  • ส่วนของ User Review ในแอพ E-commerce ทั่วไป

จุดนี้เราสามารถเอา SingleChildScrollView มาใช้ในการครอบส่วนของ Widget ที่ต้องการทำให้เกิดการ Scroll ได้ และการเอามันมาใช้ ต้องมีการใช้งานควบคู่กับ Widget หรือการกำหนดค่าอื่นไปด้วย

มาเรียนรู้วิธีใช้ไปด้วยกันในคลิปวิดีโอเลย

เรื่องที่เราจะคุย และทำกันในคลิปวิดีโอ

  • แนะนำกรณีที่เราต้องการสร้าง Scroll ในแอพด้วยตัวเอง
  • แนะนำวิธีใช้ SingleChildScrollView
  • เทคนิคการใช้ SingleChildScrollView ร่วมกับ Widget ตัวอื่น
  • หลุมพรางที่มักพลาดในการใช้ SingleChildScrollView แรกๆ

สามารถโคลนโปรเจคมาทำไปด้วยกันได้จาก

https://github.com/teerasej/nextflow_widget_singlechildscrollview

เดี๋ยวๆ แล้วมันต่างยังไงกับ Listview แล้วเลือกใช้ตัวไหนดี?

พอปล่อยวิธีใช้ SingleChildScrollView ออกไป ก็มีหลายคนเข้ามาถาม ว่าระหว่าง SingleChildScrollView กับ ListView ใช้ตัวไหนดี?

โค้ชพลเขียนสรุปข้อมูลไว้เป็นแนวทางที่นี่แล้วจ้า

ดูวิดีโอทั้งหมดในซีรี่ย์ Flutter 3 นาที

และยังสามารถกดดูวิดีโอทั้งหมดในซีรี่ส์ Flutter 3 นาที ได้ที่นี่เลย อย่าลืมกด subscribe พร้อมเปิดกระดิ่งแจ้งเตือนล่ะ

เริ่มต้นเรียนรู้สร้างแอพ iOS และ Android ด้วย Google Flutter ไปกับโค้ชพล

เหมาะสำหรับผู้เริ่มต้น

เขียนครั้งเดียว ใช้ได้ทั้งระบบ iOS และ Android ประหยัดเวลา

เรียนได้ทุกเวลา ไม่มีวันหมดอายุ

ได้รู้ตั้งแต่วิธีติดตั้งโปรแกรม จนเอาขึ้นApp Store และ Play Store

ได้ทำแอพของจริง เริ่มต้นจาก 0 ทุกโปรเจค มีระบบถามตอบ กรณีติดปัญหา

 

Loading Facebook Comments ...
Menu