Dev to webs {Coding…}

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

บทที่ 8: การใช้งาน State และ StatefulWidget

🔖 หมวดบทเรียน: การจัดการค่าที่เปลี่ยนแปลงได้ภายในแอป

📌 เหมาะสำหรับ: ผู้เริ่มต้นที่ต้องการให้ 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