How To Create The User Profile Page
By Webotapp Academy•
<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">We Will Create A Blank Screen Called UserProfile</h2>\n<!-- /wp:heading -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>import 'package:flutter/cupertino.dart';\n\nclass UserProfile extends StatefulWidget {\n const UserProfile({super.key});\n\n @override\n State<UserProfile> createState() => _UserProfileState();\n}\n\nclass _UserProfileState extends State<UserProfile> {\n @override\n Widget build(BuildContext context) {\n return const Placeholder();\n }\n}\n</code></pre>\n<!-- /wp:code -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">We will go to Home Screen And Create A Navigation Link From the Drawer</h2>\n<!-- /wp:heading -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>Container(\n child: GestureDetector(\n onTap: () {\n Navigator.push(context,\n MaterialPageRoute(builder: (context) => UserProfile()));\n },\n child: Container(\n alignment: Alignment.centerLeft,\n margin: EdgeInsets.only(left: 20, top: 30),\n child: Text(\n '> My profile',\n style: TextStyle(color: Colors.white, fontSize: 20),\n ),\n ),\n ),\n ),</code></pre>\n<!-- /wp:code -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Now we will go to the Register Screen and copy the necessary codes & Paste it in Our Profile Screen</h2>\n<!-- /wp:heading -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>//For the UI\n return Scaffold(\n body: SingleChildScrollView(\n child: Column(\n children: [\n SizedBox(height: 200,),\n Container(\n alignment: Alignment.center,\n child: Text('Register For Free', style: TextStyle(fontSize: 25),),\n ),\n SizedBox(height: 20,),\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: TextFormField(\n controller: _userNameController,\n decoration: InputDecoration(\n labelText: 'Username',\n border: OutlineInputBorder(),\n ),\n ),\n ),\n\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: TextFormField(\n controller: _userEmailController,\n decoration: InputDecoration(\n labelText: 'Email',\n border: OutlineInputBorder(),\n ),\n ),\n ),\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: TextFormField(\n controller: _userMobileController,\n decoration: InputDecoration(\n labelText: 'Mobile',\n border: OutlineInputBorder(),\n ),\n ),\n ),\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: TextFormField(\n controller: _userPasswordController,\n obscureText: true,\n decoration: InputDecoration(\n labelText: 'Password',\n border: OutlineInputBorder(),\n ),\n ),\n ),\n SizedBox(height: 20),\n ElevatedButton(\n onPressed: _registerUser,\n child: Text('Register'),\n ),\n ],\n ),\n ),\n\n );</code></pre>\n<!-- /wp:code -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>//Create the controllers and functions\nTextEditingController _userNameController = TextEditingController();\n TextEditingController _userEmailController = TextEditingController();\n TextEditingController _userMobileController = TextEditingController();\n TextEditingController _userPasswordController = TextEditingController();\n\n\n Future<void> _registerUser() async {\n String apiUrl = 'https://aboutassam.in/flutter_app/api/register.php';\n try {\n var response = await http.post(Uri.parse(apiUrl), body: {\n 'user_name': _userNameController.text,\n 'user_email': _userEmailController.text,\n 'user_mobile': _userMobileController.text,\n 'user_password': _userPasswordController.text,\n });\n\n var responseData = json.decode(response.body);\n if (responseData['success']) {\n // Registration successful, handle navigation or any other action\n print('Registration successful');\n } else {\n // Registration failed, show error message\n print('Registration failed: ${responseData['message']}');\n }\n } catch (e) {\n print('Error registering user: $e');\n }\n }</code></pre>\n<!-- /wp:code -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">We will next go to the Checkout Screen, copy relevant codes, and paste them in our User Profile Screen</h2>\n<!-- /wp:heading -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code> \n\n @override\n void initState() {\n super.initState();\n\n _getUserInfo();\n }\n Future<void> _getUserInfo() async {\n try {\n SharedPreferences prefs = await SharedPreferences.getInstance();\n String usermobile = prefs.getString('userMobile') ?? ''; // Get user email\n\n if (usermobile.isEmpty) {\n Navigator.push(\n context,\n MaterialPageRoute(\n builder: (context) => LoginScreen(),\n ),\n );\n } else {\n setState(() {\n userMobile = usermobile;\n });\n }\n ;\n } catch (error) {\n print('Error retrieving user info: $error');\n }\n }\n</code></pre>\n<!-- /wp:code -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>//We will slightly modify the codes to the following\nFuture<void> _getUserInfo() async {\n try {\n\n SharedPreferences prefs = await SharedPreferences.getInstance();\n\n String userMobile = prefs.getString('userMobile') ?? ''; // Get user mobile\n\n setState(() {\n _userMobileController.text = userMobile;\n\n\n });\n\n } catch (error) {\n print('Error retrieving user info: $error');\n }\n }</code></pre>\n<!-- /wp:code -->