SharedPreferences for key-value in Flutter - UI Render Trace

Component - SharedPreferences for key-value

This UI component shows how to save and load simple key-value data using SharedPreferences in Flutter. It has a text input to enter a value, a button to save it, and a text display to show the saved value.

Widget Tree

Scaffold
├─ AppBar
│  └─ Text
└─ Padding
   └─ Column
      ├─ TextField
      ├─ ElevatedButton
      └─ Text

The Scaffold provides the basic screen layout with an AppBar at the top showing a title. Inside the body, Padding adds space around a Column that stacks three widgets vertically: a TextField for user input, an ElevatedButton to save the input, and a Text widget to display the saved value.

Render Trace - 6 Steps

Step 1: Scaffold

Step 2: Padding

Step 3: Column

Step 4: TextField

Step 5: ElevatedButton

Step 6: Text

State Change - Re-render

Trigger:User types text and taps 'Save Value' button

Before

Saved value is empty or previous value

→

After

Saved value updated to new input text

Re-renders:Entire StatefulWidget subtree including Text widget displaying saved value

UI Quiz - 3 Questions

What happens when the user taps the 'Save Value' button?

A The input text is cleared but not saved

B The app closes immediately

C The input text is saved to SharedPreferences and displayed below

D Nothing happens

Key Insight

Using SharedPreferences in Flutter lets you save small pieces of data like user input easily. The UI updates by reading the saved value and showing it, giving users feedback that their data was stored. Padding and Column help arrange the input, button, and display neatly on screen.

Practice

1. What is the main purpose of using SharedPreferences in a Flutter app?

easy

A. To save small key-value data that persists after the app closes

B. To create complex database tables

C. To design the app's user interface

D. To handle network requests

Solution

1. Step 1: Understand SharedPreferences role

   SharedPreferences is designed to store simple data like settings or flags in key-value pairs.

2. Step 2: Compare with other options

   Options A, B, and C relate to databases, UI, and networking, which are not the purpose of SharedPreferences.

3. Final Answer:

   To save small key-value data that persists after the app closes -> Option A

4. Quick Check:

   SharedPreferences = persistent small key-value storage [OK]

Hint: Remember: SharedPreferences stores simple data persistently [OK]

Common Mistakes:

• Confusing SharedPreferences with databases
• Thinking it manages UI or network
• Assuming it stores large files

2. Which of the following is the correct way to save a boolean value true with key isLoggedIn using SharedPreferences in Flutter?

easy

A. prefs.putBool('isLoggedIn', true);

B. prefs.saveBool('isLoggedIn', true);

C. prefs.storeBool('isLoggedIn', true);

D. prefs.setBool('isLoggedIn', true);

Solution

1. Step 1: Recall SharedPreferences method names

   The correct method to save a boolean is setBool.

2. Step 2: Check method correctness

   Options A, B, and D use incorrect method names that do not exist in SharedPreferences API.

3. Final Answer:

   prefs.setBool('isLoggedIn', true); -> Option D

4. Quick Check:

   Save boolean = setBool [OK]

Hint: Use setBool to save booleans in SharedPreferences [OK]

Common Mistakes:

• Using incorrect method names like saveBool or putBool
• Forgetting to await async calls
• Confusing setBool with setString

3. Given the following Flutter code snippet, what will be printed?

final prefs = await SharedPreferences.getInstance();
await prefs.setInt('counter', 5);
int count = prefs.getInt('counter') ?? 0;
print(count);

medium

A. 0

B. null

C. 5

D. Error

Solution

1. Step 1: Analyze saving the value

   The code saves integer 5 with key 'counter' using setInt.

2. Step 2: Analyze reading the value

   It reads the value with getInt. Since 'counter' exists, it returns 5, not the default 0.

3. Final Answer:

   5 -> Option C

4. Quick Check:

   Saved int 5, getInt returns 5 [OK]

Hint: getInt returns saved value or default if missing [OK]

Common Mistakes:

• Assuming getInt returns null instead of default
• Confusing setInt with setString
• Forgetting to await setInt

4. What is wrong with this Flutter code that tries to save a string in SharedPreferences?

final prefs = SharedPreferences.getInstance();
prefs.setString('username', 'Alice');

medium

A. setString method does not exist

B. Missing await before getInstance()

C. Key 'username' cannot be a string

D. Cannot save strings in SharedPreferences

Solution

1. Step 1: Check getInstance usage

   getInstance() returns a Future, so it must be awaited or handled asynchronously.

2. Step 2: Check setString call

   Calling setString on a Future object (not the SharedPreferences instance) causes error.

3. Final Answer:

   Missing await before getInstance() -> Option B

4. Quick Check:

   Always await SharedPreferences.getInstance() [OK]

Hint: Always await getInstance() before using prefs [OK]

Common Mistakes:

• Not awaiting getInstance()
• Calling setString on Future instead of instance
• Confusing async calls with sync

5. You want to save a user's theme preference as a string ('light' or 'dark') and a flag if notifications are enabled (boolean). Which of the following code snippets correctly saves both values using SharedPreferences in Flutter?

hard

A. final prefs = await SharedPreferences.getInstance();
await prefs.setString('theme', 'dark');
await prefs.setBool('notifications', true);

B. final prefs = SharedPreferences.getInstance();
prefs.setString('theme', 'dark');
prefs.setBool('notifications', true);

C. final prefs = await SharedPreferences.getInstance();
prefs.setInt('theme', 'dark');
prefs.setBool('notifications', true);

D. final prefs = await SharedPreferences.getInstance();
await prefs.setInt('theme', 1);
await prefs.setBool('notifications', 'true');

Solution

1. Step 1: Check async usage

   SharedPreferences.getInstance() must be awaited to get the instance before use.

2. Step 2: Check method calls and types

   setString saves the theme string correctly; setBool saves the boolean flag correctly. Both use await for async calls.

3. Step 3: Identify errors in other options

   final prefs = SharedPreferences.getInstance(); prefs.setString('theme', 'dark'); prefs.setBool('notifications', true); misses await on getInstance and set methods; final prefs = await SharedPreferences.getInstance(); prefs.setInt('theme', 'dark'); prefs.setBool('notifications', true); uses setInt('theme', 'dark') causing type error ('dark' not int); final prefs = await SharedPreferences.getInstance(); await prefs.setInt('theme', 1); await prefs.setBool('notifications', 'true'); uses wrong types (setInt for string, boolean as string).

4. Final Answer:

   final prefs = await SharedPreferences.getInstance(); await prefs.setString('theme', 'dark'); await prefs.setBool('notifications', true); -> Option A

5. Quick Check:

   Await getInstance and setX methods with correct types [OK]

Hint: Await all async SharedPreferences calls with correct types [OK]

Common Mistakes:

• Not awaiting async calls
• Using wrong data types for values
• Saving booleans as strings