Tutorial Menciptakan Form Login Dan Register Keren Dengan Flutter

Tutorial Membuat Form Login dan Register dengan Flutter

- Form login dan register merupakan komponen yang penting dalam pembuatan suatu aplikasi yang membutuhkan terusan pengguna. Pada tutorial ini kita akan berguru menciptakan halaman form login dan register keren dan menarik memakai flutter. Codingtive menyediakan tutorial flutter bahasa indonesia untuk pemula hingga mahir.

Jika sebelumnya kalian belum pernah mencoba menciptakan layout dengan Flutter, kalian sanggup mengikuti Tutorial Flutter Membuat Layout Sederhana. Desain halaman login dan register yang akan kita buat terinspirasi dari karya Max. Untuk mulai membuatnya ikuti langkah-langkah berikut :

1. Buat project flutter

Pertama laptop kalian sudah terinstall flutter, dan gunakan IDE Android Studio atau alternatif Visual Studio Code. Buat project flutter dan beri nama login_register_layout, tunggu hingga proses sinkronisasi selesai.

2. Menyiapkan assets

Sebelum menciptakan layout, kalian sanggup mengunduh asset gambar di repository saya. Kemudian buat folder gres dengan nama assets, buat folder didalam assets dengan nama images, dan pindahkan assets gambar yang sudah diunduh ke folder images.

Selanjutnya pendaftaran gambar yang sudah ditambahkan dengan membuka file pubspec.yaml, cari kata assets, hapus komentar dan tambahkan instruksi berikut :

assets:   - assets/images/ 

3. Menyiapkan assets warna

Untuk memudahkan penggunaan warna, buat file gres pada folder lib dan beri nama constants. File ini nantinya dipakai untuk color palette yang akan dipanggil pada halaman login dan register. Tulis kodenya ibarat berikut :

import 'package:flutter/material.dart';  class ColorPalette {   static const primaryColor = Color(0xff5364e8);   static const primaryDarkColor = Color(0xff607Cbf);   static const underlineTextField = Color(0xff8b97ff);   static const hintColor = Color(0xffccd1ff); } 

4. Membuat halaman login

Selanjutnya buka folder lib, buat folder gres dengan nama screens dan buat file gres didalamnya dengan nama login_view.dart. Folder screens dipakai untuk halaman supaya file didalam folder lib lebih rapi. Ketik instruksi berikut didalam file login_view.dart :

