Php Mysql Flutter Glassmorphic Login -Signup Page | Part One

byPosted at



Today We Will be Designing the Glassmorphic ui for login signup and in next part using php MySql
We will implement realtime login signup on a localhost .you can also use online database instead of the localhost . 

'Glassmorphic_ui' dependency is used so quickly add it to the pubspec.yaml file from pub.dev



The Project Structure is:




main.dart 39 lines
import 'package:flutter/material.dart';
import 'package:o1loginsignupphp/ui/login.dart';
import 'package:o1loginsignupphp/ui/signup.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
hintColor: Colors.grey.withOpacity(0.7),
),
debugShowCheckedModeBanner: false,
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue.shade300,
body: loginpageui(),
);
}
}

Login.dart 123 lines
import 'package:flutter/material.dart';
import 'package:glassmorphism_ui/glassmorphism_ui.dart';
import 'package:o1loginsignupphp/ui/signup.dart';
import 'package:o1loginsignupphp/ui/textfieldui.dart';
class loginpageui extends StatefulWidget {
const loginpageui({super.key});
@override
State<loginpageui> createState() => _loginpageuiState();
}
class _loginpageuiState extends State<loginpageui> {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
//uncomment if you want to load a picture as a background
// image: DecorationImage(
// image: AssetImage("lib/assets/background.png"),
// fit: BoxFit.fill,
// ),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.cyan.shade300,
Color.fromARGB(255, 26, 95, 151),
Color.fromARGB(255, 5, 152, 172),
Colors.cyan.shade300,
],
),
),
child: Center(
child: GlassContainer(
height: 295,
width: MediaQuery.of(context).size.width * 0.8,
blur: 95,
color: Colors.white.withOpacity(0.1),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.white.withOpacity(0.2),
Colors.grey.withOpacity(0.3),
],
),
//--code to remove border
border: Border.fromBorderSide(BorderSide.none),
shadowStrength: 5,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(16),
shadowColor: Colors.white.withOpacity(0.24),
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: [
TextFieldUi(
"Email / username", "Emial adress", Icons.email, false),
SizedBox(
height: 20,
),
TextFieldUi("Password", "Password", Icons.lock, true),
SizedBox(
height: 35,
),
Container(
height: 45,
width: MediaQuery.of(context).size.width * 0.7,
child: ElevatedButton(
onPressed: () {},
child: Text(
"Login",
style: TextStyle(
fontSize: 20,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.black.withOpacity(0.3),
onPrimary: Colors.white.withOpacity(0.5),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
),
),
SizedBox(
height: 15,
),
Container(
child: Row(
children: [
Text(
"Doesn't have an account?",
style: TextStyle(
fontSize: 14,
color: Colors.white.withOpacity(0.5),
),
),
TextButton(
child: Text(
"Register now",
style: TextStyle(
color: Colors.white.withOpacity(0.5),
fontSize: 14),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SignUpUi()));
}),
],
),
),
],
),
),
),
),
);
}
}
Signup.dart 156 lines
import 'package:flutter/material.dart';
import 'package:glassmorphism_ui/glassmorphism_ui.dart';
import 'package:o1loginsignupphp/main.dart';
import 'package:o1loginsignupphp/ui/textfieldui.dart';
import 'package:o1loginsignupphp/ui/login.dart';
class SignUpUi extends StatefulWidget {
const SignUpUi({super.key});
@override
State<SignUpUi> createState() => _SignUpUiState();
}
class _SignUpUiState extends State<SignUpUi> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
// image: DecorationImage(
// image: AssetImage("lib/assets/background.png"),
// fit: BoxFit.fill,
// ),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.cyan.shade300,
Color.fromARGB(255, 26, 95, 151),
Color.fromARGB(255, 5, 152, 172),
Colors.cyan.shade300,
],
),
),
child: Center(
child: GlassContainer(
height: 440,
width: MediaQuery.of(context).size.width * 0.85,
blur: 95,
color: Colors.white.withOpacity(0.1),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.white.withOpacity(0.2),
Colors.grey.withOpacity(0.3),
],
),
//--code to remove border
border: Border.fromBorderSide(BorderSide.none),
shadowStrength: 5,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(16),
shadowColor: Colors.white.withOpacity(0.24),
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: [
TextFieldUi("Username", "Full Name", Icons.person, false),
SizedBox(
height: 20,
),
TextFieldUi("Email", "Email Adress", Icons.email, false),
SizedBox(
height: 20,
),
TextFieldUi("Password", "Password", Icons.key_outlined, true),
SizedBox(
height: 20,
),
TextFieldUi("Confirm password", "confirm password",
Icons.key_outlined, true),
SizedBox(
height: 20,
),
Container(
height: 45,
width: MediaQuery.of(context).size.width * 0.85,
child: ElevatedButton(
onPressed: () {
//alert dialoge
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Sign Up Successful"),
content: Text(""),
actions: [
TextButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MyHomePage(),
),
);
},
child: Text("OK"),
),
],
);
},
);
},
child: Text(
"Register Now",
style: TextStyle(
fontSize: 20,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.black.withOpacity(0.3),
onPrimary: Colors.white.withOpacity(0.5),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
),
),
SizedBox(
height: 15,
),
Container(
child: Row(
children: [
Text(
" Already have an account?",
style: TextStyle(
fontSize: 14,
color: Colors.white.withOpacity(0.5),
),
),
TextButton(
child: Text(
"Login",
style: TextStyle(
color: Colors.white.withOpacity(0.5),
fontSize: 14),
),
onPressed: () {
Navigator.pop(context);
}),
],
),
),
],
),
),
),
),
),
);
}
}

textfield.dart 21 lines
import 'package:flutter/material.dart';
Widget TextFieldUi(lbltext, hnttxt, icn, obstxt) {
return TextField(
obscureText: obstxt,
style: TextStyle(color: Colors.white.withOpacity(0.5)),
decoration: InputDecoration(
labelText: lbltext,
fillColor: Colors.black.withOpacity(0.3),
filled: true,
prefixIcon: Icon(
icn,
color: Colors.grey.withOpacity(0.5),
),
hintText: hnttxt,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
),
);
}


  You Are ALL Done COnsider Following US in YOUTUBE




Share
Post a Comment Labels,

Comments

If u have any doubts ,let-me-know

Translate

search blog monthly

Contact Form

Send