Hello people spirit of learning!

Dalam melakukan sign up / sign in, pastinya kita harus membuat suatu kondisi yang cukup panjang. Yang dimana jika tidak menggunakan @test.com atau semacamnya, maka kondisinya harus seperti bagaimana dan seterusnya akan seperti apa. Dalam flutter, terdapat package yang bernama Email Validator. Email validator fungsinya mengecheck apakah yang kita input itu berupa email atau bukan. Disini kita langsung saja masuk ke dalam tutorialnya ya.

1. Kunjungi Pub.dev

Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini.

2. Cari keyword Email Validator

Langkah kedua adalah ketik keyword email validator. Pilih yang paling atas.

3. Install Package

Langkah ke 3 menginstall package yang ingin kita pakai. Ada 2 cara untuk menginstallnya, tinggal pilih mau yang mana cara menginstallnya. Bisa baca artikelnya disini.

Jika sudah menginstallnya, Maka kalian bisa mencoba packagenya. Untuk cara menggunakannya, bisa dilihat pada bagian Readme atau example package.

4. Implementasi Package

import 'package:email_validator/email_validator.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isEmailValid = true;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
            body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: Container(
                  width: 325,
                  height: 65,
                  child: TextFormField(
                    style: TextStyle(
                        color: isEmailValid ? Colors.black : Colors.red),
                    onChanged: (value) {
                      print(value);
                      var isValid = EmailValidator.validate(value);
                      print(isValid);
                      if (isValid) {
                        setState(() {
                          isEmailValid = true;
                        });
                      } else {
                        setState(() {
                          isEmailValid = false;
                        });
                      }
                    },
                    decoration: InputDecoration(
                        hintText: "Email",
                        border: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.blue))),
                  )),
            )
          ],
        )),
      ),
    );
  }
}

State yang kita gunakan disini adalah statefulWidget. Kenapa ? Dengan menggunakan stateful data yang akan kita gunakan nantinya bersifat dinamis.

Setelah itu kita membuat textformFieldnya dengan widget TextFormField, Dan mengatur ukurannya kita bisa menggunakan container. Selanjutnya kita styling textformfieldnya dengan menggunakan InputDecoration.

Kita akan menggunakan Validasi email pada properti OnChange. properti ini fungsinya bila apa yang kita ketik dalam formfield maka akan terjadi suatu penkondisian yang kita buat. pada OnChange kita masukkan parameter value, dan Membuat variabel khusus untuk mengecheck validasi email menggunakan package EmailValidator dan getter validate diisi dengan parameter value.

Setelah itu buat suatu penkondisian jika Validasi email nya benar, Maka setState pada isEmailValid kita jadikan true, Jika tidak maka setState pada isEmailValid kita jadikan false. Begitupun pada warna textnya juga kita buat penkondisian pada properti style. Jika validasi email benar maka warna textnya akan menjadi hitam, Sedangkan validasi email salah maka warna textnya menjadi merah.

Maka hasilnya akan seperti ini.

Terima kasih dan semoga bermanfaat!