flutter

Membuat Form Login di Flutter

Tujuan:

Saya ingin membuat form login seperti gambar dibawah ini:

 

Pembuatan Kode

Buatlah kode berikut ini:

return const MaterialApp(
home: Scaffold(
       body: Center(
          child: Card(
            child: Column(
              children: [
                Text(‘Login Form’),
                TextField(decoration: InputDecoration(labelText: ‘Username’)),
                TextField(
                  obscureText: true,
                  decoration: InputDecoration(labelText: ‘Password’),
                ),
                ElevatedButton(onPressed: ( ){ }, child: Text(“Login”)),
              ],
            ),
          ),
        ),
      ),
);

Keterangan:

  • Card tampilannya seperti kartu adalah widget yang bisa berisi lebih dari satu widget
  • Text adalah widget untuk menampilkan teks
  • TextField adalah widget untuk input teks, properti obscureText digunakan untuk menyembunyikan teks
  • ElevatedButton ini adalah tombol dengan warna background berbeda jika ditekan dan tidak ditekan

Jalankan Aplikasi

Tekan menu Run -> Start Debugging atau shortcut tombol F5