ประยุกต์เก็บข้อมูลด้วย shared preferences ใน Flutter

22 November 2021 เขียนเมื่อ 2 ปีก่อน โดย Ninenik Narkdee

flutter shared preferences

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ flutter shared preferences

เนื้อหาตอนต่อไปนี้ เราจะมาประยุกต์การใช้งาน plugin ที่ใช้

สำหรับเก็บข้อมูลในรูปแบบ key-value ไว้ในเครื่อง โดยเรา

จะจำลองระบบสมาชิก เก็บข้อมูลเท่าที่จำเป็นของสมาชิกที่กำลัง

ล็อกอินใช้งาน app อยู่ ในเนื้อหาจะเป็นรูปแบบจำลองการสมัคร

สมาชิก การล็อกอิน และการเข้าใช้งานเสมือนเป็นระบบสมาชิกหนึ่งๆ

เพียงแต่ว่า ข้อมูลจะเป็นลักษณะกำหนดแบบตายตัว เพื่อจำลอง

การทำงานเท่านั้น อย่างไรก็ตามเนื้อหานี้ก็เป็นแนวทาง สำหรับเนื้อหา

การประยุกต์ต่อไปด้วย

*เนื้อหานี้ใช้เนื้อหาต่อเนื่องจากบทความ http://niik.in/961

สิ่งที่เราจะจำลองการทำงาน

เราจะจำลองเสมือนว่าใน app ของเรามีบางส่วนของข้อมูล ที่ใช้งานเฉพาะสมาชิกเท่านั้น

ในที่นี้ก็คือส่วนของ profile เมื่้อยังไม่ได้เข้าสู่ระบบหรือยังไม่ได้เป็นสมาชิก ก็มีลิ้งค์ให้ผู้ใช้เลือก

ทำการล็อกอินหรือสมัครสมาชิก และเมื่อผู้ใช้สมัครสมาชิกและทำการล็อกอินเข้าใช้งานแล้ว ก็ให้

แสดงเนื้อหาส่วนของสมาชิกในหน้า profile ผู้ใช้สามารถล็อกเอาท์หรืออกจากระบบถ้าต้องการได้

เป็นระบบสมาชิกคร่าวๆ เพื่อเป็นแนวทางไปประยุตก์ใช้งาน

สิ่งที่ต้องเตรียม

ติดตั้ง shared_preferences

ให้เราทำการติดตั้ง shared_preferences สำหรับใช้งานในไฟล์ pubspec.yaml ดังนี้

dependencies:
  shared_preferences: ^2.0.9

จากนั้น import ไปใช้งานในหน้าที่ต้องการด้วยคำสั่ง

import 'package:shared_preferences/shared_preferences.dart';

เนื้อหานี้เรายังไม่ใช้ Data model สำหรับข้อมูลสมาชิก เรายังไม่ใช้ Provider สำหรับจัดการ

การทำงาน เราจะใช้แค่เพียง shared_preferences เก็บข้อมูลแบบง่ายที่สุด เพื่อให้เห็นการทำงาน

รวมเท่านั้น เพื่อให้เนื้อหากระซับและเจาะจงเฉพาะส่วนการใช้งาน

ตัวอย่างผลลัพธ์การทำงาน

ลำดับการทำงาน เมื่อมากดแท็บมายังหน้า profile ซึ่งมีการจำกัดการใช้งานเฉพาะสมาชิกที่ล็อกอินเท่านั้น

เมื่อกดไปหน้าล็อกอิน ยังไม่ได้เป็นสมาชิก ก็สามารถกดต่อไปยังหน้าสมัครสมาชิก หลังจากสมัครสมาชิกเสร็จ

ก็กลับมาหน้าล็อกอิน ทำการทดสอบล็อกอินด้วยข้อมูลที่ไม่ถูกต้อง ล็อกอินไม่่ผ่าน ทำการล็อกอินใหม่อีกครั้ง

ด้วยข้อมูลที่ถูกต้อง ล็อกอินผ่านกลับมายังหน้า profile แสดงข้อความต้อนรับ มีปุ่มล็อกเอาท์

การใช้งาน shared preferences

ในการใช้งานระบบสมาชิกอย่างง่าย เราจะต้องมีข้อมูลๆ หนึ่งที่อ้างอิงสถานะการล็อกอินใช้งานหรือสถานะ

สมาชิกที่ล็อกอินแล้ว

ไฟล์ profile.dart

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

import 'login.dart';
  
class Profile extends StatefulWidget {
    static const routeName = '/profile';
 
    const Profile({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _ProfileState();
    }
}
  
class _ProfileState extends State<Profile> {
    // กำหนดตัวแปรใช้งาน SharedPreferences 
    final Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
    late bool _loginSuccess;  // กำหดตัวแปรสถานะการล็อกอิน

    @override
    void initState() {
      super.initState();
      loadSettings(); // เรียกใช้งานตั้งค่าเมื่อเริ่มต้นเป็นฟังก์ชั่น ให้รองรับ async
    }

