Input Widgets dan Basic Form

GitHub

1. Tujuan

Tujuan praktikum ini yaitu pengguna mampu membuat membuat basic form untuk menerima inputan dari keyboard dan mengelola inputan :

• Membuat beberapa input widgets
• Membuat dan mengontrol inputan dari user
• Menambahkan informasi error ketika memasukkan input yang tidak sesuai

2. Alat yang Digunakan

• IDE (Visual Studio Code)
• Flutter & Dart

3. Teori

Basic Form

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. Form ini akan memberikan tampilan inputan kemudian inputan akan diperiksa apakah sudah sesuai dengan aturan atau format yang ditetapkan, selanjtunya data inputan akan diambil nilainya setelah proses pengecekan selesai dilakukan.

Text Field

TextField adalah widget yang digunakan untuk memasukkan text oleh pengguna, widget ini biasanya digunakan untuk membuat form inputan seperti form login, pencarian dll. fiturnya : Menerima input dari keyboard, Memiliki property yang lengkap style, decoration, dan jenis inputan dan Dapat mengelola teks menggunakan TextEditingController

Text Form Field

TextFormField adalah widget versi lengkap dari TextField yang secara otomatis terintegrasi dengan logika validasi dan manajemen state dari sebuah form Fitur TextFormField antara lain : Menerima input teks dari keyboard, Memiliki properti validator yang berfungsi untuk memeriksa apakah input sudah sesuai dengan aturan yang ditentukan, Menampilkan pesan error secara otomatis di bawah field jika validasi gagal, dan Berinteraksi dengan FormState untuk melakukan validasi secara kolektif dengan validate() method.

LANGKAH LANGKAH

A. Basic Form TextField

Buat file dart baru dengan nama form-textfield.dart di dalam folder lib
Buat sebuah tampilan basic form dengan menggunakan widget TextField untuk inputan dan ElevatedButton sebagai tombol event listener

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<MyForm> createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  String _inputText = '';
  final _textEditingController = TextEditingController();

  @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(
            decoration: const InputDecoration(
                labelText: 'Nama Lengkap',
                hintText: 'masukan nama lengkap anda',
                border: OutlineInputBorder(),
                prefixIcon: Icon(Icons.person)),
            controller: _textEditingController,
            keyboardType: TextInputType.text,
            onChanged: (text) {
              print('Sedang mengetik teks : ,$text');
            },
          ),
          const SizedBox(
            height: 20,
          ),
          ElevatedButton(
            onPressed: () {
              String inputText = _textEditingController.text;
              ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Nama anda adalah: $inputText')));
              setState(() {
                _inputText = _textEditingController.text;
              });
            },
            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),
          ),
        ],
      ),
    );
  }
}

• MyFormState: membuat variabel TextEditingController yang berguna untuk mengambil inputan dari pengguna, lalu membuat variabel yang membersihkan teks inputan
• TextField: menambahkan controller properti jenis inputan agar bisa di lakukan aksi input dari pengguna
• ElevatedButton: pada bagian onPressed ditambahkan program agar tombol bisa ditekan dan menampilkan inputan pengguna dari textfield ke dalam widget snackbar (yang biasanya berada di paling bawah halaman), bisa juga menampilkan inputan ke dalam suatu area teks

ketika memasukkan nama misalnya : Devia Puji Astuti

B. Basic Form TextFormField

Buat file dart baru dengan nama form-textformfield.dart di dalam folder libBuat form inputan pengguna menggunakan widget TextFormField dan ElevatedButton beserta handling jika inputan tidak sesuai

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<FormState>();
  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 Form(
      key: _formKey,
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            const SizedBox(
              height: 10,
            ),
            TextFormField(
              controller: _nameController,
              decoration: const InputDecoration(
                  labelText: "Nama : ", border: OutlineInputBorder()),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Masukkan nama anda';
                }
                return null;
              },
            ),
            const SizedBox(
              height: 10,
            ),
            TextFormField(
              controller: _emailController,
              decoration: const InputDecoration(
                  labelText: "Email : ", border: OutlineInputBorder()),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Masukkan email anda ';
                }
                if (!value.contains('@')) {
                  return 'Email tidak valid';
                }
                return null;
              },
            ),
            const SizedBox(
              height: 10,
            ),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                  onPressed: _submitForm, child: const Text('Submit')),
            )
          ],
        ),
      ),
    );
  }
}

• _MyFormTextState: membuat controller untuk textformfield bagian nama dan email, lalu membuat method yang menghapus inputan nama dan email dan membuat method yang berjalan ketika ElevatedButton di tekan
• TextFormField: membuat handling pada textformfield berdasarkan inputan yang diberikan pengguna kosong ataupun tidak sesuai dengan format biasanya
• ElevatedButton: pada bagian onPressed ditambahkan method _submitform agar bisa menampilkan output Validasi Berhasil berupa Snackbar

dalam pengisiannya Ketika ElevatedButton ditekan dan TextField kosong dan ketika ElevatedButton ditekan dan TextField salah format maka nanti hasilnya akan merah

ketika diisi dengan format yang benar maka outputnya seperti dibawah ini.