🔖 หมวดบทเรียน: การจัดการค่าที่เปลี่ยนแปลงได้ภายในแอป
📌 เหมาะสำหรับ: ผู้เริ่มต้นที่ต้องการให้ UI เปลี่ยนแปลงตามค่าตัวแปร เช่น ตัวนับ, toggle, input
🎯 เป้าหมาย: เข้าใจความแตกต่างระหว่าง StatelessWidget และ StatefulWidget และสามารถใช้
setState()
เพื่ออัปเดต UI ได้
🧭 เกริ่นนำ
ในการสร้างแอปที่มีความโต้ตอบกับผู้ใช้ จำเป็นต้องใช้ “สถานะ (state)” เพื่อจัดการค่าที่เปลี่ยนแปลงได้ เช่น ตัวเลขนับจำนวน toggle สถานะเปิด/ปิด หรือค่าจาก TextField Flutter มี Widget 2 ประเภทหลักคือ StatelessWidget
(ไม่เปลี่ยนค่า) และ StatefulWidget
(เปลี่ยนค่าได้) บทนี้จะอธิบายให้เห็นภาพชัดและทดลองใช้จริง
📌 StatelessWidget vs StatefulWidget
StatelessWidget
เหมาะกับ UI ที่ไม่ต้องเปลี่ยนค่าใด ๆ เช่น โลโก้, หัวข้อ
class MyText extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text("นี่คือ Stateless");
}
}
StatefulWidget
ใช้เมื่อคุณต้องการให้ข้อมูลบนหน้าจอเปลี่ยนเมื่อผู้ใช้โต้ตอบ
class MyCounter extends StatefulWidget {
@override
_MyCounterState createState() => _MyCounterState();
}
class _MyCounterState extends State<MyCounter> {
int count = 0;
void increment() {
setState(() {
count++;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('จำนวน: \$count', style: TextStyle(fontSize: 24)),
ElevatedButton(onPressed: increment, child: Text("เพิ่ม"))
],
);
}
}
setState()
คือฟังก์ชันสำคัญที่แจ้ง Flutter ว่ามีการเปลี่ยนแปลง และต้องอัปเดต UI ใหม่
🧪 ตัวอย่างรวม
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("StatefulWidget Example")),
body: Center(child: MyCounter()),
),
);
}
}
class MyCounter extends StatefulWidget {
@override
_MyCounterState createState() => _MyCounterState();
}
class _MyCounterState extends State<MyCounter> {
int count = 0;
void increment() {
setState(() {
count++;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('คุณกดแล้ว: \$count ครั้ง', style: TextStyle(fontSize: 20)),
SizedBox(height: 10),
ElevatedButton(
onPressed: increment,
child: Text("กดเพิ่ม")
)
],
);
}
}
✅ สรุป
StatelessWidget
ใช้สำหรับ UI คงที่ ไม่เปลี่ยนตามค่าภายในStatefulWidget
ใช้เมื่อค่าต้องเปลี่ยนตามการกระทำของผู้ใช้setState()
คือหัวใจในการอัปเดต UI
ในบทถัดไปเราจะเรียนรู้การนำทางระหว่างหลายหน้าจอด้วย Navigator