Php Mysql Flutter Glassmorphic Login -Signup Page | Part One

 

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 Full Tutorial is also available on YouTube make sure to check it out

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