Login/SignUp Page in Flutter
4 min readSep 29, 2023
Creating login/signup pages in Flutter can vary in design and complexity depending on your app’s requirements. Here are three different login page UI examples in Flutter:
Simple Login/Signup Page
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text('Login & Signup'),
bottom: TabBar(
tabs: [
Tab(text: 'Login'),
Tab(text: 'Signup'),
],
),
),
body: TabBarView(
children: [
LoginCard(),
SignupCard(),
],
),
),
),
);
}
}
class LoginCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Card(
margin: EdgeInsets.all(20.0),
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextField(
decoration: InputDecoration(labelText: 'Email'),
),
SizedBox(height: 10),
TextField(
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// Handle login logic here
},
child: Text('Login'),
),
],
),
),
),
);
}
}
class SignupCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Card(
margin: EdgeInsets.all(20.0),
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextField(
decoration: InputDecoration(labelText: 'Full Name'),
),
SizedBox(height: 10),
TextField(
decoration: InputDecoration(labelText: 'Email'),
),
SizedBox(height: 10),
TextField(
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// Handle signup logic here
},
child: Text('Signup'),
),
],
),
),
),
);
}
}Different UI for login/signup page
import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
const LoginPage({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Container(
margin: const EdgeInsets.all(24),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_header(context),
_inputField(context),
_forgotPassword(context),
_signup(context),
],
),
),
),
);
}
_header(context) {
return const Column(
children: [
Text(
"Welcome Back",
style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
),
Text("Enter your credential to login"),
],
);
}
_inputField(context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextField(
decoration: InputDecoration(
hintText: "Username",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(18),
borderSide: BorderSide.none
),
fillColor: Colors.purple.withOpacity(0.1),
filled: true,
prefixIcon: const Icon(Icons.person)),
),
const SizedBox(height: 10),
TextField(
decoration: InputDecoration(
hintText: "Password",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(18),
borderSide: BorderSide.none),
fillColor: Colors.purple.withOpacity(0.1),
filled: true,
prefixIcon: const Icon(Icons.password),
),
obscureText: true,
),
const SizedBox(height: 10),
ElevatedButton(
onPressed: () {
},
style: ElevatedButton.styleFrom(
shape: const StadiumBorder(),
padding: const EdgeInsets.symmetric(vertical: 16),
backgroundColor: Colors.purple,
),
child: const Text(
"Login",
style: TextStyle(fontSize: 20),
),
)
],
);
}
_forgotPassword(context) {
return TextButton(
onPressed: () {},
child: const Text("Forgot password?",
style: TextStyle(color: Colors.purple),
),
);
}
_signup(context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text("Dont have an account? "),
TextButton(
onPressed: () {
},
child: const Text("Sign Up", style: TextStyle(color: Colors.purple),)
)
],
);
}
}import 'package:flutter/material.dart';
class SignupPage extends StatelessWidget {
const SignupPage({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 40),
height: MediaQuery.of(context).size.height - 50,
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Column(
children: <Widget>[
const SizedBox(height: 60.0),
const Text(
"Sign up",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
const SizedBox(
height: 20,
),
Text(
"Create your account",
style: TextStyle(fontSize: 15, color: Colors.grey[700]),
)
],
),
Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
hintText: "Username",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(18),
borderSide: BorderSide.none),
fillColor: Colors.purple.withOpacity(0.1),
filled: true,
prefixIcon: const Icon(Icons.person)),
),
const SizedBox(height: 20),
TextField(
decoration: InputDecoration(
hintText: "Email",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(18),
borderSide: BorderSide.none),
fillColor: Colors.purple.withOpacity(0.1),
filled: true,
prefixIcon: const Icon(Icons.email)),
),
const SizedBox(height: 20),
TextField(
decoration: InputDecoration(
hintText: "Password",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(18),
borderSide: BorderSide.none),
fillColor: Colors.purple.withOpacity(0.1),
filled: true,
prefixIcon: const Icon(Icons.password),
),
obscureText: true,
),
const SizedBox(height: 20),
TextField(
decoration: InputDecoration(
hintText: "Confirm Password",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(18),
borderSide: BorderSide.none),
fillColor: Colors.purple.withOpacity(0.1),
filled: true,
prefixIcon: const Icon(Icons.password),
),
obscureText: true,
),
],
),
Container(
padding: const EdgeInsets.only(top: 3, left: 3),
child: ElevatedButton(
onPressed: () {
},
child: const Text(
"Sign up",
style: TextStyle(fontSize: 20),
),
style: ElevatedButton.styleFrom(
shape: const StadiumBorder(),
padding: const EdgeInsets.symmetric(vertical: 16),
backgroundColor: Colors.purple,
),
)
),
const Center(child: Text("Or")),
Container(
height: 45,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
border: Border.all(
color: Colors.purple,
),
boxShadow: [
BoxShadow(
color: Colors.white.withOpacity(0.5),
spreadRadius: 1,
blurRadius: 1,
offset: const Offset(0, 1), // changes position of shadow
),
],
),
child: TextButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 30.0,
width: 30.0,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/login_signup/google.png'),
fit: BoxFit.cover),
shape: BoxShape.circle,
),
),
const SizedBox(width: 18),
const Text("Sign In with Google",
style: TextStyle(
fontSize: 16,
color: Colors.purple,
),
),
],
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text("Already have an account?"),
TextButton(
onPressed: () {
},
child: const Text("Login", style: TextStyle(color: Colors.purple),)
)
],
)
],
),
),
),
),
);
}
}Hope you like it
Want more ??? 😋
