Assalamualaikum, Flutter.id – berikut adalah tampilan desain login yang responsive mengikuti ukuran device dengan warna gradient, dibuat oleh bang syajedul Islam dari Dhaka, Bangladesh.
containerBoxDecoration.dart
import 'package:flutter/material.dart';
class ContainerBox {
static getBoxDecoration({
Color shadowColor,
double blurRadius,
BorderRadius borderRadius,
}) {
return BoxDecoration(
boxShadow: [
BoxShadow(
color: shadowColor,
blurRadius: blurRadius,
),
],
borderRadius: borderRadius,
);
}
}
customTextField.dart
import 'package:flutter/material.dart';
class CustomTextField extends StatelessWidget {
final String hintText;
final double defFontSize;
CustomTextField(this.defFontSize, this.hintText);
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: 60,
child: TextField(
style: TextStyle(
fontSize: defFontSize,
fontWeight: FontWeight.bold,
color: Colors.white),
textAlign: TextAlign.center,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(6)),
borderSide:
BorderSide(width: 0, color: Colors.white.withOpacity(0.2)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(6)),
borderSide:
BorderSide(width: 0, color: Colors.white.withOpacity(0.2)),
),
filled: true,
fillColor: Colors.white.withOpacity(0.2),
hintText: hintText,
hintStyle: TextStyle(color: Colors.white),
),
),
);
}
}
gradientColor.dart
import 'package:flutter/material.dart';
class GradientColor {
static getGradientColor() {
return LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topRight,
colors: <Color>[
Colors.deepPurple.withOpacity(0.8),
Colors.purple.withOpacity(0.7),
Colors.pink.withOpacity(0.7),
Colors.red.withOpacity(0.7),
Colors.orange.withOpacity(0.7),
],
);
}
}
gradientRaisedButton.dart
import 'package:flutter/material.dart';
import 'package:gradient_login_screens/reusableWidgets/gradientColor.dart';
class GradientRaisedButton extends StatelessWidget {
final double fontSize;
GradientRaisedButton(this.fontSize);
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: 60,
decoration: BoxDecoration(
gradient: GradientColor.getGradientColor(),
borderRadius: BorderRadius.circular(10),
),
child: RaisedButton(
color: Colors.transparent,
highlightColor: Colors.pink.withOpacity(0.3),
elevation: 0,
focusElevation: 0,
highlightElevation: 0,
splashColor: Colors.white.withOpacity(0.2),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Text(
'LOGIN',
style: TextStyle(
color: Colors.white,
fontSize: fontSize,
fontWeight: FontWeight.bold),
),
onPressed: () {
// Perform some action
},
),
);
}
}
1_topClipper.dart
import 'package:flutter/material.dart';
class ClipDesign extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ClipPath(
clipper: TopClipper(),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.deepPurple.withOpacity(0.9),
Colors.purple.withOpacity(0.8),
Colors.pink.withOpacity(0.8),
Colors.red.withOpacity(0.8),
Colors.orange.withOpacity(0.8),
//Colors.blue[400],
], begin: Alignment.bottomLeft, end: Alignment.topRight),
),
height: MediaQuery.of(context).size.height / 2.8,
),
);
}
}
class TopClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
// This is where we decide what part of our image is going to be visible.
var path = Path();
path.lineTo(0.0, size.height);
// //creating first curver near bottom left corner
// var firstControlPoint = new Offset(size.width / 9, size.height - 30);
// var firstEndPoint = new Offset(size.width / 7, size.height / 1.5);
// path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
// firstEndPoint.dx, firstEndPoint.dy);
// //creating second curver near center
// var secondControlPoint = Offset(size.width / 4, size.height / 4);
// var secondEndPoint = Offset(size.width / 2, size.height / 2);
// path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
// secondEndPoint.dx, secondEndPoint.dy);
//creating third curver near top right corner
print(size.width / 2 + 100);
var thirdControlPoint = Offset(size.width / 5, size.height / 5);
var thirdEndPoint = Offset(size.width, size.height / 5);
path.quadraticBezierTo(thirdControlPoint.dx, thirdControlPoint.dy,
thirdEndPoint.dx, thirdEndPoint.dy);
///move to top right corner
path.lineTo(size.width, 0.0);
///finally close the path by reaching start point from top right corner
path.close();
return path;
}
static const List<Color> orangeGradients = [
Color(0xFFFF9844),
Color(0xFFFE8853),
Color(0xFFFD7267),
];
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true;
}
}
2_logo.dart
import 'package:flutter/material.dart';
class Logo extends StatelessWidget {
final double iconSize;
Logo(this.iconSize);
@override
Widget build(BuildContext context) {
return Container(
width: iconSize,
height: iconSize,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/circleLogo.png'),
fit: BoxFit.cover),
),
);
}
}
3_textFieldContainer.dart
import 'package:flutter/material.dart';
import 'package:gradient_login_screens/reusableWidgets/containerBoxDecoration.dart';
import 'package:gradient_login_screens/reusableWidgets/customTextField.dart';
import 'package:gradient_login_screens/reusableWidgets/gradientColor.dart';
class TextFieldContainer extends StatelessWidget {
final double defFontSize;
final spaceLeftRight;
TextFieldContainer(this.defFontSize, this.spaceLeftRight);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(left: spaceLeftRight, right: spaceLeftRight),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
decoration: ContainerBox.getBoxDecoration(
shadowColor: Colors.black.withOpacity(0.0),
blurRadius: 13,
borderRadius: BorderRadius.circular(10)),
child: Container(
padding: EdgeInsets.only(
left: 10,
right: 10,
top: 50,
bottom: 50,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: GradientColor.getGradientColor(),
),
child: Column(
children: <Widget>[
CustomTextField(defFontSize, 'MOBILE NUMBER'),
SizedBox(height: 30),
CustomTextField(defFontSize, 'PASSWORD'),
],
),
),
)
],
),
),
);
}
}
//With card
// Card(
// elevation: 0,
// shape: RoundedRectangleBorder(
// borderRadius: BorderRadius.circular(10),
// ),
// child: Container(
// padding: EdgeInsets.all(15),
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(10),
// gradient: GradientColor.getGradientColor(),
// ),
// child: Column(
// children: <Widget>[
// CustomTextFieldCR(18, 'MOBILE NUMBER'),
// SizedBox(height: 30),
// CustomRaisedButtonCR(18),
// ],
// ),
// ),
// );
4_button.dart
import 'package:flutter/material.dart';
import 'package:gradient_login_screens/reusableWidgets/containerBoxDecoration.dart';
import 'package:gradient_login_screens/reusableWidgets/gradientRaisedButton.dart';
class Button extends StatelessWidget {
final spaceLeftRight;
final double defFontSize;
Button(this.defFontSize, this.spaceLeftRight);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(left: spaceLeftRight, right: spaceLeftRight),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
decoration: ContainerBox.getBoxDecoration(
shadowColor: Colors.black.withOpacity(0.0),
blurRadius: 13,
borderRadius: BorderRadius.circular(10)),
child: GradientRaisedButton(defFontSize),
),
],
),
),
);
}
}
loginScreen.dart
import 'package:flutter/material.dart';
import 'package:gradient_login_screens/screenParts/1_topClipper.dart';
import 'package:gradient_login_screens/screenParts/2_logo.dart';
import 'package:gradient_login_screens/screenParts/3_textFieldContainer.dart';
import 'package:gradient_login_screens/screenParts/4_button.dart';
class LoginScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
var devSize = MediaQuery.of(context).size.shortestSide;
var spaceLeftRight;
double sBoxHeight;
double defFontSize;
double logoFontSize;
double iconSize;
double cardButtonGap;
if (devSize <= 400) {
spaceLeftRight = (devSize - devSize * 95 / 100);
sBoxHeight = 20;
defFontSize = 16;
logoFontSize = 20;
iconSize = 100;
cardButtonGap = 20;
} else if (devSize > 400 && devSize <= 700) {
spaceLeftRight = (devSize - devSize * 95 / 100);
sBoxHeight = 50;
defFontSize = 18;
logoFontSize = 26;
iconSize = 150;
cardButtonGap = 50;
} else if (devSize > 700) {
spaceLeftRight = (devSize - devSize * 85 / 100);
sBoxHeight = 100;
defFontSize = 20;
logoFontSize = 36;
iconSize = 250;
cardButtonGap = 70;
}
//Note : Above configuration is to make it responsive. Yes there are other ways
//but I like to do it by my own !
return Scaffold(
backgroundColor: Colors.white,
body: Stack(
children: <Widget>[
//The clipper path used to design that you are seeing on top side !
ClipDesign(),
Container(
alignment: Alignment.center,
width: double.infinity,
height: double.infinity,
child: SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//Logo
Logo(iconSize),
SizedBox(height: sBoxHeight), // Just a space
//App Name
Text(
'TEXT',
style: TextStyle(
fontSize: logoFontSize,
color: Colors.black.withOpacity(0.7),
fontWeight: FontWeight.bold),
),
SizedBox(height: sBoxHeight), // Just a space
//Textfields
TextFieldContainer(defFontSize, spaceLeftRight),
// Space between Textfields and Login button
SizedBox(height: cardButtonGap),
//Login Button
Button(defFontSize, spaceLeftRight),
],
),
),
),
),
],
),
);
}
}
main.dart
import 'package:flutter/material.dart';
import 'loginScreen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginScreen(),
);
}
}
