Mobile Application Report 3

Basic Form TextField

Basic Form merupakan widget yang berfungsi sebagai inputan nilai seperti TextField, TextFormField, CheckBox, Switch, Dropdown, Radio, Dialog, DatePicker, BottomSheet, Snackbar dan lain-lain. Basic Form digunakan untuk validasi dan mengelola inputan dari berbagai field.

Untuk Membuat Form TextField, . Buat file dart baru dengan nama form-textfield didalam folder lib, lalu Buat tampilan basic form dengan menggunakan Widget TextField untuk inputan, ElevatedButton untuk memberikan event listener. Buat tampilan menggunakan kode program berikut :

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Basic Form')),
        body: const MyForm(),
      ),
    );
  }
}

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

  @override
  State createState() => _MyFormState();
}

class _MyFormState extends State {
  TextEditingController _textEditingController = TextEditingController();
  String inputText = '';
  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('Masukkan nama anda :'),
          const SizedBox(height: 10),
          TextField(
            controller: _textEditingController,
            decoration: InputDecoration(
              labelText: 'Nama Lengkap',
              hintText: 'Misalnya masnoer',
              border: OutlineInputBorder(),
              prefixIcon: Icon(Icons.person),
            ),
            keyboardType: TextInputType.text,
            onChanged: (text) {
              print('Sedang mengetik teks: $text');
            },
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              setState(() {
                inputText = _textEditingController.text;
              });
              inputText = _textEditingController.text;
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Nama anda adalah , $inputText')),
              );
            },
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.amber,
              foregroundColor: Colors.black,
            ),
            child: const Text('Tampilkan nama'),
          ),
          const SizedBox(height: 20),
          Text('Nama Anda : $inputText', 
          style: const TextStyle(fontSize: 20)),
        ],
      ),
    );
  }
}

Dan pada code diatas, juga ditambahkan Method setState untuk menampilkan hasil inputan. sehingga hasilnya seperti gambar dibawah ini:

TextFormField

TextFormField adalah widget versi lengkap dari TextField yang secara otomatis terintegrasi dengan logika validasi dan manajemen state dari sebuah form

Untuk membuatnya, buat file baru dengan nama form-textformfield.dart dan tambahkan code program berikut ini :

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Basic Form TextFormField")),
        body: const MyFormText(),
      ),
    );
  }
}

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

  @override
  State createState() => _MyFormTextState();
}

class _MyFormTextState extends State {
  final _formKey = GlobalKey();

  final _nameController = TextEditingController();
  final _emailController = TextEditingController();

  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    super.dispose();
  }

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      String name = _nameController.text;
      String email = _emailController.text;

      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Validasi $name, $email Berhasil')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const SizedBox(height: 10),
        TextFormField(
          decoration: const InputDecoration(
            labelText: "Nama : ",
            border: OutlineInputBorder(),
          ),
        ),
        const SizedBox(height: 10),
        TextFormField(
          decoration: const InputDecoration(
            labelText: "Email: ",
            border: OutlineInputBorder(),
          ),
        ),
        const SizedBox(height: 10),
        SizedBox(
          width: double.infinity,
          child: ElevatedButton(onPressed: () {}, child: const Text('Submit')),
        ),
      ],
    );
  }
}

Dan hasilnya akan seperi ini :

Penjelasan Code :

Kode di atas adalah sebuah aplikasi Flutter sederhana yang menampilkan form dengan dua input, yaitu nama dan email, serta sebuah tombol submit. Program diawali dengan fungsi main() yang menjalankan widget MyApp. Di dalam MyApp, digunakan MaterialApp dan Scaffold untuk membangun tampilan dasar aplikasi, dengan AppBar berjudul "Basic Form TextFormField" dan body berupa widget MyFormText. MyFormText adalah sebuah StatefulWidget karena form memerlukan state untuk menyimpan data input. Pada kelas _MyFormTextState, dibuat sebuah GlobalKey untuk mengelola validasi form, serta dua buah TextEditingController untuk menangani input teks dari pengguna. Metode dispose() dipanggil untuk membersihkan controller ketika widget tidak lagi digunakan agar tidak terjadi kebocoran memori. Ada juga fungsi _submitForm() yang nantinya berfungsi memvalidasi form; jika valid, akan menampilkan pesan SnackBar dengan data nama dan email yang sudah diisi. Namun, pada build() method, widget Column hanya berisi TextFormField untuk input nama dan email, lalu tombol ElevatedButton untuk submit. Saat ini, tombol submit belum memanggil fungsi _submitForm() dan kedua TextFormField juga belum terhubung ke controller maupun validator, sehingga data input belum bisa divalidasi. Dengan kata lain, kode ini sudah menyiapkan struktur dasar form, tetapi logika validasi dan pemanggilan fungsi submit belum diimplementasikan sepenuhnya.

Tugas

Membuat Aplikasi Kalkulator

Jadi, Aplikasi dimulai dari main() yang menjalankan Kabataku, lalu menampilkan MaterialApp dengan Scaffold berisi AppBar dan body MyCalc. Widget MyCalc dibuat StatefulWidget karena harus menyimpan input angka dan hasil perhitungan. Di dalam state _MyCalcState, terdapat dua TextEditingController untuk menangkap input angka pertama dan angka kedua, serta variabel result untuk menyimpan hasil operasi. Fungsi _calculate() menerima operator (+, −, ×, ÷), mengubah input teks menjadi angka dengan double.tryParse, lalu menghitung sesuai operator dan memperbarui state. Pada tampilan, terdapat dua TextField masing-masing untuk angka pertama dan angka kedua dengan dekorasi label, hint, dan border. Setelah itu, disediakan empat tombol ElevatedButton untuk operasi tambah, kurang, kali, dan bagi, yang masing-masing memanggil fungsi _calculate(). Terakhir, hasil perhitungan ditampilkan dalam sebuah Text di bawah tombol. Dengan struktur ini, kode mencakup alur lengkap mulai dari input, pemilihan operasi, hingga menampilkan hasil.