    // ตั้งค่าเริ่มต้น
    void loadSettings() async {
      // เรียกใช้งาน SharedPreferences ที่เป็น future
      final SharedPreferences prefs = await _prefs; 
      // กำหนดค่า สถานะการล็อกอิน ถ้ามีข้อมูล ถ้าไม่มีให้กำหนดเป็น false
      _loginSuccess = prefs.getBool('loginSuccess') ?? false;
    }   

    // เนื่องจากหน้า profile เราต้องการสถานะการล็อกอินไปกำหนดการแสดง
    // จึงสร้างเป็นฟังก์ชั่น คืนค่าสถานะเป็น future<bool>
    Future<bool> getLoginStatus() async {
      final SharedPreferences prefs = await _prefs;
      _loginSuccess = prefs.getBool('loginSuccess') ?? false;
      return _loginSuccess;
    }     

    @override
    void dispose() {
      super.dispose();
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Profile'),
            ),
            body: FutureBuilder<bool>( 
              future: getLoginStatus(), // ข้อมูล Future
              builder: (context, snapshot) { 
                if (snapshot.hasData) { 
                  return Center(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                            Text('Profile Screen'),
                            Visibility( // ส่วนที่แสดงกรณีล็อกอินแล้ว
                              visible: _loginSuccess, // ใช้สถานะการล็อกอินกำหนดกรแสดง
                              child: Column(
                                children: [
                                  FlutterLogo(size: 100,),
                                  Text('Welcome member'),
                                  ElevatedButton(
                                    onPressed: () async { // เมื่อล็อกเอาท์
                                      // ใช้งานข้อมูล SharedPreferences
                                      final SharedPreferences prefs = await _prefs;
                                      await prefs.remove("loginSuccess"); // ลบค่าที่บันทึก
                                      setState(() {
                                        _loginSuccess = false;
                                      });                      
                                    }, 
                                    child: Text('Logout'),
                                  ),        
                                ],
                              ),
                            ),
                            Visibility( // ส่วนที่แสดงกรณียังไม่ได้ล็อกอิน
                              visible: !_loginSuccess, // ใช้สถานะตรงข้ามการล็อกอินกำหนดกรแสดง
                              child: ElevatedButton(
                                onPressed: () async {
                                  // กำหดให้รอค่า หลังจากเปิดไปหน้า lgoin
                                  final result = await Navigator.push(
                                    context, 
                                    MaterialPageRoute(builder: (context) => Login(),
                                      settings: RouteSettings(
                                        arguments: null 
                                      ),
                                    ),
                                  );    
                                  // ถ้ามีการปิดหน้มที่เปิด และส่งค่ากลับมาเป็น true
                                  if (result == true) {
                                    setState(() {
                                      _loginSuccess = true;
                                    });  
                                  }
                                              
                                }, 
                                child: Text('Go to Login'),
                              ),
                            ),
                        ],
                    )
                );
                } else if (snapshot.hasError) { // ถ้ามี error
                  return Text('${snapshot.error}');
                }
                return const CircularProgressIndicator();
              },
            ),  
        );
    }
}

คำอธิบายโค้ดและการทำงาน

// กำหนดตัวแปรใช้งาน SharedPreferences 
final Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
late bool _loginSuccess;  // กำหดตัวแปรสถานะการล็อกอิน

เนื่องจากเราจะใช้งานสถานะการล็อกอินจากข้อมูล SharedPreferences ซึ่งเมื่อเรียกใช้งานจะต้องรอข้อมูลก่อน

ดังนั้นสำหรับค่า _loginSuccess เราเลยยังไม่กำหนดค่าเริ่มต้นในทันที่ที่กำหนดตัวแปร แต่จะกำหนดตามทีหลัง

// ตั้งค่าเริ่มต้น
void loadSettings() async {
  // เรียกใช้งาน SharedPreferences ที่เป็น future
  final SharedPreferences prefs = await _prefs; 
  // กำหนดค่า สถานะการล็อกอิน ถ้ามีข้อมูล ถ้าไม่มีให้กำหนดเป็น false
  _loginSuccess = prefs.getBool('loginSuccess') ?? false;
}

เมื่อเปิดมาหน้านี้ และยังไม่มีการล็อกอิน ค่า _loginSuccess จะเป็น false จะแสดงเนื้อหาสำหรับคนทั่วไปหรือ

คนที่ยังไม่ได้ล็อกอิน

เราใช้งาน FutureBuilder สำหรับจัดการข้อมูล สถานะการล็อกอินแบบ Future จะคล้ายกับการทำงานของฟ

ฟังก์ชั่น loadSettings() ด้านบน เพียงแต่ว่าฟังก์ชั่นด้านบนจะทำแค่ครั้งแรกครั้งเดียว แต่ฟังก์ชันด้านล่าง เราจะใช้

งานกับการแสดงข้อมูลรองรับหลังจากทำการล็อกอินแล้วด้วย

// เนื่องจากหน้า profile เราต้องการสถานะการล็อกอินไปกำหนดการแสดง
// จึงสร้างเป็นฟังก์ชั่น คืนค่าสถานะเป็น future<bool>
Future<bool> getLoginStatus() async {
  final SharedPreferences prefs = await _prefs;
  _loginSuccess = prefs.getBool('loginSuccess') ?? false;
  return _loginSuccess;
}

