🔖 หมวดบทเรียน: ออกแบบ widget ที่ใช้ซ้ำได้และจัดโครงสร้าง UI อย่างเป็นระบบ

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

🎯 เป้าหมาย: สร้าง custom widget ทั้งแบบ Stateless และ Stateful พร้อมส่งค่าเข้าจากภายนอก

🧭 เกริ่นนำ

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

📦 การสร้าง Stateless Custom Widget

class CustomCard extends StatelessWidget {
  final String title;
  final IconData icon;

  const CustomCard({required this.title, required this.icon});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        leading: Icon(icon),
        title: Text(title),
      ),
    );
  }
}

🔧 การเรียกใช้งานในหน้าอื่น

CustomCard(title: 'Flutter', icon: Icons.flutter_dash),
CustomCard(title: 'Dart', icon: Icons.code),

🔁 การสร้าง Stateful Custom Widget

class ToggleBox extends StatefulWidget {
  @override
  _ToggleBoxState createState() => _ToggleBoxState();
}

class _ToggleBoxState extends State<ToggleBox> {
  bool isOn = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => isOn = !isOn),
      child: Container(
        width: 100,
        height: 100,
        color: isOn ? Colors.green : Colors.red,
        child: Center(child: Text(isOn ? 'ON' : 'OFF')),
      ),
    );
  }
}

🧩 แนะนำแนวทางการจัดโฟลเดอร์

• widgets/ — เก็บไฟล์ Custom Widget
• screens/ — แยกหน้าต่าง ๆ
• models/ — สำหรับ data model (หากมี)

✅ สรุป

• การสร้าง custom widget ช่วยลดโค้ดซ้ำและจัดระเบียบ UI
• Stateless เหมาะกับ widget ที่ไม่เปลี่ยนแปลง
• Stateful เหมาะกับ widget ที่มีสถานะภายใน
• การตั้งชื่อให้สื่อความหมาย ช่วยให้โค้ดอ่านง่ายและดูแลรักษาได้ดี

ในบทถัดไป เราจะเข้าสู่การเชื่อม Flutter กับ native code (เช่น Android, iOS platform-specific code) เพื่อสร้างความสามารถพิเศษ