Dalam pembuatan cek login ini memerlukan beberapa directory baru pada projek dan juga membutuhkan package baru dan bebera file.dart diantaranya :
Directory :
assets : untuk tempat mengcopy image atau gambar yang digunakan.
Package dan isi file nya :
helper :
- clipper.dart
- container.dart
- error.dart
- validasi.dart
screen :
- home.dart
- login_screen.dart
main.dart
Untuk melakukan percobaan pada cek login bisa mengikuti langkah berikut
Untuk yang pertama kali dilakukan adalah mengaktifkan menu asset pada file pubsec.yaml dengan menghapus tanda pagar (#) pada asset dan mendaftar gambar yang telah di copy kan pada directori assets sebelumnya.
kemudian tambahkan code dibawah ini :
clipper.dart :
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
class ClipPainter extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var height = size.height;
var width = size.width;
var path = new Path();
path.lineTo(0, size.height);
path.lineTo(size.width, height);
path.lineTo(size.width, 0);
/// [Top Left corner]
var secondControlPoint = Offset(0, 0);
var secondEndPoint = Offset(width * .4, height * .3);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
secondEndPoint.dx, secondEndPoint.dy);
/// [Left Middle]
var fifthControlPoint = Offset(width * .3, height * .4);
var fiftEndPoint = Offset(width * .30, height * .6);
path.quadraticBezierTo(fifthControlPoint.dx, fifthControlPoint.dy,
fiftEndPoint.dx, fiftEndPoint.dy);
/// [Bottom Left corner]
var thirdControlPoint = Offset(0, height);
var thirdEndPoint = Offset(width, height);
path.quadraticBezierTo(thirdControlPoint.dx, thirdControlPoint.dy,
thirdEndPoint.dx, thirdEndPoint.dy);
path.lineTo(0, size.height);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true;
}
}
container.dart :
import 'package:ceklogin/helper/cliper.dart';
import 'package:flutter/material.dart';
import 'dart:math';
class BezierContainer extends StatelessWidget {
const BezierContainer({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Transform.rotate(
angle: -pi / 3.5,
child: ClipPath(
clipper: ClipPainter(),
child: Container(
height: MediaQuery.of(context).size.height * .5,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFFFFFF), Color(0xFFFFFF)])),
),
),
));
}
}
error.dart :
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:giffy_dialog/giffy_dialog.dart';
class ErrorMessage {
String message, title, desc;
static void flash(message) {
Fluttertoast.showToast(
msg: message,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
backgroundColor: Colors.black26,
textColor: Colors.white,
fontSize: 16.0);
}
static void flashCenter(message) {
Fluttertoast.showToast(
msg: message,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
backgroundColor: Colors.black26,
textColor: Colors.white,
fontSize: 16.0);
}
static void giffy(title, desc, context) {
showDialog(
context: context,
builder: (_) => AssetGiffyDialog(
// key: keys[5],
image: Image.asset(
'assets/animation_500_error.gif',
fit: BoxFit.cover,
),
title: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 22.0, fontWeight: FontWeight.w600),
),
entryAnimation: EntryAnimation.BOTTOM_RIGHT,
description: Text(
desc,
textAlign: TextAlign.center,
style: TextStyle(),
),
onlyOkButton: true,
buttonOkColor: Color(0xff128827),
onOkButtonPressed: () {
Navigator.of(context).pop();
},
));
}
}
validasi.dart :
String registeredUsername = 'anakbaik';
String registeredPassword = "anakbaik";
home.dart :
import 'package:flutter/material.dart';
void main() => runApp(Home());
class Home extends StatelessWidget {
final title = 'List Apps';
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: title,
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text(title),
backgroundColor: Colors.green,
),
body: ListView(
children: [ListTile(leading: Icon(Icons.person), title: Text('Person'),
),
ListTile(leading: Icon(Icons.mail), title: Text('Mail'),
),
ListTile(leading: Icon(Icons.album), title: Text('Album'),
),
ListTile(leading: Icon(Icons.alarm), title: Text('Alarm'),
),
ListTile(leading: Icon(Icons.map), title: Text('Map'),
),
],
),
),
);
}
}
login_screen.dart :
import 'package:ceklogin/helper/container.dart';
import 'package:ceklogin/helper/error.dart';
import 'package:ceklogin/screen/home.dart';
import 'package:flutter/material.dart';
import 'package:ceklogin/helper/validasi.dart' as validasi;
class LoginScreen extends StatefulWidget {
LoginScreen({Key key, this.title}) : super(key: key);
final String title;
@override
_LoginScreenState createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
TextEditingController _usernameController = TextEditingController();
TextEditingController _passwordController = TextEditingController();
Widget _entryUsernameField() {
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Username',
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 15,
),
),
SizedBox(
height: 10,
),
TextField(
controller: _usernameController,
obscureText: false,
decoration: InputDecoration(
hintText: 'username',
prefixIcon: Icon(
Icons.person,
color: Color(0xff128827),
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Color(0xff128827), width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Color(0xff128827), width: 1.0),
),
border: OutlineInputBorder(),
fillColor: Color(0xFFFFFF),
filled: true))
],
),
);
}
Widget _entryPasswordField() {
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Password',
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 15,
),
),
SizedBox(
height: 10,
),
TextField(
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(
hintText: '••••••',
prefixIcon: Icon(
Icons.lock,
color: Color(0xff128827),
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Color(0xff128827), width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Color(0xff128827), width: 1.0),
),
border: OutlineInputBorder(),
fillColor: Color(0xFFFFFF),
filled: true))
],
),
);
}
Widget _submitButton() {
return RaisedButton(
onPressed: () => _validateLogin(),
textColor: Colors.white,
padding: EdgeInsets.all(0.0),
child: Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(
colors: <Color>[
Color(0x59a0f2af),
Color(0xff128827),
],
),
),
child: Text('Login',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
)),
),
);
}
Widget _title() {
return Container(
child: Align(
alignment: Alignment.center,
child: Text("Register and Login",
textScaleFactor: 1.5,
style: TextStyle(
fontWeight: FontWeight.w900,
fontSize: 20,
color: Color(0xff128827)))));
}
Widget _emailPasswordWidget() {
return Column(
children: <Widget>[_entryUsernameField(), _entryPasswordField()],
);
}
@override
Widget build(BuildContext context) {
final height = MediaQuery.of(context).size.height;
print(validasi.registeredUsername);
return Scaffold(
body: Container(
// height: height,
child: Stack(
children: <Widget>[
Positioned(
top: -height * .14,
right: -MediaQuery.of(context).size.width * .3,
child: BezierContainer()),
Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: height * .2),
_title(),
SizedBox(height: 50),
_emailPasswordWidget(),
SizedBox(height: 20),
// _submitButton(),
_submitButton(),
],
),
),
),
],
),
));
}
void _validateLogin() {
if (_usernameController.text.isEmpty && _usernameController.text.isEmpty) {
ErrorMessage.flash("Username & Password Harus Diisi");
} else if (_usernameController.text.isEmpty) {
ErrorMessage.flash("Username harus Diisi");
} else if (_passwordController.text.isEmpty) {
ErrorMessage.flash("Password Harus Diisi");
} else if (_passwordController.text.length < 6) {
ErrorMessage.flash("Password Harus Lebih dari 6 Digit");
} else if (_usernameController.text == validasi.registeredUsername ||
_passwordController.text == validasi.registeredPassword) {
Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) {
return Home();
}));
} else {
ErrorMessage.giffy(
'Login Gagal', 'Username atau Password Tidak Valid.', context);
}
}
}
main.dart :
import 'package:ceklogin/screen/login_screen.dart';
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(
title: 'Cek Login',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.green,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.wb_cloudy, color: Colors.white,size: 45,),
SizedBox(height: 20,),
Text("Welcome to Flutter", style: TextStyle(color:
Colors.white, fontSize: 22)),
SizedBox(height: 10,),
Text("Get real-time updates about what", style:
TextStyle(color: Colors.white, fontSize: 18)),
Text("maters to you", style: TextStyle(color:
Colors.white, fontSize: 18)),
SizedBox(height: 20,),
MaterialButton(
minWidth: 210,
color: Colors.white,
textColor: Colors.green,
child: Text("Login", style: TextStyle(fontWeight:
FontWeight.bold, fontSize: 18),),
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder:
(context) => LoginScreen()));
},
),
],
),
),
);
}
}
Hasil :
