Dev to webs {Coding…}

บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

การใช้งาน Custom Hooks กับ Riverpod

บทที่ 12: การใช้งาน Custom Hooks กับ Riverpod

🔖 หมวดบทเรียน: การเพิ่มความสะดวกและลดโค้ดซ้ำด้วย Custom Hooks ใน Riverpod

📌 เหมาะสำหรับ: ผู้ที่ใช้ Riverpod อยู่แล้ว และต้องการโครงสร้างที่สะอาดและ maintain ง่ายขึ้น

🎯 เป้าหมาย: สร้างและใช้งาน Custom Hook ใน Riverpod เพื่อจัดการ State หรือ Logic ซ้ำ ๆ แบบ reusable

🧭 เกริ่นนำ

เมื่อเราจัดการ State ด้วย Riverpod หลาย ๆ ครั้งจะพบว่าโค้ดบางส่วนซ้ำกัน เช่น ดึงข้อมูล, debounce, หรือ setup controller ต่าง ๆ การสร้าง Custom Hook จะช่วยให้แยก logic เหล่านั้นออกมาใช้งานซ้ำได้ และทำให้ ConsumerWidget หรือ HookConsumerWidget สะอาดขึ้นมาก

⚙️ ติดตั้ง flutter_hooks

1
2
3
dependencies:
  flutter_hooks: ^0.20.5
  hooks_riverpod: ^2.5.1

🧪 สร้าง HookConsumerWidget

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
 
class HomePage extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = useState(0);
 
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Text('นับ: \${counter.value}'),
            ElevatedButton(
              onPressed: () => counter.value++,
              child: Text('เพิ่ม'),
            )
          ],
        ),
      ),
    );
  }
}

🧰 สร้าง Custom Hook: useDebounce

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import 'package:flutter_hooks/flutter_hooks.dart';
 
ValueNotifier<T> useDebounce<T>(T initialValue, Duration delay) {
  final state = useState<T>(initialValue);
  final debounced = useState<T>(initialValue);
 
  useEffect(() {
    final timer = Timer.periodic(delay, (_) {
      debounced.value = state.value;
    });
    return timer.cancel;
  }, [state.value]);
 
  return state;
}

🎯 การใช้งาน

1
final keyword = useDebounce<String>('', Duration(milliseconds: 300));

✅ สรุป

  • ใช้ flutter_hooks และ hooks_riverpod เพื่อจัดการ State แบบ declarative
  • Custom Hook ช่วยแยก logic ซ้ำออกมาใช้งานซ้ำได้หลาย widget
  • ทำให้โค้ดเรียบร้อยและ maintain ได้ง่ายขึ้น

บทถัดไปเราจะไปเรียนรู้ การทำ Responsive Layout และ Adaptive UI เพื่อให้แอปใช้งานได้ดีในทุกขนาดหน้าจอ