Dev to webs {Coding…}

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

บทที่ 18: การใช้งาน SharedPreferences

🔖 หมวดบทเรียน: การบันทึกข้อมูลบนอุปกรณ์ผู้ใช้ (Local Storage)

📌 เหมาะสำหรับ: ผู้ที่ต้องการเก็บค่าต่าง ๆ ไว้ใช้ภายหลัง เช่น ค่าล็อกอิน การตั้งค่าโหมดแอป ฯลฯ

🎯 เป้าหมาย: เรียนรู้การใช้ shared_preferences ในการเก็บ/ดึงข้อมูลแบบง่าย ๆ บนอุปกรณ์ผู้ใช้

🧭 เกริ่นนำ

เมื่อผู้ใช้ตั้งค่าหรือกรอกข้อมูลบางอย่างในแอป เช่น การล็อกอินหรือเปิด Dark Mode เราอาจต้องการให้ค่าเหล่านั้นถูกจำไว้ แม้จะปิดแอปไปแล้ว Flutter มีแพ็กเกจชื่อ shared_preferences ที่ช่วยให้เราบันทึกข้อมูลแบบ key-value ได้ง่ายและรวดเร็วในระดับ local

🔧 การติดตั้ง shared_preferences

เพิ่มใน pubspec.yaml:

dependencies:
  shared_preferences: ^2.2.0

รันคำสั่ง:

flutter pub get

💾 ตัวอย่างการใช้งานเบื้องต้น

import 'package:shared_preferences/shared_preferences.dart';

void saveUsername(String username) async {
  final prefs = await SharedPreferences.getInstance();
  prefs.setString('username', username);
}

Future<String?> loadUsername() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getString('username');
}

🧪 ตัวอย่างแอปเต็ม

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: SharedPrefExample());
  }
}

class SharedPrefExample extends StatefulWidget {
  @override
  _SharedPrefExampleState createState() => _SharedPrefExampleState();
}

class _SharedPrefExampleState extends State<SharedPrefExample> {
  final TextEditingController _controller = TextEditingController();
  String _savedName = "(ยังไม่มีชื่อ)";

  @override
  void initState() {
    super.initState();
    loadName();
  }

  void saveName() async {
    final prefs = await SharedPreferences.getInstance();
    prefs.setString('name', _controller.text);
    setState(() {
      _savedName = _controller.text;
    });
  }

  void loadName() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _savedName = prefs.getString('name') ?? "(ยังไม่มีชื่อ)";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SharedPreferences Example")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Text("ชื่อที่บันทึกไว้: $_savedName"),
            TextField(controller: _controller),
            SizedBox(height: 10),
            ElevatedButton(onPressed: saveName, child: Text("บันทึกชื่อ")),
          ],
        ),
      ),
    );
  }
}

✅ สรุป

  • shared_preferences คือวิธีง่าย ๆ ในการเก็บข้อมูล key-value แบบ local
  • รองรับ String, int, double, bool, List
  • ใช้งานง่าย เหมาะกับการเก็บค่าการตั้งค่าหรือสถานะผู้ใช้

ในบทถัดไป เราจะเรียนรู้การใช้งาน AlertDialog และ SnackBar เพื่อแสดงข้อความแจ้งเตือนหรือโต้ตอบกับผู้ใช้