Belajar Dart Flutter : Membuat Widget Textfield dan Menyesuaikan Tampilanya - Karena Belajar

kali ini kita akan belajar membuat widget textfield pada flutter dengan menggunakan Visual Studio Code dengan bahasa pemrograman dart.

Struktur Pada Flutter

Dalam struktur flutter hampir sama dengan bahasa pemrograman lainnya bahwa komponen widget berada di dalam body, appbar adalah judul atau header aplikasi scaffold berfungsi sebagai pemisah antara layout satu dengan lainnya.

Bisa kita lihat contoh kode gambar di atas kode tersebut untuk menjalankan program sederhana hello world yang sesuai struktur flutter yang menghasilkan tampilan seperti gambar dibawah

Jadi dengan keterangan yang dijelaskan diatas kita akan bermain di bagian Appbar dan Body dimana kita di khususkan akan sering bermain di bagian body.

Widget

Widget adalah komponen yang mempermudah kita selaku programmer untuk suatu aplikasi, bila kita bayangkan suatu aplikasi itu adalah sebuah mobil maka komponen pendukung seperti ban, spion, radio pemancar dan lain sebagainya adalah widgetnya, selayaknya mobil komponen-komponen pendukung tidak selalu sama setiap mobil komponen pendukung tergantung dengan fungsi mobil tersebut bila mobil yang berfungsi untuk balapan memerlukan nitro sebagai komponen pendukung sebaliknya mobil yang berfungsi untuk pemakaian sehari-hari tidak memerlukan komponen pendukung seperti nitro, maka sama halnya dengan aplikasi dan widget, tidak semua aplikasi memiliki widget yang sama atau memiliki semua widget yang tersedia sama seperti penjelasan diatas komponen widget tergantung fungsi aplikasi yang akan dibuat.

Widget Textfields

Textfield adalah suatu komponen widget yang sangat familiar dengan kita karena widget ini sangat sering digunakan kedalam aplikasi-aplikasi yang biasa kita gunakan bila teman-teman masih belum tahu tentang textfields , widget ini kerap kita lihat di form data diri , nilai serta form yang biasa gunakan untuk memasukan inputan.

Kode Texfield

Sebagai patokan kita akan mengikuti contoh kode hello world diatas dengan code sebagai berikut

import 'package:flutter/material.dart';

main () => runApp(latihanwidget());

class latihanwidget extends StatelessWidget{

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar:

          AppBar(

            title: Text("Latihan Widget"),

          ),

        body:

          Text("hello world"),

      )

    );

  }

}

Dalam flutter ada dua fungsi textfield yang berbeda yaitu TextField() dan TextFromField() setiap fungsi memliki keunggulannya masing-masing kita akan memakai fungsi TextFornField karena fungsi ini sangat fleksibel kita ubah, dibagian body dengan menambahkan code sebagai berikut

        body:

         TextFormField(),

Maka tampilan aplikasi akan menjadi seperti gambar di bawah

Pada contoh diatas kita dapat lihat widget texfield yang kita gunakan tampak polos dan kurang menarik maka kita akan mempercantik tampilannya.

Menyesuaikan Tampilan Texfield

Lantas Bagaimana mempercantik tampilan textfield? caranya yaitu dengan function decoration.

1. Menambahkan Label

Label pada textfield berfungsi sebagai pemberi tanda pada textfield dan mempermudah pengguna dalam menggunakannya kodenya sebagai berikut

        body:

          TextFormField(

            decoration:

              InputDecoration(

                label: Text("Nilai :")

              ),

          ),

Dengan hasil tampilan sebagai berikut

2. Menambahkan HintText

Sesuai namanya hinttext berfungsi untuk memberi petunjuk pada pengguna terkait dengan textfield yang tersedia kodenya sebagai berikut

        body:

          TextFormField(

            decoration:

              InputDecoration(

                hintText: "silahkan Masukan Nilai"

              ),

          ),

Dan tampilannya sebagai berikut

3. Menambahkan Fungsi censor seperti pada memasukan Password

Kita akan mengunakan function obscure dengan kode

        body:

          TextFormField(

            obscureText: true,

          ),

Serta hasil sebagai berikut

4. Menggabungkan Semuanya

Dan terakhir kita akan menggabungkan contoh-contoh diatas kedalam satu dengan kode

        body:

          TextFormField(

            obscureText: true,

            decoration: InputDecoration(

              labelText: "Password :",

              hintText: "Silahkan Masukan Password"

            ),

          ),

Serta menjadi tampilan seperti gambar dibawah

Dengan Source Code keseluruhan

Source Code:

import 'package:flutter/material.dart';

main () => runApp(latihanwidget());

class latihanwidget extends StatelessWidget{

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar:

          AppBar(

            title: Text("Latihan Widget"),

          ),

        body:

          TextFormField(

            obscureText: true,

            decoration: InputDecoration(

              labelText: "Password :",

              hintText: "Silahkan Masukan Password"

            ),

          ),

      )

    );

  }

}

Sekian yang dapat saya sampaikan terima kasih telah membaca artikel ini bila teman-teman suka dengan konten ini teman-teman bisa mengikuti blog ini dengan mengklik tombol ikuti di bawah dan bila ada saran dan pertanyaan bisa disampaikan di kolom komentar.