ในการแสดงเนื้อหาส่วนของสมาชิก กับที่ไม่เป็นสมาชิก เราจะใช้ Visibility widget จัดการ อย่างไรก็ตาม ก็สามารถ

ใช้ if else แล้วใช้ค่า _loginSuccess สำหรับ return ส่วนเนื้อหาที่ต้องการแทนได้ แล้วแต่จะประยุกต์

ดูตัวอย่างหน้าตาก่อน และหลังล็อกอิน ดังรูป

ก่อนล็อกอิน

หลังล็อกอิน

ส่วนของการล็อกเอาท์ เราจำลองการทำงานอย่างง่าย โดยเมื่อกดล็อกเอาท์ ก็ให้ลบข้อมูลส่วนของ

SharedPreferences ที่เป็นข้อมูล key เท่ากับ loginSuccess ออก

onPressed: () async { // เมื่อล็อกเอาท์
  // ใช้งานข้อมูล SharedPreferences
  final SharedPreferences prefs = await _prefs;
  await prefs.remove("loginSuccess"); // ลบค่าที่บันทึก
  setState(() {
    _loginSuccess = false;
  });                      
},

การลบช้อมูล SharedPreferences ทำได้ดังนี้

await prefs.clear() // ลบข้อมูลทั้งหมด
await prefs.remove("loginSuccess"); // ลบช้อมูลเฉพาะ key ที่ต้องการ
// ดูค่า key ที่บันทึกไว้ทั้งหมด
print(prefs.getKeys());
// {email, password, loginSuccess}

ส่วนของการเชื่อมโยงไปหน้าล็อกอิน

onPressed: () async {
  // กำหดให้รอค่า หลังจากเปิดไปหน้า lgoin
  final result = await Navigator.push(
    context, 
    MaterialPageRoute(builder: (context) => Login(),
      settings: RouteSettings(
        arguments: null 
      ),
    ),
  );    
  // ถ้ามีการปิดหน้มที่เปิด และส่งค่ากลับมาเป็น true
  if (result == true) {
    setState(() {
      _loginSuccess = true;
    });  
  }
              
},

ในการเปิดหน้าล็อกอิน เรากำหนดให้มีการรอการดำเนินการเมื่อปิดหน้าล็อกอิน ผ่านตัวแปร result

ความหมายก็คือ เมื่อเปิดหน้าล็อกอินด้วย คำสั่ง push() ซึ่งเป็นการซ้อนหน้าใหม่ไว้ด้านบนแล้ว ให้รอ

รับข้อมูลจากหน้าล็อกอินผ่านตัวแปร result ซึ่งในตัวอย่าง ถ้ามีการส่งค่า true กลับมา นั่นก็คือมีการ

ล็อกอินผ่าน ก็ให้กำหนดค่า _loginSuccess เป็น true

ไปต่อกันที่ไฟล์ login.dart

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

import 'register.dart';
import 'profile.dart';
  
class Login extends StatefulWidget {
    static const routeName = '/login';
 
    const Login({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _LoginState();
    }
}
  
class _LoginState extends State<Login> {
    late final SharedPreferences prefs;
  
    // สร้างฟอร์ม key หรือ id ของฟอร์มสำหรับอ้างอิง
    final _formKey = GlobalKey<FormState>();

    // กำหนดตัวแปรรับค่า
    final _email = TextEditingController();
    final _password = TextEditingController();
 
    @override
    void initState() {
      super.initState();
      loadSettings();
    }

    void loadSettings() async {
      prefs = await SharedPreferences.getInstance();
    }    

    // กำหนดสถานะการแสดงแบบรหัสผ่าน
    bool _isHidden = true;    
    bool _authenticatingStatus = false;    

    @override
    void dispose() {
      _email.dispose(); // ยกเลิกการใช้งานที่เกี่ยวข้องทั้งหมดถ้ามี
      _password.dispose(); 
      super.dispose();
    }    

