In this post, I'm going to show you how to make this beautiful login Screen using Flutter.
Source code :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginPage(),
);
}
}
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: SingleChildScrollView(
child: Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width,
maxHeight: MediaQuery.of(context).size.height,
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.blue[800],
Colors.blue[400],
],
begin: Alignment.topLeft,
end: Alignment.centerRight,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 36.0, horizontal: 24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Login",
style: TextStyle(
color: Colors.white,
fontSize: 42.0,
fontWeight: FontWeight.w800,
),
),
SizedBox(
height: 5.0,
),
Text(
"Enter a Beautiful Place",
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.w400,
),
)
],
),
),
),
Expanded(
flex: 5,
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
)),
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
filled: true,
fillColor: Color(0xFFE7EDEB),
hintText: "Email",
prefixIcon: Icon(
Icons.mail,
color: Colors.grey[600],
),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(8.0),
),
),
),
SizedBox(
height: 20.0,
),
TextField(
obscureText: true,
decoration: InputDecoration(
filled: true,
fillColor: Color(0xFFE7EDEB),
hintText: "password",
prefixIcon: Icon(
Icons.lock,
color: Colors.grey[600],
),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(8.0),
),
),
),
SizedBox(
height: 10.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
"Forget password",
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.blue[800],
decoration: TextDecoration.underline,
),
),
],
),
SizedBox(
height: 50.0,
),
Container(
width: double.infinity,
child: RaisedButton(
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
color: Colors.blue[600],
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 18.0),
child: Text(
"Login",
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
),
),
),
),
),
SizedBox(
height: 80.0,
),
Text("Don't have an Account ? register now")
],
),
),
),
)
],
),
),
),
);
}
}
Make a Login Screen UI In Flutter
Reviewed by Medics
on
September 25, 2020
Rating:
Reviewed by Medics
on
September 25, 2020
Rating:
coronavirus test in north delhi
ReplyDelete