import 'package:flutter/material.dart'; import 'package:login_register_layout/constants.dart'; import 'package:login_register_layout/screens/register_view.dart';  class LoginPage extends StatelessWidget {   @override   Widget build(BuildContext context) {     return Scaffold(       body: Container(         color: ColorPalette.primaryColor,         padding: EdgeInsets.all(20.0),         child: ListView(           children: <Widget>[             Center(               child: Column(                 children: <Widget>[                   _iconLogin(),                   _titleDescription(),                   _textField(),                   _buildButton(context),                 ],               ),             ),           ],         ),       ),     );   }    Widget _iconLogin() {     return Image.asset(               "assets/images/icon_login.png",               width: 150.0,               height: 150.0,             );   }    Widget _titleDescription() {     return Column(       children: <Widget>[         Padding(           padding: EdgeInsets.only(top: 16.0),         ),         Text(           "Login into app",           style: TextStyle(             color: Colors.white,             fontSize: 16.0,           ),         ),         Padding(           padding: EdgeInsets.only(top: 12.0),         ),         Text(           "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt ante lacus, eu pretium purus vulputate sit amet.",           style: TextStyle(             fontSize: 12.0,             color: Colors.white,           ),           textAlign: TextAlign.center,         ),       ],     );   }    Widget _textField() {     return Column(       children: <Widget>[         Padding(           padding: EdgeInsets.only(top: 12.0),         ),         TextFormField(           decoration: const InputDecoration(             border: UnderlineInputBorder(),             enabledBorder: UnderlineInputBorder(               borderSide: BorderSide(                 color: ColorPalette.underlineTextField,                  width: 1.5,               ),             ),             focusedBorder: UnderlineInputBorder(               borderSide: BorderSide(                 color: Colors.white,                 width: 3.0,               ),             ),             hintText: "Username",             hintStyle: TextStyle(color: ColorPalette.hintColor),           ),           style: TextStyle(color: Colors.white),           autofocus: false,         ),         Padding(           padding: EdgeInsets.only(top: 12.0),         ),         TextFormField(           decoration: const InputDecoration(             border: UnderlineInputBorder(),             enabledBorder: UnderlineInputBorder(               borderSide: BorderSide(                 color: ColorPalette.underlineTextField,                  width: 1.5,               ),             ),             focusedBorder: UnderlineInputBorder(               borderSide: BorderSide(                 color: Colors.white,                 width: 3.0,               ),             ),             hintText: "Password",             hintStyle: TextStyle(color: ColorPalette.hintColor),           ),           style: TextStyle(color: Colors.white),           obscureText: true,           autofocus: false,         ),       ],     );   }    Widget _buildButton(BuildContext context) {     return Column(       children: <Widget>[         Padding(           padding: EdgeInsets.only(top: 16.0),         ),         InkWell(           child: Container(             padding: EdgeInsets.symmetric(vertical: 8.0),             width: double.infinity,             child: Text(               'Login',               style: TextStyle(color: ColorPalette.primaryColor),               textAlign: TextAlign.center,             ),             decoration: BoxDecoration(               color: Colors.white,               borderRadius: BorderRadius.circular(30.0),             ),           ),         ),         Padding(           padding: EdgeInsets.only(top: 16.0),         ),         Text(           'or',           style: TextStyle(             color: Colors.white,             fontSize: 12.0,           ),         ),         FlatButton(           child: Text(             'Register',             style: TextStyle(color: Colors.white),           ),           onPressed: () {             Navigator.pushNamed(context, RegisterPage.routeName);           },         ),       ],     );   } } 

Catatan :

Pada serpihan import dan pemanggilan class halaman register masih error sebab kita belum membuatnya, biarkan terlebih dahulu dan ikuti langkah berikutnya.

5. Membuat halaman register

Buat file gres pada folder lib > screens dengan nama register_view.dart, dan tambahkan kodenya ibarat berikut :

