Flutter Performance Boost - ปรับแต่งแอปให้เร็ว แรง ลื่น
03 Mar 2025, 21:35
เมื่อแอป Flutter เริ่มช้า หน่วง หรือกระตุก ปัญหาส่วนใหญ่มาจากการบริหารจัดการ Widget และ State ที่ไม่มีประสิทธิภาพ มาดู 5 เทคนิคที่ช่วยให้แอปของคุณทำงานได้ลื่นไหลขึ้น
1. ใช้ const ให้มากขึ้น
การใช้ const ช่วยลดการสร้าง Widget ใหม่ซ้ำๆ ทำให้ Flutter ไม่ต้อง Render ใหม่โดยไม่จำเป็น
ตัวอย่าง
❌ ไม่ใช้ const
Widget build(BuildContext context) {
return Text('Hello');
}
✅ ใช้ const
Widget build(BuildContext context) {
return const Text('Hello');
}
การใช้ const Flutter จะเก็บ Widget ไว้ในหน่วยความจำและนำกลับมาใช้ใหม่
2. หลีกเลี่ยงการเรียก setState() โดยไม่จำเป็น
setState() รีเฟรช Widget Tree ทั้งหมด อาจทำให้ UI ช้าลง โดยเฉพาะถ้ามีหลาย Widget การใช้ ValueNotifier หรือ State Management อื่นๆ ช่วยให้ UI อัปเดตเฉพาะส่วนที่จำเป็น
ตัวอย่าง
❌ รีเฟรชทั้ง Widget Tree
setState(() {
counter++;
});
✅ ใช้ ValueNotifier หรือ Bloc
ValueNotifier<int> counter = ValueNotifier(0);
counter.value++;
3. ใช้ ListView.builder แทน ListView ธรรมดา
ListView ปกติโหลด Widget ทั้งหมดในคราวเดียว อาจทำให้แอปใช้หน่วยความจำมากเกินไป ช่วยให้โหลดเฉพาะรายการที่แสดงผลบนหน้าจอ
ตัวอย่าง
❌ ListView ปกติ
ListView(
children: items.map((item) => ListTile(title: Text(item))).toList(),
)
✅ ใช้ ListView.builder โหลดทีละรายการ
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]));
},
)
4. เปิดใช้งาน Flutter DevTools เพื่อตรวจสอบประสิทธิภาพ
ใช้ Flutter DevTools เพื่อตรวจสอบว่า Widget ถูก Rebuild บ่อยเกินไปหรือไม่
- เปิด DevTools และดูที่ “Rebuild Tracker”
- หลีกเลี่ยงการ Rebuild ที่ไม่จำเป็น
5. ใช้ SizedBox แทน Container ถ้าไม่ต้องการตกแต่ง
Container มีคุณสมบัติที่หลากหลาย แต่ถ้าต้องการแค่กำหนดขนาด ให้ใช้ SizedBox แทน ช่วยลด Overhead และทำให้ UI ทำงานได้เร็วขึ้น
ตัวอย่าง
❌ ใช้ Container โดยไม่จำเป็น
Container(width: 100, height: 50)
✅ ใช้ SizedBox
SizedBox(width: 100, height: 50)