Anuchit Chalothorn

เทคนิค Flutter 5 แนวทางเขียนโค้ดให้สะอาดและมีประสิทธิภาพ

---

28 Feb 2025, 08:54

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

1. แยก UI ออกจาก Business Logic ด้วย State Management

การรวม UI และ Business Logic ไว้ด้วยกันทำให้โค้ดซับซ้อนและยากต่อการบำรุงรักษา การใช้ State Management เช่น Provider, Bloc, หรือ Riverpod ช่วยให้สามารถจัดการสถานะของแอปพลิเคชันได้เป็นระบบและลดความซับซ้อนของ UI

ตัวอย่างการใช้งาน Provider

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

ใน UI ควรใช้ Consumer หรือ Selector เพื่อลดการเรนเดอร์ที่ไม่จำเป็น

Consumer<CounterNotifier>(
          builder: (context, counter, child) {
            return Text('${counter.count}');
          },
        )
        

ทำไมการแยก State สำคัญ?

• ลดโค้ดที่ซับซ้อนใน UI ทำให้โค้ดอ่านง่ายขึ้น
• ง่ายต่อการทดสอบ (Unit Test และ Widget Test)
• ช่วยให้สามารถใช้ State ร่วมกันระหว่าง Widget หลายตัวได้

2. ใช้ Extension Methods เพื่อปรับแต่ง Widget อย่างมีประสิทธิภาพ

Extension Methods ช่วยให้สามารถเพิ่มฟังก์ชันให้กับ Widget ได้โดยไม่ต้องแก้ไขโค้ดต้นฉบับ ทำให้โค้ดสะอาดขึ้นและมีโครงสร้างที่ดีขึ้น:

extension PaddingExtension on Widget {
          Widget withPadding([EdgeInsets padding = const EdgeInsets.all(8)]) {
            return Padding(padding: padding, child: this);
          }
        }
        

สามารถใช้งานได้ง่ายขึ้น

Text("Hello, Flutter!").withPadding();
        

ข้อดีของ Extension Methods

• ทำให้โค้ดสั้นลงและอ่านง่ายขึ้น
• ลดความซ้ำซ้อนในการใช้ Padding, Margin หรือ Styling อื่น ๆ
• สามารถนำไปใช้กับ Widget ใดก็ได้

3. ใช้ Custom Widget เพื่อลดความซ้ำซ้อนของโค้ด

หากพบว่า UI มีโค้ดซ้ำกันหลายจุด ควรแยกออกเป็น Custom Widget เพื่อให้โค้ดหลักสะอาดขึ้นและง่ายต่อการนำกลับมาใช้ใหม่

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

แทนที่จะเขียนโค้ดซ้ำๆ สามารถเรียกใช้ได้ง่ายขึ้น

CustomButton(
          label: "กดเลย!",
          onPressed: () {},
        )
        

ประโยชน์ของการใช้ Custom Widget

• ลดความซ้ำซ้อนในโค้ด ทำให้โค้ดอ่านง่ายขึ้น
• เพิ่มความสามารถในการนำโค้ดกลับมาใช้ใหม่ (Reusability)
• ทำให้การเปลี่ยนแปลงโค้ดง่ายขึ้นโดยไม่ต้องแก้หลายที่

4. ใช้ Named Routes เพื่อจัดการการนำทางอย่างเป็นระบบ

การใช้ Named Routes ช่วยให้การนำทางในแอปเป็นระบบและลดการใช้ Navigator.push ที่กระจัดกระจายไปทั่วโค้ด

void main() {
          runApp(MaterialApp(
            initialRoute: '/',
            routes: {
              '/': (context) => HomePage(),
              '/details': (context) => DetailsPage(),
            },
          ));
        }
        

เรียกใช้งานได้ง่ายขึ้นและลดโค้ดที่ไม่จำเป็น

Navigator.pushNamed(context, '/details');
        

ข้อดีของ Named Routes

• ทำให้โค้ดดูเป็นระเบียบมากขึ้น
• สามารถเปลี่ยนเส้นทางการนำทางได้จากที่เดียว
• ช่วยให้สามารถใช้ deep linking ได้ง่ายขึ้น

5. ใช้ Linting และ Code Formatter เพื่อให้โค้ดได้มาตรฐาน

การใช้ Flutter Linter และ Code Formatter ช่วยลดข้อผิดพลาดและทำให้โค้ดเป็นระเบียบ ควรตั้งค่า analysis_options.yaml เพื่อเปิดใช้งาน linting

include: package:flutter_lints/flutter.yaml
        

นอกจากนี้ ควรใช้ flutter format เพื่อลดโค้ดที่ไม่เป็นมาตรฐาน

เครื่องมือที่ช่วยให้โค้ดสะอาดขึ้น

• dart analyze เพื่อตรวจสอบข้อผิดพลาดในโค้ด
• flutter format . เพื่อจัดระเบียบโค้ดอัตโนมัติ
• pre-commit hooks เพื่อป้องกันการ commit โค้ดที่ไม่เป็นระเบียบ

สรุป

แนวทางทั้ง 5 ข้อนี้ช่วยให้โค้ด Flutter ของคุณสะอาด เป็นระบบ และง่ายต่อการบำรุงรักษา

1. แยก UI ออกจาก Business Logic ด้วย State Management เช่น Provider หรือ Bloc
2. ใช้ Extension Methods เพื่อขยายความสามารถของ Widget และลดโค้ดซ้ำซ้อน
3. ใช้ Custom Widget เพื่อลดความซ้ำซ้อนและเพิ่มการนำกลับมาใช้ใหม่
4. ใช้ Named Routes เพื่อจัดการ Navigation อย่างเป็นระบบและรองรับ deep linking
5. ใช้ Linting และ Code Formatter เพื่อรักษาคุณภาพโค้ดและลดข้อผิดพลาด

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