    @override
    Widget build(BuildContext context) {
  
        return Scaffold(
            appBar: AppBar(
                title: Text('Login'),
            ),
            body: SingleChildScrollView(
              child: Form(
                key: _formKey, // กำหนด key
                child: Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Center(
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                              SizedBox(height: 20.0,), 
                              FlutterLogo(
                                size: 100,
                              ),
                              Text('Login Screen'),
                              TextFormField(
                                decoration: InputDecoration(
                                  hintText: 'Email',
                                  icon: Icon(Icons.email_outlined),
                                ),
                                controller: _email, // ผูกกับ TextFormField ที่จะใช้
                              ), 
                              SizedBox(height: 5.0,),                                
                              TextFormField(
                                decoration: InputDecoration(
                                  hintText: 'Password',
                                  icon: Icon(Icons.vpn_key),
                                  suffixIcon: IconButton(
                                    onPressed: (){
                                      setState(() {
                                        _isHidden = !_isHidden; // เมื่อกดก็เปลี่ยนค่าตรงกันข้าม
                                      });
                                    }, 
                                    icon: Icon(
                                      _isHidden // เงื่อนไขการสลับ icon
                                      ? Icons.visibility_off 
                                      : Icons.visibility
                                    ),
                                  ),
                                ),
                                controller: _password, // ผูกกับ TextFormField ที่จะใช้                        
                                obscureText: _isHidden, // ก่อนซ่อนหรือแสดงข้อความในรูปแบบรหัสผ่าน
                              ), 
                              SizedBox(height: 10.0,),                                  
                              Visibility(
                                visible: !_authenticatingStatus,
                                child: ElevatedButton(
                                  onPressed: () async {
                                    // เปลี่ยนสถานะเป็นกำลังล็อกอิน
                                    setState(() {
                                      _authenticatingStatus = !_authenticatingStatus;
                                    });
                                    // จำลองการหน่วงเวลา
                                    await Future.delayed(const Duration(seconds: 3));      
                                    // อ้างอิงฟอร์มที่กำลังใช้งาน ตรวจสอบความถูกต้องข้อมูลในฟอร์ม
                                    if (_formKey.currentState!.validate()) { //หากผ่าน 
                                      // จำลองดึงข้อมูลจาก SharedPreferences
                                      String email = prefs.getString("email") ?? '';
                                      String password = prefs.getString("password") ?? '';

                                      // จำลองเปรียบเทียบค่า เพื่อทำการล็อกอิน  
                                      if(email == _email.text && password == _password.text){
                                        ScaffoldMessenger.of(context).showSnackBar(
                                          const SnackBar(content: Text('Login Successful')),
                                        );
                                        // กำหนดค่าให้กับ SharedPreferences จำลองล็อกอินผ่าน
                                        await prefs.setBool("loginSuccess", true);
                                        await Future.delayed(const Duration(seconds: 2));    
                                        Navigator.pop(context, true);   // ปิดหน้านี้พร้อมคืนค่า true 
                                      }else{
                                        // จำลองล็อกอินไม่ผ่าน
                                        ScaffoldMessenger.of(context).showSnackBar(
                                          const SnackBar(content: Text('Login fail..  try agin!')),
                                        );
                                        await Future.delayed(const Duration(seconds: 2));   
                                        // เปลี่ยนสถานะเป็นกำลังล็อกอิน 
                                        setState(() {
                                          _authenticatingStatus = !_authenticatingStatus;
                                        });
                                      }
                                                                     
                                    }                                
                                  },
                                  child: Container( 
                                    alignment: Alignment.center, 
                                    width: double.infinity, 
                                    child: const Text('Login'),  
                                  ),
                                ),
                              ),
                              Visibility(
                                visible: _authenticatingStatus,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    CircularProgressIndicator(),
                                    SizedBox(width: 10.0,), 
                                    Text(" Authenticating ... Please wait")
                                  ],
                                ),
                              ),
                              SizedBox(height: 30.0,),   
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text('Or '),
                                  InkWell(
                                    child: Text('Register', 
                                      style: TextStyle(
                                        decoration: TextDecoration.underline, 
                                        color: Colors.blue
                                      )), 
                                    onTap: () async {
                                      // เปิดหน้า สมัครสมาชิก โดย แทนที่ route ล็อกอินเดิม
                                      Navigator.pushReplacement(
                                          context, 
                                          MaterialPageRoute(builder: (context) => Register(),
                                            settings: RouteSettings(
                                              arguments: null 
                                            ),
                                          ),
                                        );    
                                    },
                                  )
                                ],
                              )
                          ],
                      )
                  ),
                ),
              ),
            ),
        );
    }
}

ในการจำลองหน้าล็อกอินเราตัดส่วนของการการ validate ข้อมูลออกไป เพื่อให้โค้ดกระชับ ในหน้านี้ เราก็ยัง

มีการใช้งานข้อมูล SharedPreferences ผ่านตัวแปร prefs และมีการกำหนดตัวแปรชื่อ _authenticatingStatus

เพื่อใช้เป็นสถานะ กำลังทำการล็อกอิน เราใช้สถานะนี้เป็นตัวกำหนดการแสดง ปุมล็อกอินกับตัวข้อมูลตัว loading

ว่ากำลังทำการล็อกอิน เข้าใจอย่างง่ายก็คือ เมื่อเรากดปุ่มล็อกอิน ตัว loading ก็จะแสดงขึ้นมาแทน ถ้าล็อกอินไม่ผ่าน

สถานะ _authenticatingStatus ก็จะกลับมาเป็น false ให้กดล็อกอินใหม่ แบบนี้เป็นต้น

มาเริ่มกันส่วนของกรณีที่ยังไม่เป็นสมาชิก หรือยังไม่สมัคร เรามีปุ่มสำหรับเปิดไปหน้าสมัครสมาชิกหรือ register

ด้วยรูปแบบคำสั่งดังนี้

onTap: () async {
  // เปิดหน้า สมัครสมาชิก โดย แทนที่ route ล็อกอินเดิม
  Navigator.pushReplacement(
    context, 
    MaterialPageRoute(builder: (context) => Register(),
      settings: RouteSettings(
        arguments: null 
      ),
    ),
  );    
},

