Anuchit Chalothorn

ลดโค้ดซ้ำใน Flutter ด้วย Widgets

---

11 Mar 2025, 13:55

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

1. Custom Widget

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

class CustomButton extends StatelessWidget {
          final String label;
          final VoidCallback onPressed;
        
          CustomButton({required this.label, required this.onPressed});
        
          @override
          Widget build(BuildContext context) {
            return ElevatedButton(
              onPressed: onPressed,
              child: Text(label),
            );
          }
        }
        

ในตัวอย่างนี้ เราสร้าง CustomButton ที่สามารถใช้ซ้ำได้ในทุกๆ ที่ที่ต้องการปุ่มที่มีลักษณะเหมือนกัน เพียงแค่เปลี่ยน label และ onPressed ก็สามารถใช้งานได้ทันที

2. Higher-Order Widgets

Higher-Order Widgets (HOCs) เป็นวิธีที่ช่วยในการสร้าง Widget ที่สามารถรับ Widget อื่นๆ เป็นพารามิเตอร์และคืนค่าผลลัพธ์ที่มีการปรับเปลี่ยนจาก Widget นั้นๆ ตัวอย่างเช่น

Widget withPadding(Widget child) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: child,
          );
        }
        

ในตัวอย่างนี้ เราสร้างฟังก์ชันที่ใช้ห่อหุ้ม Widget อื่นๆ ด้วย Padding ซึ่งสามารถใช้ซ้ำได้ทุกที่ที่ต้องการใช้ Padding รอบๆ Widget

3. Reusable Layouts

บางครั้งเรามีเลย์เอาท์ที่เหมือนกันในหลายๆ หน้าของแอป เช่น การแสดงรายการที่มีหัวข้อและเนื้อหา ในกรณีนี้ เราสามารถสร้าง Widget ที่ใช้ซ้ำได้อย่างง่าย เช่น

class ListItem extends StatelessWidget {
          final String title;
          final String subtitle;
        
          ListItem({required this.title, required this.subtitle});
        
          @override
          Widget build(BuildContext context) {
            return ListTile(
              title: Text(title),
              subtitle: Text(subtitle),
            );
          }
        }
        

ในกรณีนี้ ListItem เป็น Widget ที่สามารถใช้ซ้ำในหลายๆ หน้าของแอปพลิเคชันเพื่อแสดงข้อมูลที่มีโครงสร้างเดียวกัน

4. State Management Widgets

การจัดการสถานะ (State Management) เป็นอีกหนึ่งวิธีที่สามารถลดโค้ดซ้ำใน Flutter ได้ โดยการสร้าง Widget ที่สามารถแชร์สถานะได้ในหลายๆ จุดของแอป ตัวอย่างเช่น การใช้ Provider หรือ Riverpod เพื่อจัดการสถานะที่ใช้ซ้ำได้ทั่วทั้งแอป

ตัวอย่างเช่นการสร้าง ChangeNotifier เพื่อแชร์สถานะของแอป

class Counter extends ChangeNotifier {
          int _count = 0;
        
          int get count => _count;
        
          void increment() {
            _count++;
            notifyListeners();
          }
        }
        

จากนั้นใน Widget ที่ต้องการใช้งาน

class CounterWidget extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            final counter = Provider.of<Counter>(context);
        
            return Column(
              children: [
                Text('Count: ${counter.count}'),
                ElevatedButton(
                  onPressed: counter.increment,
                  child: Text('Increment'),
                ),
              ],
            );
          }
        }
        

วิธีนี้คุณสามารถใช้สถานะเดียวกันในหลายๆ จุดของแอป โดยไม่ต้องเขียนโค้ดใหม่ซ้ำๆ

ListView.builder และ GridView.builder

ในกรณีที่คุณต้องการแสดงรายการหรือข้อมูลจำนวนมาก วิธีที่ดีที่สุดในการลดโค้ดซ้ำคือการใช้ ListView.builder หรือ GridView.builder ซึ่งจะช่วยให้คุณสร้างรายการที่มีความยืดหยุ่นสูงและใช้งานซ้ำได้ โดยไม่ต้องสร้าง ListTile หรือ GridTile ใหม่ทุกครั้งที่มีการแสดงผล

ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        )
        

สรุป

การลดโค้ดซ้ำใน Flutter เป็นสิ่งที่สำคัญมากในการทำให้โค้ดของคุณสะอาดและบำรุงรักษาง่ายขึ้น โดยการใช้ Custom Widget, Higher-Order Widgets, Reusable Layouts, State Management Widgets, และ ListView.builder หรือ GridView.builder คุณสามารถลดการซ้ำซ้อนของโค้ดได้ และทำให้แอปของคุณยืดหยุ่นและมีประสิทธิภาพมากขึ้น

หวังว่าบทความนี้จะช่วยให้คุณเห็นวิธีการที่สามารถลดโค้ดซ้ำใน Flutter และทำให้การพัฒนาแอปพลิเคชันของคุณง่ายขึ้น!