🔖 หมวดบทเรียน: การบันทึกข้อมูลบนอุปกรณ์ผู้ใช้ (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 เพื่อแสดงข้อความแจ้งเตือนหรือโต้ตอบกับผู้ใช้