จะเห็นว่าในการเปิดหน้า register เราใช้คำสั่ง pushReplacement() แทน push() ซึ่งก็คือ แทนที่จะเปิดเป้นหน้า

ใหม่ซ้อนบนหน้า login ก็ให้เปลี่ยนจากหน้า login เป็นหน้า register แทน ดังนั้นถ้ากดปุ่ม back ที่เครื่องหรือปุ่ม back

อัตโนมัติมุมบนซ้าย ก็จะเป็นการย้อนไปหน้า profile เลย ไม่ใช่ย้อนไปหน้า login

มาดูต่อส่วนของการจำลองการล็อกอิน

onPressed: () async {
  // เปลี่ยนสถานะเป็นกำลังล็อกอิน
  setState(() {
    _authenticatingStatus = !_authenticatingStatus;
  });
  // จำลองการหน่วงเวลา
  await Future.delayed(const Duration(seconds: 3));      
  // อ้างอิงฟอร์มที่กำลังใช้งาน ตรวจสอบความถูกต้องข้อมูลในฟอร์ม
  if (_formKey.currentState!.validate()) { //หากผ่าน 
    // จำลองดึงข้อมูลจาก SharedPreferences
    String email = prefs.getString("email") ?? '';
    String password = prefs.getString("password") ?? '';

    // จำลองเปรียบเทียบค่า เพื่อทำการล็อกอิน  
    if(email == _email.text && password == _password.text){
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Login Successful')),
      );
      // กำหนดค่าให้กับ SharedPreferences จำลองล็อกอินผ่าน
      await prefs.setBool("loginSuccess", true);
      await Future.delayed(const Duration(seconds: 2));    
      Navigator.pop(context, true);   // ปิดหน้านี้พร้อมคืนค่า true 
    }else{
      // จำลองล็อกอินไม่ผ่าน
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Login fail..  try agin!')),
      );
      await Future.delayed(const Duration(seconds: 2));   
      // เปลี่ยนสถานะเป็นกำลังล็อกอิน 
      setState(() {
        _authenticatingStatus = !_authenticatingStatus;
      });
    }                                       
  }                                
},

ในตัวอย่าง เราจำลองการหน่วงเวลา เพื่อให้เสมือนว่ากำลังทำงานโดยใช้งาน

await Future.delayed(const Duration(seconds: 2));

ทันทีที่มีการกดปุ่ม ล็อกอิน เราก็เปลี่ยนสถานะกำลังล็อกอินเป็น true

// เปลี่ยนสถานะเป็นกำลังล็อกอิน
setState(() {
  _authenticatingStatus = !_authenticatingStatus;
});

ในตัวอย่างเรากำหนดเป็นค่าตรงข้าม นั่นก็คือเหมือน toggle สลับจากค่าหนึ่งเป็นค่าตรงข้าม

// จำลองดึงข้อมูลจาก SharedPreferences
String email = prefs.getString("email") ?? '';
String password = prefs.getString("password") ?? '';

การเรียกดูข้อมูลจาก SharedPreferences

ข้อมูลจาก SharedPreferences เราเรียกผ่านตัวแปร prefs ซึ่งกำหนดไว้ในตอนต้นเรียบร้อยแล้ว

และเนื่องจากค่าใน SharedPreferences จะใช้เก็บข้อมูลที่ไม่ได้มีขนาดใหญ่อะไร เราจึงสามารถ

ใช้งานข้อมูลผ่านคำสั่ง ดังนี้

prefs.getBool(String key) // สำหรับข้อมูล boolean
prefs.getDouble(String key) // สำหรับข้อมูล double
prefs.getInt(String key) // สำหรับข้อมูล int
prefs.getKeys() // ดูข้อมูล key ทั้งหมด คืนค่าเป็น Set<String>
prefs.getString(String key)  // สำหรับข้อมูล String
prefs.getStringList(String key) // สำหรับข้อมูล List<String>

// หากเรียกใช้งานไม่ตรงตามชนิดข้อมูลก็จะเกิด error

เมื่อทำการส่งข้อมูลฟอร์ม เราก็จำลองดึงค่าจากข้อมูล SharedPreferences ถ้ามี (สมัครสมาชิกแล้ว)

มาไว้ในตัวแปร จากนั้นจำลองการเปรียบเทียบกับข้อมูลในฟอร์มอย่างง่าย

