lib/Widgets/FormCard.dart
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class FormCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
// height: ScreenUtil.getInstance().setHeight(500),
padding: const EdgeInsets.only(bottom: 1),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8.0),
boxShadow: const [
BoxShadow(
color: Colors.black12,
offset: Offset(0.0, 15.0),
blurRadius: 15.0),
BoxShadow(
color: Colors.black12,
offset: Offset(0.0, -10.0),
blurRadius: 10.0),
]),
child: Padding(
padding: const EdgeInsets.only(left: 16.0, right: 16.0, top: 16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Login",
style: TextStyle(
fontSize: ScreenUtil.getInstance().setSp(45),
fontFamily: "Poppins-Bold",
letterSpacing: .6)),
SizedBox(
height: ScreenUtil.getInstance().setHeight(30),
),
Text("Username",
style: TextStyle(
fontFamily: "Poppins-Medium",
fontSize: ScreenUtil.getInstance().setSp(26))),
const TextField(
decoration: InputDecoration(
hintText: "Username",
hintStyle: TextStyle(color: Colors.blueGrey, fontSize: 12.0)),
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(30),
),
Text("PassWord",
style: TextStyle(
fontFamily: "Poppins-Medium",
fontSize: ScreenUtil.getInstance().setSp(26))),
const TextField(
obscureText: true,
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(color: Colors.blueGrey, fontSize: 12.0)),
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(35),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
"Forgot Password?",
style: TextStyle(
color: Colors.deepPurple,
fontFamily: "Poppins-Medium",
fontSize: ScreenUtil.getInstance().setSp(28)),
)
],
)
],
),
),
);
}
}
lib/Widgets/SocialIcons.dart
import 'package:flutter/material.dart';
class SocialIcon extends StatelessWidget {
final List<Color> colors;
final IconData iconData;
final Function onPressed;
SocialIcon({required this.colors, required this.iconData, required this.onPressed});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 14.0),
child: Container(
width: 45.0,
height: 45.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(colors: colors, tileMode: TileMode.clamp)),
child: RawMaterialButton(
shape: const CircleBorder(),
onPressed: (){},
child: Icon(iconData, color: Colors.white),
),
),
);
}
}
lib/CustomIcons.dart
import 'package:flutter/material.dart';
class CustomIcons {
static const IconData twitter = IconData(0xe900, fontFamily: "CustomIcons");
static const IconData facebook = IconData(0xe901, fontFamily: "CustomIcons");
static const IconData googlePlus =
IconData(0xe902, fontFamily: "CustomIcons");
static const IconData linkedin = IconData(0xe903, fontFamily: "CustomIcons");
}
lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'Widgets/FormCard.dart';
import 'Widgets/SocialIcons.dart';
import 'CustomIcons.dart';
void main() => runApp(MaterialApp(
home: MyApp(),
debugShowCheckedModeBanner: false,
));
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool _isSelected = false;
void _radio() {
setState(() {
_isSelected = !_isSelected;
});
}
Widget radioButton(bool isSelected) => Container(
width: 16.0,
height: 16.0,
padding: const EdgeInsets.all(2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(width: 2.0, color: Colors.black)),
child: isSelected
? Container(
width: double.infinity,
height: double.infinity,
decoration:
const BoxDecoration(shape: BoxShape.circle, color: Colors.black),
)
: Container(),
);
Widget horizontalLine() => Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Container(
width: ScreenUtil.getInstance().setWidth(120),
height: 1.0,
color: Colors.black26.withOpacity(.2),
),
);
@override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
ScreenUtil.instance =
ScreenUtil(width: 750, height: 1334, allowFontScaling: true);
return Scaffold(
backgroundColor: Colors.white,
resizeToAvoidBottomInset: true,
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Image.asset("assets/image_01.png"),
),
Expanded(
child: Container(),
),
Expanded(child: Image.asset("assets/image_02.png"))
],
),
SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(left: 28.0, right: 28.0, top: 60.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Image.asset(
"assets/logo.png",
width: ScreenUtil.getInstance().setWidth(110),
height: ScreenUtil.getInstance().setHeight(110),
),
Text("Company",
style: TextStyle(
fontFamily: "Poppins-Bold",
fontSize: ScreenUtil.getInstance().setSp(46),
letterSpacing: .6,
fontWeight: FontWeight.bold))
],
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(180),
),
FormCard(),
SizedBox(height: ScreenUtil.getInstance().setHeight(40)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
const SizedBox(
width: 12.0,
),
GestureDetector(
onTap: _radio,
child: radioButton(_isSelected),
),
const SizedBox(
width: 8.0,
),
const Text("Remember me",
style: TextStyle(
fontSize: 12, fontFamily: "Poppins-Medium"))
],
),
InkWell(
child: Container(
width: ScreenUtil.getInstance().setWidth(330),
height: ScreenUtil.getInstance().setHeight(100),
decoration: BoxDecoration(
gradient: const LinearGradient(colors: [
Colors.deepPurpleAccent,
Colors.purpleAccent
]),
borderRadius: BorderRadius.circular(6.0),
boxShadow: [
BoxShadow(
color: const Color(0xFF6078ea).withOpacity(.3),
offset: const Offset(0.0, 8.0),
blurRadius: 8.0)
]),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {},
child: const Center(
child: Text("SIGNIN",
style: TextStyle(
color: Colors.black,
fontFamily: "Poppins-Bold",
fontSize: 18,
letterSpacing: 1.0)),
),
),
),
),
)
],
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(40),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
horizontalLine(),
const Text("Social Login",
style: TextStyle(
fontSize: 16.0, fontFamily: "Poppins-Medium")),
horizontalLine()
],
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(40),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SocialIcon(
colors: const[
Color(0xFF102397),
Color(0xFF187adf),
Color(0xFF00eaf8),
],
iconData: CustomIcons.facebook,
onPressed: () {},
),
SocialIcon(
colors: const[
Color(0xFFff4f38),
Color(0xFFff355d),
],
iconData: CustomIcons.googlePlus,
onPressed: () {},
),
SocialIcon(
colors: const[
Color(0xFF17ead9),
Color(0xFF6078ea),
],
iconData: CustomIcons.twitter,
onPressed: () {},
),
SocialIcon(
colors: const[
Color(0xFF00c6fb),
Color(0xFF005bea),
],
iconData: CustomIcons.linkedin,
onPressed: () {},
)
],
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(30),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
"New User? ",
style: TextStyle(fontFamily: "Poppins-Medium"),
),
InkWell(
onTap: () {},
child: const Text("SignUp",
style: TextStyle(
color: Color(0xFF5d74e3),
fontFamily: "Poppins-Bold")),
)
],
)
],
),
),
)
],
),
);
}
}