null

Anuchit Chalothorn

Human Knowledge Belongs to The World

Refactoring Code ให้สะอาดใน Flutter

09 Mar 2025, 11:58

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

1. แยก Widget ออกเป็น Component

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

ตัวอย่างก่อน Refactor

class MyHomePage extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(title: Text('Home')),
              body: Column(
                children: [
                  Container(
                    padding: EdgeInsets.all(16),
                    child: Text('Welcome to Flutter!'),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text('Click Me'),
                  ),
                ],
              ),
            );
          }
        }

หลังจาก Refactor

class MyHomePage extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(title: Text('Home')),
              body: Column(
                children: [
                  WelcomeText(),
                  CustomButton(),
                ],
              ),
            );
          }
        }
        
        class WelcomeText extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return Container(
              padding: EdgeInsets.all(16),
              child: Text('Welcome to Flutter!'),
            );
          }
        }
        
        class CustomButton extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return ElevatedButton(
              onPressed: () {},
              child: Text('Click Me'),
            );
          }
        }

2. ใช้ Provider หรือ Riverpod จัดการ State

หากแอปของคุณมี state ที่ซับซ้อน ลองใช้ Provider หรือ Riverpod แทนการใช้ setState() กับ StatefulWidget เยอะเกินไป

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

final counterProvider = StateProvider<int>((ref) => 0);
        
        class CounterScreen extends ConsumerWidget {
          @override
          Widget build(BuildContext context, WidgetRef ref) {
            final count = ref.watch(counterProvider);
        
            return Scaffold(
              appBar: AppBar(title: Text('Counter')),
              body: Center(
                child: Text('Count: $count'),
              ),
              floatingActionButton: FloatingActionButton(
                onPressed: () => ref.read(counterProvider.notifier).state++,
                child: Icon(Icons.add),
              ),
            );
          }
        }

3. ใช้ Extensions ช่วยลดโค้ดซ้ำซ้อน

Extensions ช่วยให้เราสามารถขยายความสามารถของ class ที่มีอยู่โดยไม่ต้องสร้างคลาสใหม่

ตัวอย่างการใช้ Extension Method กับ BuildContext

extension ContextExtensions on BuildContext {
          void showSnackBar(String message) {
            ScaffoldMessenger.of(this).showSnackBar(
              SnackBar(content: Text(message)),
            );
          }
        }

การใช้งาน

context.showSnackBar('Hello Flutter!');

4. จัดระเบียบโครงสร้างโค้ดให้ดี

สรุป

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