if(email == _email.text && password == _password.text){

ถ้าล็อกอินผ่าน

// กำหนดค่าให้กับ SharedPreferences จำลองล็อกอินผ่าน
await prefs.setBool("loginSuccess", true);
await Future.delayed(const Duration(seconds: 2));    
Navigator.pop(context, true);   // ปิดหน้านี้พร้อมคืนค่า true

บันทึกข้อมูลสถานะการล็อกอินไว้ใน SharedPreferences จากนั้นก็ปิดหน้าล็อกอิน พร้อมส่งค่า true กลับ

ไปเพื่อกำหนดให้หน้า profile โหลดส่วนของ Widget build() อีกครั้ง อย่าลืมว่า คำสั่ง pop() เป็นการปิดหน้า

โหลดหน้า profile ใหม่ เราจึงต้องส่งค่ากลับไป เพื่อไปกำหนดให้ state เปลี่ยนแปลง และทำคำสัง build()

อีกครั้ง

อย่างไรก็ตามการกำหนดคำสั่งที่จะกลับไปหน้าเดิม ก็ขึ้นกับโครงสร้างการทำงานด้วย ไม่เจาะจงว่าจะต้อง

เป็นคำสั่ง pop() เพราะ route ที่ใช้งานแต่ละโปรเจ็คอาจจะไม่เหมือนกัน

ในกรณีล็อกอินไม่ผ่าน เราก็ทำการเปลี่ยนค่าสถานะกำลังล็อกอินกลายเป็น false อีก เพื่อซ่อนตัว loading

และแสดงปุ่มล็อกอินสำหรับลองใหม่อีกครั้ง

ตัวอย่างหน้ากำลังล็อกอิน

ไปต่อที่ส่วนสุดท้าย หน้าสมัครสมาชิก

ไฟล์ register.dart

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

import 'login.dart';
  
class Register extends StatefulWidget {
    static const routeName = '/register';
 
    const Register({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _RegisterState();
    }
}
  
class _RegisterState extends State<Register> {
    late final SharedPreferences prefs;
   
    // สร้างฟอร์ม key หรือ id ของฟอร์มสำหรับอ้างอิง
    final _formKey = GlobalKey<FormState>();

    // กำหนดตัวแปรรับค่า
    final _email = TextEditingController();
    final _password = TextEditingController();

    // กำหนดสถานะการแสดงแบบรหัสผ่าน
    bool _isHidden = true;    
    bool _registeringStatus = false;    
 
    @override
    void initState() {
      super.initState();
      loadSettings();
    }

    void loadSettings() async {
      prefs = await SharedPreferences.getInstance();
    }

    @override
    void dispose() {
      _email.dispose(); // ยกเลิกการใช้งานที่เกี่ยวข้องทั้งหมดถ้ามี
      _password.dispose(); 
      super.dispose();
    }

    @override
    Widget build(BuildContext context) {
  
        return Scaffold(
            appBar: AppBar(
                title: Text('Register'),
            ),
            body: SingleChildScrollView(
              child: Form(
                key: _formKey, // กำหนด key
                child: Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Center(
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                              SizedBox(height: 20.0,), 
                              FlutterLogo(
                                size: 100,
                              ),
                              Text('Register Screen'),
                              TextFormField(
                                decoration: InputDecoration(
                                  hintText: 'Email',
                                  icon: Icon(Icons.email_outlined),
                                ),
                                controller: _email, // ผูกกับ TextFormField ที่จะใช้
                              ), 
                              SizedBox(height: 5.0,),                                
                              TextFormField(
                                decoration: InputDecoration(
                                  hintText: 'Password',
                                  icon: Icon(Icons.vpn_key),
                                  suffixIcon: IconButton(
                                    onPressed: (){
                                      setState(() {
                                        _isHidden = !_isHidden; // เมื่อกดก็เปลี่ยนค่าตรงกันข้าม
                                      });
                                    }, 
                                    icon: Icon(
                                      _isHidden // เงื่อนไขการสลับ icon
                                      ? Icons.visibility_off 
                                      : Icons.visibility
                                    ),
                                  ),
                                ),    
                                controller: _password, // ผูกกับ TextFormField ที่จะใช้                        
                                obscureText: _isHidden, // ก่อนซ่อนหรือแสดงข้อความในรูปแบบรหัสผ่าน
                              ), 
                              SizedBox(height: 10.0,),                                  
                              Visibility(
                                visible: !_registeringStatus,
                                child: ElevatedButton(
                                onPressed: () async {
                                  // เปลี่ยนสถานะกำลังสมัครสมาชิก
                                  setState(() {
                                    _registeringStatus = !_registeringStatus;
                                  });
                                  await Future.delayed(const Duration(seconds: 3));      
                                  if (_formKey.currentState!.validate()) { //หากผ่าน 
                                    // กำหนดค่าให้กับ SharedPreferences จากข้อมูลฟอร์ม
                                    await prefs.setString("email", _email.text);
                                    await prefs.setString("password", _password.text);

                                    ScaffoldMessenger.of(context).showSnackBar(
                                      const SnackBar(content: Text('Create new user Successful')),
                                    );
                                    await Future.delayed(const Duration(seconds: 2));   
                                    // กลับไปยังหน้าล็อกอิน 
                                    Navigator.pushReplacement(
                                        context, 
                                        MaterialPageRoute(builder: (context) => Login(),
                                          settings: RouteSettings(
                                            arguments: null 
                                          ),
                                        ),
                                    );                                                                           
                                  }                                                           
                                },
                                  child: Container( 
                                    alignment: Alignment.center, 
                                    width: double.infinity, 
                                    child: const Text('Register'),  
                                  ),
                                ),
                              ),
                              Visibility(
                                visible: _registeringStatus,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    CircularProgressIndicator(),
                                    SizedBox(width: 10.0,), 
                                    Text(" Registering ... Please wait")
                                  ],
                                ),
                              ),                              
                              SizedBox(height: 30.0,),   
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text('Already member? '),
                                  InkWell(
                                    child: Text('Login', 
                                      style: TextStyle(
                                        decoration: TextDecoration.underline, 
                                        color: Colors.blue
                                      )), 
                                    onTap: (){
                                      Navigator.pushReplacement(
                                          context, 
                                          MaterialPageRoute(builder: (context) => Login(),
                                            settings: RouteSettings(
                                              arguments: null 
                                            ),
                                          ),
                                        );    
                                    },
                                  )
                                ],
                              )
                          ],
                      )
                  ),
                ),
              ),
            ),
        );
    }
}

