Tutorial Flutter Cara Membuat Show Hide Password

Tutorial flutter show hide password
Tutorial flutter show hide password
Codingtive.com - Pada tutorial ini kita akan belajar cara membuat form field password yang dapat menampilkan dan menyembunyikan password. Berikut adalah beberapa hal yang dapat kamu pelajari dari tutorial flutter membuat show hide password :
  1. Menerapkan widget TextFormField
  2. Belajar cara menggunakan state pada StatefulWidget
  3. Menerapkan click / tap listener
Ikuti tutorialnya sampai selesai ya.

Ilustrasi latihan

Menampilkan form field password dengan icon show / hide password yang dapat memberikan aksi menampilkan dan menyembunyikan password. Berikut tampilan aplikasinya :
Flutter toggle show hide password
Flutter toggle show hide password

Membuat project dan memulai latihan

Pertama yang kamu lakukan yaitu membuat project baru, atau kamu dapat menggunakan project sebelumnya yang sudah ada.

Membuat layout
Buka file main.dart pada folder lib, kita akan membuat kode dasarnya seperti berikut :
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "Flutter Password Visibility",
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Password Visibility"),
      ),
      body: Container(
        padding: EdgeInsets.all(24.0),
        child: _buildPasswordField(),
      ),
    );
  }

  Widget _buildPasswordField() {

  }
}
Buat variable baru untuk menampung kondisi password show / hide, tambahkan kodenya didalam class _MyAppState :
bool _isHidePassword = true;
Membuat fungsi toggle password
Untuk menangani ketika terjadi perubahan kondisi dari show ke hide dan sebaliknya, kita akan membuat fungsi untuk mengubah state dari nilai variable _isHidePassword, tambahkan kode berikut dibawahnya :
void _togglePasswordVisibility() {
  setState(() {
    _isHidePassword = !_isHidePassword;
  });
}
Membuat form field password
Tambahkan kode berikut didalam fungsi _buildPasswordField() yang sudah kita buat sebelumnya, sehingga kodenya menjadi seperti berikut :
Widget _buildPasswordField() {
  return TextFormField(
    obscureText: _isHidePassword,
    autofocus: false,
    initialValue: '',
    keyboardType: TextInputType.text,
    decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(8.0)),
      ),
      labelText: 'Password',
      suffixIcon: GestureDetector(
        onTap: () {
          _togglePasswordVisibility();
        },
        child: Icon(
          _isHidePassword ? Icons.visibility_off : Icons.visibility,
          color: _isHidePassword ? Colors.grey : Colors.blue,
        ),
      ),
      isDense: true,
    ),
  );
}

Kode Lengkap

Berikut kode lengkap pada file main.dart seperti berikut :
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "Flutter Password Visibility",
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  bool _isHidePassword = true;

  void _togglePasswordVisibility() {
    setState(() {
      _isHidePassword = !_isHidePassword;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Password Visibility"),
      ),
      body: Container(
        padding: EdgeInsets.all(24.0),
        child: _buildPasswordField(),
      ),
    );
  }

  Widget _buildPasswordField() {
    return TextFormField(
      obscureText: _isHidePassword,
      autofocus: false,
      initialValue: '',
      keyboardType: TextInputType.text,
      decoration: InputDecoration(
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(8.0)),
        ),
        labelText: 'Password',
        suffixIcon: GestureDetector(
          onTap: () {
            _togglePasswordVisibility();
          },
          child: Icon(
            _isHidePassword ? Icons.visibility_off : Icons.visibility,
            color: _isHidePassword ? Colors.grey : Colors.blue,
          ),
        ),
        isDense: true,
      ),
    );
  }
}
Sekarang coba jalankan dengan emulator atau hp, hasilnya seperti berikut :
Flutter show hide password tutorial
Flutter show hide password tutorial

Bedah Kode

Untuk menyembunyikan password menjadi karakter * kamu dapat menggunakan obsecureText pada widget TextFormField, nilainya kita ambil dari variable _isHidePassword sehingga ketika terjadi perubahan state otomatis password dapat ditampilkan dan disembunyikan.

Perhatikan kode berikut :
suffixIcon: GestureDetector(
  onTap: () {
    _togglePasswordVisibility();
  },
  child: Icon(
    _isHidePassword ? Icons.visibility_off : Icons.visibility,
    color: _isHidePassword ? Colors.grey : Colors.blue,
  ),
),
Untuk membuat icon yang berada di sebelah kanan, kamu dapat menggunakan suffixIcon. Contoh diatas kita menampilkan widget Icon yang dibungkus dengan GestureDetector sehingga kita dapat memberikan listener onTap.

Pada onTap, memanggil fungsi _togglePasswordVisibility() yang sudah kita buat sebelumnya untuk mengubah state password.

Github

Untuk kode lengkapnya juga terdapat pada repository github :

Kesimpulan

Untuk membuat show hide password kamu dapat menggunakan widget TextFormField dengan memanfaatkan obsecureText, menambahkan listener yang dapat mengubah state / kondisi dari password apakah show atau hide. Kamu dapat explore lebih banyak lagi untuk terus meningkatkan pemahaman dan belajar kamu.

Pelajari juga artikel berikut untuk terus upgrade :

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Flutter Cara Membuat Show Hide Password"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel