Create Register Screen Of Flutter App

\nFirst Of All We Will Create the PHP API\n\n\n\n<pre class=\"wp-block-code\"><code><?php\ninclude('cors.php'); // Include CORS headers if needed\ninclude('../database.php'); // Include your database connection\n\nheader('Content-Type: application/json');\n\n// Initialize an empty response array.\n$response = array();\n\ntry {\n // Check if the request is a POST request.\n if ($_SERVER['REQUEST_METHOD'] === 'POST') {\n // Get data from the POST request.\n $user_name = $_POST['user_name'];\n $user_email = $_POST['user_email'];\n $user_mobile = $_POST['user_mobile'];\n $user_password = $_POST['user_password'];\n\n // Validate input data\n if (empty($user_name) || empty($user_email) || empty($user_mobile) || empty($user_password)) {\n throw new Exception(\"All fields are required.\");\n }\n\n // Add more validation for email format and password strength if needed\n\n // Create a SQL query to insert the user data into your database.\n $sql = \"INSERT INTO users (user_name, user_email, user_mobile, user_password) VALUES (:user_name, :user_email, :user_mobile, :user_password)\";\n $stmt = $conn->prepare($sql);\n\n // Hash the password before storing it in the database for security.\n $hashed_password = password_hash($user_password, PASSWORD_DEFAULT);\n\n // Bind the parameters.\n $stmt->bindParam(':user_name', $user_name);\n $stmt->bindParam(':user_email', $user_email);\n $stmt->bindParam(':user_mobile', $user_mobile);\n $stmt->bindParam(':user_password', $hashed_password);\n\n if ($stmt->execute()) {\n $response['success'] = true;\n $response['message'] = \"User registered successfully.\";\n } else {\n throw new Exception(\"Database query failed: \" . $stmt->errorInfo());\n }\n } else {\n throw new Exception(\"Invalid request method.\");\n }\n} catch (Exception $e) {\n $response['success'] = false;\n $response['message'] = $e->getMessage();\n}\n\n// Output the response as JSON.\necho json_encode($response);\n?></code></pre>\n\n\n\nNext We Will Create A Blank Flutter Screen Called register.dart\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter/cupertino.dart';\n\nclass RegisterScreen extends StatefulWidget {\n const RegisterScreen({super.key});\n\n @override\n State<RegisterScreen> createState() => _RegisterScreenState();\n}\n\nclass _RegisterScreenState extends State<RegisterScreen> {\n @override\n Widget build(BuildContext context) {\n return const Placeholder();\n }\n}</code></pre>\n\n\n\nNow we will include the SingleChildScrollView inside Scaffold.\n\n\n\n<pre class=\"wp-block-code\"><code>import 'dart:convert';\nimport 'package:flutter/material.dart';\nimport 'package:http/http.dart' as http;\n\nclass RegisterScreen extends StatefulWidget {\n const RegisterScreen({Key? key}) : super(key: key);\n\n @override\n State<RegisterScreen> createState() => _RegisterScreenState();\n}\n\n \n @override\n Widget build(BuildContext context) {\n return Scaffold(\n body: SingleChildScrollView(\n child: Column(\n \n ),\n ),\n\n );\n }\n}</code></pre>\n\n\n\nNow we will add the children\n\n\n\n<pre class=\"wp-block-code\"><code>\n\nchildren: [\n SizedBox(height: 200),\n Container(\n margin: EdgeInsets.all(10),\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 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</code></pre>\n\n\n\nNow to make the connection with the apis we have to make the text editing controllers \n\n\n\n<pre class=\"wp-block-code\"><code>TextEditingController _userNameController = TextEditingController();\nTextEditingController _userEmailController = TextEditingController();\nTextEditingController _userMobileController = TextEditingController();\nTextEditingController _userPasswordController = TextEditingController();\n\n</code></pre>\n\n\n\nNow we will make the method for posting data\n\n\n\n<pre class=\"wp-block-code\"><code>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