ส่วนของหน้าสมัครสมาชิกก็ใช้คล้ายๆ กับหน้าล็อกอิน ผู้ใช้กรอกข้อมูลแค่ อีเมลกับรหัสผ่าน เพื่อสมัครสมาชิก

และเมื่อกดปุ่ม regrister ก็นำข้อมูลที่กรอก เก็บลงใน SharedPreferences ดูส่วนของการทำงานเมื่อทีการ

กรอกข้อมูลและบันทึก

onPressed: () async {
  // เปลี่ยนสถานะกำลังสมัครสมาชิก
  setState(() {
    _registeringStatus = !_registeringStatus;
  });
  await Future.delayed(const Duration(seconds: 3));      
  if (_formKey.currentState!.validate()) { //หากผ่าน 
    // กำหนดค่าให้กับ SharedPreferences จากข้อมูลฟอร์ม
    await prefs.setString("email", _email.text);
    await prefs.setString("password", _password.text);

    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Create new user Successful')),
    );
    await Future.delayed(const Duration(seconds: 2));   
    // กลับไปยังหน้าล็อกอิน 
    Navigator.pushReplacement(
        context, 
        MaterialPageRoute(builder: (context) => Login(),
          settings: RouteSettings(
            arguments: null 
          ),
        ),
    );                                                                           
  }                                                           
},

การบันทึกข้อมูลลง SharedPreferences จะใช้รูปแบบคำสั่งต่างๆ ดังนี้

await prefs.setBool(String key, bool value) // คืนค่าเป็น Future<bool> true / false
await prefs.setDouble(String key, double value) // คืนค่าเป็น Future<bool> true / false
await prefs.setInt(String key, int value) // คืนค่าเป็น Future<bool> true / false
await prefs.setString(String key, String value) // คืนค่าเป็น Future<bool> true / false
await prefs.setStringList(String key, List<String> value) // คืนค่าเป็น Future<bool> true / false

เนื่องจากการบันทึกข้อมูล หากต้องการผลลัพธ์ว่าบันทึกสำเร็จหรือไม่ เราต้องใช้งานร่วมกับ await เพราะข้อมูล

ที่คืนกลับมาเป็นข้อมูล Future<bool> true / false

ข้อมูลที่จะบันทึกต้องมีชนิดข้อมูลที่สอดคล้องกับคำสั่งที่ใช้งานด้วย ทุกคำสั่ง set ที่เรียกใช้งานในชื่อ key

ซ้ำจะหมายถึงการอัพเดทค่าข้อมูลเดิม จะไม่ใช่การบันทึกค่าใหม่ใน key เดิม เข้าใจอย่างง่ายก็คือ ใน app จะมี

key ที่ไม่ซ้ำกัน

ตัวอย่างการกรอกข้อมูล เพื่อสมัครสมาชิก

ในหน้าสมัครสมาชิก เรามีลิ้งค์สำหรับกลับไปหน้าล็อกอิน กรณีเป็นสมาชิกอยู่แล้ว หรือถ้าเป็นสมาชิกใหม่

และต้องการสมัครสมาชิก ก็ทำการกรอกข้อมูล จากนั้นกดปุ่ม Register เมื่อสมัครสมาชิกเรียบร้อยแล้วก็จะกลับ

ไปหน้าล็อกอินให้อัตโนมัติ เพื่อทำการล็อกอินเข้าใช้งานตามข้อมูลที่กรอกล่าสุด

เนื้อหานี้เราจะเน้นไปที่การใช้งานข้อมูล SharedPreferences และภาพรวมระบบสมาชิก เป็นแนวทางสำหรับ

เนื้อหาต่อๆ ไป ซึ่งเราจะมีการใช้งาน provider รวมถึงใช้งานร่วมกับข้อมูลจาก server จำลอง จะเป็นยังไง

รอติดตามในบทความต่อไป

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

อ่านต่อที่บทความ

24 Nov
2021

ประยุกต์ระบบ Register Login ผ่าน API บน server ใน Flutter อ่าน 9,252
เนื้อหาต่อไปนี้เป็นการประยุกต์ใช้งาน ต่อเนื้อง จากเนื้อหาตอนที่แล้ว เกี่ย

เนื้อหาที่เกี่ยวข้อง

23 Oct
2021

จัดการ Tab ด้วย TabController ใน Flutter อ่าน 7,607
เนื้อหานี้มาดูเกี่ยวกับการใช้งาน tab ใน flutter ซึ่งเป็นรูปแบบ การใช้งานท
24 Oct
2021

