Required Tools
To build this app, you need the following items installed on your machine:
1.Visual Studio Code (One of Flutter’s recommended IDEs).
2.Android Emulator / iOS Simulator / Original device.
3.Flutter Installed (I would recommend following this guide to install it if you don’t have it already)
4.Flutter plugin for VS Code (Recommended Guide).
Also Read:-Top 100 Flutter interview questions and answers in 2024
How to Create the Project?
- Open Visual Studio Code from that directory.
- Open the command palette by pressing CTRL + SHIFT + P and type Flutter. Choose Flutter: New Project from the listed options.
- Select Application from the next list.
- It’ll ask you to Select the target folder to create the project. By default, it’ll be in the same folder where you opened VS Code. Type your app name in the text input and hit Enter. I’m naming mine loginapp, but you can type any name you wish.
Note: Here, the flutter-logo.png file is copied into the asset/images folder in this flutter application and written into the pubspec.yaml file to get it in our code.
# To add assets to your application, add an assets section, like this: assets: – asset/images/
After adding asset run Packages get command to get a result.
Full Code For Login Page
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:form_field_validator/form_field_validator.dart';
class Login extends StatefulWidget {
const Login({Key? key}) : super(key: key);
@override
State<Login> createState() => _LoginState();
}
class _LoginState extends State<Login> {
Map userData = {};
final _formkey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login'),
centerTitle: true,
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 30.0),
child: Center(
child: Container(
width: 120,
height: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
border: Border.all(color: Colors.blueGrey)),
child: Image.asset('assets/logo.png'),
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 15),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Form(
key: _formkey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(12.0),
child: TextFormField(
validator: MultiValidator([
RequiredValidator(
errorText: 'Enter email address'),
EmailValidator(
errorText:
'Please correct email filled'),
]),
decoration: InputDecoration(
hintText: 'Email',
labelText: 'Email',
prefixIcon: Icon(
Icons.email,
//color: Colors.green,
),
errorStyle: TextStyle(fontSize: 18.0),
border: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.red),
borderRadius: BorderRadius.all(
Radius.circular(9.0)))))),
Padding(
padding: const EdgeInsets.all(12.0),
child: TextFormField(
validator: MultiValidator([
RequiredValidator(
errorText: 'Please enter Password'),
MinLengthValidator(8,
errorText:
'Password must be atlist 8 digit'),
PatternValidator(r'(?=.*?[#!@$%^&*-])',
errorText:
'Password must be atlist one special character')
]),
decoration: InputDecoration(
hintText: 'Password',
labelText: 'Password',
prefixIcon: Icon(
Icons.key,
color: Colors.green,
),
errorStyle: TextStyle(fontSize: 18.0),
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius:
BorderRadius.all(Radius.circular(9.0))),
),
),
),
Container(
margin: EdgeInsets.fromLTRB(180, 0, 0, 0),
child: Text('Forget Password!'),
),
Padding(
padding: const EdgeInsets.all(28.0),
child: Container(
child: RaisedButton(
child: Text(
'Login',
style: TextStyle(
color: Colors.white, fontSize: 22),
),
onPressed: () {
if (_formkey.currentState!.validate()) {
print('form submiitted');
}
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30)),
color: Colors.blue,
),
width: MediaQuery.of(context).size.width,
height: 50,
),
),
Center(
child: Padding(
padding: EdgeInsets.fromLTRB(0, 30, 0, 0),
child: Center(
child: Text(
'Or Sign In Using!',
style: TextStyle(
fontSize: 18, color: Colors.black),
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
child: Row(
children: [
Container(
height: 40,
width: 40,
child: Image.asset(
'assets/social.jpg',
fit: BoxFit.cover,
)),
Container(
height: 70,
width: 70,
child: Image.asset(
'assets/vishal.png',
fit: BoxFit.cover,
),
),
Container(
height: 40,
width: 40,
child: Image.asset(
'assets/google.png',
fit: BoxFit.cover,
),
),
],
),
),
],
),
Center(
child: Container(
padding: EdgeInsets.only(top: 50),
child: Text(
'SIGN UP!',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.lightBlue,
),
),
),
)
]),
)),
),
],
),
),
);
}
}
0 Comments