Tutorial Membuat Form Login dan Register Keren dengan Flutter

Tutorial Membuat Form Login dan Register dengan Flutter
Tutorial Membuat Form Login dan Register dengan Flutter
Codingtive.com - Form login dan register merupakan komponen yang penting dalam pembuatan suatu aplikasi yang membutuhkan akses pengguna. Pada tutorial ini kita akan belajar membuat halaman form login dan register keren dan menarik menggunakan flutter. Codingtive menyediakan tutorial flutter bahasa indonesia untuk pemula sampai mahir.

Jika sebelumnya kalian belum pernah mencoba membuat layout dengan Flutter, kalian dapat 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 sampai proses sinkronisasi selesai.

2. Menyiapkan assets

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

Selanjutnya registrasi gambar yang sudah ditambahkan dengan membuka file pubspec.yaml, cari kata assets, hapus komentar dan tambahkan kode berikut :
assets:
  - assets/images/

3. Menyiapkan assets warna

Untuk memudahkan penggunaan warna, buat file baru pada folder lib dan beri nama constants. File ini nantinya digunakan untuk color palette yang akan dipanggil pada halaman login dan register. Tulis kodenya seperti 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 baru dengan nama screens dan buat file baru didalamnya dengan nama login_view.dart. Folder screens digunakan untuk halaman supaya file didalam folder lib lebih rapi. Ketik kode 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 bagian import dan pemanggilan class halaman register masih error karena kita belum membuatnya, biarkan terlebih dahulu dan ikuti langkah berikutnya.

5. Membuat halaman register

Buat file baru pada folder lib > screens dengan nama register_view.dart, dan tambahkan kodenya seperti 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 digunakan untuk berpindah halaman, kita akan menghubungkan halaman login dan register. Ada beberapa cara routing dan navigasi pada Flutter, untuk cara yang paling basic dan mudah kalian dapat mempelajarinya di Tutorial Flutter Cara Mudah Berpindah Halaman. 
Buka file main.dart pada folder lib, dan ubah kodenya menjadi seperti 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 digunakan untuk route yang pertama kali ditampilkan pada aplikasi, kode diatas halaman yang pertama ditampilkan yaitu login.

7. Finishing

Sebelum projectnya dijalankan, buka file widget_test.dart pada folder test. Tambahkan komentar // untuk import main dan MyApp. Kodenya seperti berikut :
//import 'package:login_register_layout/main.dart';
//await tester.pumpWidget(MyApp());
Catatan :
Kode tersebut diberikan komentar karena kita tidak menggunakan class MyApp, sehingga tidak diperlukan dan supaya ketika dijalankan tidak ada error pemanggilan class MyApp yang tidak ditemukan.
Untuk source code lengkapnya kalian dapat mempelajarinya di repository github saya. Sekarang coba jalankan di emulator atau hp kalian dan hasilnya seperti berikut :

tutorial membuat form register keren dengan flutter
Demikian Tutorial Membuat Form Login dan Register Keren dengan Flutter, jika teman-teman ada kendala atau mau berdiskusi dapat mengisi form komentar dibawah. Untuk latihan membuat layout dengan flutter selanjutnya, codingtive ada Tutorial Membuat SplashScreen dengan Flutter. Semoga bermanfaat.

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Membuat Form Login dan Register Keren dengan Flutter"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel