flutter

Membuat Form Register di Flutter

Tujuan:

Saya ingin membuat form register seperti gambar dibawah ini:

 

Pembuatan Kode

Buatlah sebuah file baru dengan nama register.dart dalam folder lib lalu masukkan kode berikut ini:

import ‘package:flutter/material.dart’;
class Register extends StatelessWidget {
  const Register({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Card(
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              children: [
                Container(
                  child: Text(
                    ‘Form Register’,
                    style: TextStyle(
                      fontSize: 24.0, // Set font size to 24 logical pixels
                    ),
                  ),
                  margin: EdgeInsets.only(top: 90),
                ),
                TextField(decoration: InputDecoration(labelText: ‘Full Name’)),
                TextField(decoration: InputDecoration(labelText: ‘Username’)),
                TextField(decoration: InputDecoration(labelText: ‘E-mail’)),
                TextField(decoration: InputDecoration(labelText: ‘No. HP’)),
                TextField(decoration: InputDecoration(labelText: ‘Password’)),
                TextField(
                  decoration: InputDecoration(labelText: ‘Confirm Password’),
                ),
                ElevatedButton(onPressed: () {}, child: Text(“Register”)),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Keterangan:

  • SingleChildScrollView berisi sebuah widget yang bisa discroll
  • Card tampilannya seperti kartu adalah widget yang bisa berisi lebih dari satu widget
  • Padding adalah widget untuk memberikan jarak ke dalam
  • Container adalah sebagai tempat untuk widget lainnya agar posisinya bisa disesuaikan
  • 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

Perubahan kode main.dart

Bukalah file lib/main.dart lalu rubah kode pada fungsi main seperti berikut ini:

void main() {
  runApp(MaterialApp(home: Register()));
}

Jalankan Aplikasi

Tekan menu Run -> Start Debugging atau shortcut tombol F5