Flutter + MySQL Authentication App | Full Login & Register System with PHP Backend
Demo :
Click Video 👇👇👇
Features:
✔ Use "Search Description" → Add 150-character SEO text
✔ Enable "Custom Robots.txt" (optional)
✔ Add images: Flutter logo, MySQL logo, app UI screenshots
✔ Insert code blocks for Flutter, PHP, SQL
✔ Add YouTube video embed for extra SEO boost
Code :
Folder Structure :
* flutter_mysql_auth_app
main.dart
pubspec.yaml
* htdocs
mysql_auth_backend
db_connect.php
login.php
register.php
sql
1) main.dart
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() {
runApp(MySQLAuthApp());
}
class MySQLAuthApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Fuzzu MySQL Auth',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
useMaterial3: true,
),
home: AuthScreen(),
);
}
}
class AuthScreen extends StatefulWidget {
@override
State<AuthScreen> createState() => _AuthScreenState();
}
class _AuthScreenState extends State<AuthScreen> {
final email = TextEditingController();
final pass = TextEditingController();
bool isLogin = true;
bool loading = false;
Future<void> submit() async {
setState(() => loading = true);
final url = isLogin
? "http://localhost/mysql_auth_backend/login.php"
: "http://localhost/mysql_auth_backend/register.php";
final response = await http.post(
Uri.parse(url),
headers: {"Content-Type": "application/json"},
body: jsonEncode({
"email": email.text,
"password": pass.text,
}),
);
final data = jsonDecode(response.body);
setState(() => loading = false);
if (data["status"] == "success") {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => Dashboard(email: email.text),
),
);
} else {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(data["message"])),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey.shade200,
body: Center(
child: Container(
width: 380,
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25),
boxShadow: [
BoxShadow(
blurRadius: 20,
color: Colors.black12,
offset: Offset(0, 8),
)
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
AnimatedSwitcher(
duration: Duration(milliseconds: 300),
child: Text(
isLogin ? "Login" : "Register",
key: ValueKey(isLogin),
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
color: Colors.indigo,
),
),
),
SizedBox(height: 20),
TextField(
controller: email,
decoration: InputDecoration(
labelText: "Email",
prefixIcon: Icon(Icons.email),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15),
),
),
),
SizedBox(height: 15),
TextField(
controller: pass,
obscureText: true,
decoration: InputDecoration(
labelText: "Password",
prefixIcon: Icon(Icons.lock),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15),
),
),
),
SizedBox(height: 25),
loading
? CircularProgressIndicator(color: Colors.indigo)
: ElevatedButton(
onPressed: submit,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.indigo,
foregroundColor: Colors.white,
padding: EdgeInsets.symmetric(
horizontal: 60, vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14),
),
),
child: Text(
isLogin ? "Login" : "Register",
style: TextStyle(fontSize: 18),
),
),
TextButton(
onPressed: () => setState(() => isLogin = !isLogin),
child: Text(
isLogin
? "Create new account"
: "Already have an account?",
style: TextStyle(color: Colors.indigo),
),
),
],
),
),
),
);
}
}
class Dashboard extends StatelessWidget {
final String email;
Dashboard({required this.email});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dashboard"),
backgroundColor: Colors.indigo,
actions: [
IconButton(
icon: Icon(Icons.logout),
onPressed: () {
Navigator.pop(context);
},
)
],
),
body: Center(
child: Text(
"Welcome $email 👋",
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
);
}
}
2) pubspec.yaml
dependencies:
flutter:
sdk: flutter
http: ^1.2.1
flutter_material_color_picker: ^1.1.0
3) db_connect.php
<?php
$conn = new mysqli("localhost", "root", "", "flutter_auth");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
Comments
Post a Comment