Display User Name in Flutter App Bar

\n<p>In this tutorial we will display username of the user retrieved from PHP API in the app bar of the flutter application.</p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Create a method to Fetch User Data From SharedPreferences in the Home Screen</h3>\n\n\n\n<pre class=\"wp-block-code\"><code>Create the variable String userEmail = '';\n\n \n// Method to retrieve user info from SharedPreferences\n Future<void> _getUserInfo() async {\n try {\n SharedPreferences prefs = await SharedPreferences.getInstance();\n String email = prefs.getString('email') ?? ''; // Get user email\n setState(() {\n userEmail = email;\n // Here you can retrieve and set other user information as needed\n print('===================');\n print(userEmail);\n print('===================');\n });\n } catch (error) {\n print('Error retrieving user info: $error');\n }\n }</code></pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Call _getUserInfo() in the HomeScreen on Page Load</h3>\n\n\n\n<pre class=\"wp-block-code\"><code> @override\n void initState() {\n super.initState();\n fetchProductDataImages();\n _getUserInfo();\n }</code></pre>\n\n\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Display User Name in The App Bar</h3>\n\n\n\n<pre class=\"wp-block-code\"><code>appBar: AppBar(\n backgroundColor: Colors.pink,\n title: Row(\n children: [\n Text('Hi $userEmail'),\n Text('Logout')\n ],\n ),\n ),</code></pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Make Changes in PHP API to get User Name And User Id</h3>\n\n\n\n<pre class=\"wp-block-code\"><code>// Verify user's password\n if ($user) {\n $response['success'] = true;\n $response['message'] = \"Login successful.\";\n $response['user_name'] = $user['user_name'];\n $response['user_id'] = $user['id'];\n // You can include additional data like user ID, name, etc. in the response if needed.\n }\n</code></pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Store The User Name in Shared Preference in The Login Screen</h3>\n\n\n\n<pre class=\"wp-block-code\"><code> Future<void> _saveCredentials(String userName, int userId) async {\n SharedPreferences prefs = await SharedPreferences.getInstance();\n await prefs.setString('email', _emailController.text);\n await prefs.setString('password', _passwordController.text);\n await prefs.setString('userName', userName);\n await prefs.setInt('userId', userId);\n }</code></pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6: Call _saveCredentials Function in The Login Screen & Pass Necessary Values From The API</h3>\n\n\n\n<pre class=\"wp-block-code\"><code>Future<void> _loginUser() async {\n String apiUrl = 'https://aboutassam.in/flutter_app/api/login.php';\n try {\n var response = await http.post(Uri.parse(apiUrl), body: {\n 'user_email': _emailController.text,\n 'user_password': _passwordController.text,\n });\n\n var responseData = json.decode(response.body);\n if (responseData['success']) {\n _saveCredentials(responseData['user_name'], responseData['user_id']);\n Navigator.push(\n context,\n MaterialPageRoute(\n builder: (context) => Home(),\n ),\n );\n // Handle navigation or any other action\n print('Login successful');\n } else {\n // Login failed, show error message\n print('Login failed: ${responseData['message']}');\n }\n } catch (e) {\n print('Error logging in: $e');\n }\n }\n\n// Use await _saveCredentials(responseData['user_name'], responseData['user_id']); if your code Does Not Work</code></pre>\n\n\n\n<p><strong>Now replace email with username :)</strong></p>\n