Flutter: shared_preferences in Login form.

shared_preferences คือ local storage ที่สำคัญในการจัดการกับข้อมูลต่างๆที่ ต้องนำกลับมาใช้อีกในครั้งหน้าของการใช้งาน Application เช่น username, password นั่นเอง

ตัวนี้จัดว่า Flutter favorite เลยนะคับ 100% กันเลยทีเดียว

ในการเก็บค่าของ shared_preferences จะจัดเก็บในรูปแบบของ key, value นะคับ ในบทความนี้จะผ่านเรื่อง การ install plug-in จาก pub.dev ไปเลยนะคับ

ข้อดีของการใช้ shared_preferences คือ จะช่วยให้เราจัดเก็บค่าที่เป็น value ไว้ใน key ได้เลย แม้ว่าจะปิดโปรแกรมไปแล้ว ค่าก็จะไม่หายไปไหน และสามารถเรียกกลับมาใช้งานได้เสมอ เมื่อมีการเก็บค่าใหม่ ค่าเก่าก็จะถูกแทนที่อัตโนมัติ

สำหรับวิธีการใช้งานนั้นตามนี้เลยคับ

1. ให้ทำการสร้าง object ขึ้นมาตาม document ใน pub.dev เลย

SharedPreferences prefs = await SharedPreferences.getInstance();

จากนั้นเราจะทำการ setString หรือ setInt และ getString หรือ getInt ได้ อาจจะทำการเขียนเป็น method แบบนี้เพื่อความสะดวก

เมื่อต้องการ save ก้อเพียงเรียก saveData() เช่นกันเมื่อต้องการใช้ ก้อเรียก readData()

หรือเราจะใช้ .then ในการเรียกใช้งานแบบนี้ก็ได้นะคับ

SharedPreferences.getInstance().then((prefs) {
    prefs.setString('username', username.text.trim());
    prefs.setString('password', password.text.trim());
});

2. จากนั้นผมจะให้มาแสดงเป็น Container() นะคับ

ถ้าอ่านแล้วไม่มีค่าอะไร ก้อให้แสดงเป็น String เปล่าๆ

นี่คือ code ทั้งชุดของหน้าตา ui แบบนี้นะคับ

แสดงค่าที่เก็บไว้มาโชว์ หรือ สามารถ clear ก้อได้

สำหรับวิธีการ clear dataให้ใช้ method clear() นะคับ (ใช้ในกรณีที่ต้องการ logout)

เพิ่มปุ่ม exit_to_app ขึ้นมา โดยเรียกใช้ method logout()

ถ้าเพิ่ม exit(0) จะปิดแอฟเลย

ps. ในกรณีเมื่อ run แล้วพบ error

Exception has occurred. MissingPluginException (MissingPluginException(No implementation found for method getAll on channel plugins.flutter.io/shared_preferences))

ให้ทำการ uninstall app จาก emulator หรือ real phone ก่อนที่จะลงใหม่อีกครั้งนะคับ หรือ ถ้ายังไม่ได้อาจต้องทำตาม link นี้เลย

flutter clean หรือ เพิ่ม SharedPreferences.setMockInitialValues({});

USED CASES:

ที่มักจะต้องใช้งานกันจริงคือ การเก็บค่า preferences หลังจาก Login แล้ว เพื่อที่จะไม่ต้อง Loginใหม่อีกครั้ง มีขั้นตอนสั้นๆแบบนี้คับ

1. เมื่อเรา Login ส่งค่า username + password ไปแล้ว จะได้ response กลับมาในลักษณะนี้

Response ที่ได้กลับมาจากการส่ง username + password ไป

ซึ่งจะพบว่ามีข้อมูลหลายอย่าง ไม่ว่าจะเป็น refresh, access, username, firstName, lastName etc.ซึ่งสิ่งเหล่านี้เราจะต้องนำมาใช้บ่อยๆ และใช้งานภายหลังได้ จึงต้องเก็บเข้าไปใน Local storage

2. สร้าง model สำหรับเก็บค่า String ที่ได้รับ response กลับมา ดูได้จากที่นี่ หรือ สร้าง model จากเว็บนี้ https://app.quicktype.io/

3. จากนั้นเมื่อได้รับ response กลับมา ก็ ถอดรหัสผ่าน decode ออกมาเป็น string เก็บไว้ใน user

var user = utf8.decode(response.bodyBytes); //response มาเก็บใน user
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setString('session', user); //นำ user ทั้งหมดเก็บลง key 'session'
session = userFromJson(user);  
// นำ user มาผ่าน model ให้เรียกใช้งานได้ง่ายๆผ่าน session เช่น ถ้าต้องการเข้าถึง refresh ก็เพียงแค่เรียกผ่าน session.refresh 

และเก็บ user ลงไปใน key ชื่อ “session” จบล่ะ
บรรทัดถัดไป session = userFromJson(user);เป็นเพียงการนำไปใช้ในแอฟเท่านั้น โดยเรียกผ่าน model จะง่ายขึ้นเพราะมี auto completion ช่วย

4. เมื่อเราต้องการ logout ก็ให้มาลบ key ที่เราสร้างขึ้นมาใน preference ออกไปด้วย

removeSession() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.remove('session');
}

5. สุดท้าย Fyi เมื่อ token ที่เป็น access หมดอายุ เราจะต้องทำการต่ออายุด้วย refresh token จะต้อง setString ชุดใหม่เข้าไปใน 'session' ให้ไปทับตัวก่อนหน้าเพื่อให้ update ที่ Local storage ด้วย.

เมื่อมีการ update token ก็จะต้อง update ใน Local storage ด้วย

แล้วพบกันใหม่คับ