Cek Login User

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 :

Leave a Comment