import 'package:flutter/material.dart'; import 'package:login_register_layout/constants.dart';  class RegisterPage extends StatelessWidget {    static const routeName = "/registerPage";    @override   Widget build(BuildContext context) {     return Scaffold(       body: Container(         color: ColorPalette.primaryColor,         padding: EdgeInsets.all(20.0),         child: ListView(           children: <Widget<[             Center(               child: Column(                 children: <Widget<[                   _iconRegister(),                   _titleDescription(),                   _textField(),                   _buildButton(context),                 ],               ),             ),           ],         ),       ),     );   }    Widget _iconRegister() {     return Image.asset(               "assets/images/icon_register.png",               width: 150.0,               height: 150.0,             );   }    Widget _titleDescription() {     return Column(       children: <Widget<[         Padding(           padding: EdgeInsets.only(top: 16.0),         ),         Text(           "Registration",           style: TextStyle(             color: Colors.white,             fontSize: 16.0,           ),         ),         Padding(           padding: EdgeInsets.only(top: 12.0),         ),         Text(           "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt ante lacus, eu pretium purus vulputate sit amet.",           style: TextStyle(             fontSize: 12.0,             color: Colors.white,           ),           textAlign: TextAlign.center,         ),       ],     );   }    Widget _textField() {     return Column(       children: <Widget<[         Padding(           padding: EdgeInsets.only(top: 12.0),         ),         TextFormField(           decoration: const InputDecoration(             border: UnderlineInputBorder(),             enabledBorder: UnderlineInputBorder(               borderSide: BorderSide(                 color: ColorPalette.underlineTextField,                  width: 1.5,               ),             ),             focusedBorder: UnderlineInputBorder(               borderSide: BorderSide(                 color: Colors.white,                 width: 3.0,               ),             ),             hintText: "Username",             hintStyle: TextStyle(color: ColorPalette.hintColor),           ),           style: TextStyle(color: Colors.white),           autofocus: false,         ),         Padding(           padding: EdgeInsets.only(top: 12.0),         ),         TextFormField(           decoration: const InputDecoration(             border: UnderlineInputBorder(),             enabledBorder: UnderlineInputBorder(               borderSide: BorderSide(                 color: ColorPalette.underlineTextField,                  width: 1.5,               ),             ),             focusedBorder: UnderlineInputBorder(               borderSide: BorderSide(                 color: Colors.white,                 width: 3.0,               ),             ),             hintText: "Password",             hintStyle: TextStyle(color: ColorPalette.hintColor),           ),           style: TextStyle(color: Colors.white),           obscureText: true,           autofocus: false,         ),         Padding(           padding: EdgeInsets.only(top: 12.0),         ),         TextFormField(           decoration: const InputDecoration(             border: UnderlineInputBorder(),             enabledBorder: UnderlineInputBorder(               borderSide: BorderSide(                 color: ColorPalette.underlineTextField,                  width: 1.5,               ),             ),             focusedBorder: UnderlineInputBorder(               borderSide: BorderSide(                 color: Colors.white,                 width: 3.0,               ),             ),             hintText: "Confirm Password",             hintStyle: TextStyle(color: ColorPalette.hintColor),           ),           style: TextStyle(color: Colors.white),           obscureText: true,           autofocus: false,         ),       ],     );   }    Widget _buildButton(BuildContext context) {     return Column(       children: <Widget<[         Padding(           padding: EdgeInsets.only(top: 16.0),         ),         InkWell(           child: Container(             padding: EdgeInsets.symmetric(vertical: 8.0),             width: double.infinity,             child: Text(               'Register',               style: TextStyle(color: ColorPalette.primaryColor),               textAlign: TextAlign.center,             ),             decoration: BoxDecoration(               color: Colors.white,               borderRadius: BorderRadius.circular(30.0),             ),           ),         ),         Padding(           padding: EdgeInsets.only(top: 16.0),         ),         Text(           'or',           style: TextStyle(             color: Colors.white,             fontSize: 12.0,           ),         ),         FlatButton(           child: Text(             'Login',             style: TextStyle(color: Colors.white),           ),           onPressed: () {             Navigator.pushNamed(context, "/");           },         ),       ],     );   } } 

6. Membuat routing

Routing dipakai untuk berpindah halaman, kita akan menghubungkan halaman login dan register. Ada beberapa cara routing dan navigasi pada Flutter, untuk cara yang paling basic dan gampang kalian sanggup mempelajarinya di Tutorial Flutter Cara Praktis Berpindah Halaman. 

Buka file main.dart pada folder lib, dan ubah kodenya menjadi ibarat berikut :

import 'package:flutter/material.dart'; import 'package:login_register_layout/screens/login_view.dart'; import 'package:login_register_layout/screens/register_view.dart';  void main() {   runApp(MaterialApp(     debugShowCheckedModeBanner: false,     title: "Login Register Page",     initialRoute: "/",     routes: {       "/" : (context) => LoginPage(),       RegisterPage.routeName : (context) => RegisterPage(),     },   )); } 

Catatan :

initialRoute dipakai untuk route yang pertama kali ditampilkan pada aplikasi, instruksi diatas halaman yang pertama ditampilkan adalah login.

7. Finishing

Sebelum projectnya dijalankan, buka file widget_test.dart pada folder test. Tambahkan komentar // untuk import main dan MyApp. Kodenya ibarat berikut :

//import 'package:login_register_layout/main.dart'; //await tester.pumpWidget(MyApp()); 

Catatan :

Kode tersebut diberikan komentar sebab kita tidak memakai class MyApp, sehingga tidak diharapkan dan supaya dikala dijalankan tidak ada error pemanggilan class MyApp yang tidak ditemukan.

Untuk source code lengkapnya kalian sanggup mempelajarinya di repository github saya. Sekarang coba jalankan di emulator atau hp kalian dan karenanya ibarat berikut :

Tutorial Membuat Form Login dan Register Keren dengan Flutter, kalau teman-teman ada hambatan atau mau berdiskusi sanggup mengisi form komentar dibawah. Untuk latihan menciptakan layout dengan flutter selanjutnya, codingtive ada Tutorial Membuat SplashScreen dengan Flutter. Semoga bermanfaat.

Share this post