การใช้งาน FutureBuilder ที่เป็น Async widgets ใน Flutter อ่าน 5,458
เนื้อหาตอนต่อไปนี้ จะมาดูเกี่ยวกับการใช้งาน async widgets ที่ชื่อว่า Futu
25 Oct
2021

การใช้งาน StreamBuilder จัดการข้อมูล Stream ใน Flutter อ่าน 4,981
ในตอนที่แล้วเรารู้จักกับ FutureBuilder ซึ่งเป็น async widgets หนึ่งใน Flu
26 Oct
2021

การใช้งาน Http ดึงข้อมูลจาก Server มาแสดงใน Flutter อ่าน 9,696
เนื้อหาตอนต่อไปนี้ เราจะมาดูเกี่ยวกับวิธีการดึงข้อมูลจาก Server ที่เป็นข้
27 Oct
2021

การใช้งาน Card Widget ร่วมกับ ListView ใน Flutter อ่าน 6,596
เนื้อหาตอนต่อไปนี้ จะมาดูเกี่ยวกับ widget เล็กๆ ที่จะมาช่วย ให้การแสดงผลใ
28 Oct
2021

การใช้งาน RefreshIndicator ปัดเพื่อรีเฟรชข้อมูล ใน Flutter อ่าน 4,326
ต่อเนื่องจากเนื้อหาตอนที่แล้ว เนื้อหานี้เราจะมาดูเกี่ยวกับ widget ที่ให้เ
29 Oct
2021

จัดการข้อมูล Model และแนวทางการนำมาใช้งาน ใน Flutter อ่าน 5,933
เนื้อหาตอนต่อไปนี้จะประยุกต์ต่อเนื่องจากตอนที่แล้ว เราจะลองใช้ ข้อมูลทดสอ
30 Oct
2021

การใช้งาน GridView widget ใน Flutter อ่าน 9,729
เนื้อหาตอนต่อไปนี้ จะมาดูเกี่ยวกับการใช้งาน GridView เป็นเนื้อหาต่อ
31 Oct
2021

การใช้งาน WebView แสดงเว็บไซต์ ใน Flutter อ่าน 7,041
เนื้อหานี้จะมาดูเกี่ยวกับการใช้งาน WebView widget ซึ่งจะเป็น package ที่เ
01 Nov
2021

การกำหนดและใช้งาน PopupMenuButton ใน Flutter อ่าน 3,216
เนื้อหาตอนต่อไปนี้จะมาดู Widget เล็กๆ ที่มีรูปแบบการใช้งาน ง่ายๆ ที่เรียก
02 Nov
2021

การกำหนดและใช้งาน BottomSheet ใน Flutter อ่าน 4,201
เนื้อหาต่อไปนี้จะมาดูเกี่ยวกับการใช้งาน Bottom Sheet ส่วน ที่ใช้สำหรับแสด
05 Nov
2021

การใช้งาน Provider จัดการข้อมูล App State ใน Flutter อ่าน 11,259
เนื้อหาตอนต่อไปนี้เราจะมาดูเกี่ยวกับการใช้งาน provider จ้ดการข้อมูล app s
06 Nov
2021

จัดการข้อมูลด้วย SQL Database โดยใช้ Sqflite ใน Flutter อ่าน 10,322
เนื้อหาตอนต่อไปนี้จะมาแนะนำ การบันทึกข้อมูลไว้ใน app ในรูปแบบ SQLite data
08 Nov
2021

การใช้งาน Form และ Form Validation ใน Flutter อ่าน 12,168
เนื้อหาตอนต่อไปนี้ เราจะมาดูเกี่ยวกับการใช้งาน form ใน flutter เริ่มตั้งแ
10 Nov
2021

การจัดการข้อมูลของ Form Element อื่นๆ ใน Flutter อ่าน 3,745
เนื้อหาต่อไปนี้ จะมาดูต่อเกี่ยวกับการใช้งานฟอร์ม ต่อจาก เนื้อหาตอนที่แล้ว
11 Nov
2021

ประยุกต์ใช้งาน Form บันทึกลงฐานข้อมูล ใน Flutter อ่าน 3,804
เนื้อหานี้จะเป็นเนื้อหาประยุกต์เพิ่มเติม เล็กน้อยเกี่ยวกับการ ปรับใช้งานฟ
กำลังอ่านเนื้อหานี้อยู่

22 Nov
2021

ประยุกต์เก็บข้อมูลด้วย shared preferences ใน Flutter อ่าน 5,377
เนื้อหาตอนต่อไปนี้ เราจะมาประยุกต์การใช้งาน plugin ที่ใช้ สำหรับเก็บข้อมู
24 Nov
2021

ประยุกต์ระบบ Register Login ผ่าน API บน server ใน Flutter อ่าน 9,252
เนื้อหาต่อไปนี้เป็นการประยุกต์ใช้งาน ต่อเนื้อง จากเนื้อหาตอนที่แล้ว เกี่ย

Tags:: shared preferences flutter

URL สำหรับอ้างอิง

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน