Report 1 AppMobile — Input Widgets dan Basic Form

Aplikasi Mobile Semester 5 Putri Balqis Afradinata

I. Tujuan Praktikum

Memahami penggunaan widget TextField pada Flutter.
Memahami penggunaan TextEditingController untuk mengambil input dari pengguna.
Memahami penggunaan widget TextFormField dalam pembuatan form.
Memahami penggunaan Form dan GlobalKey untuk melakukan validasi input.
Menerapkan validator untuk melakukan validasi terhadap input pengguna.
Membuat aplikasi sederhana menggunakan input widget pada Flutter.

II. Dasar Teori

Flutter menyediakan berbagai macam widget yang dapat digunakan untuk membangun antarmuka aplikasi mobile. Salah satu jenis widget yang penting dalam pembuatan aplikasi interaktif adalah widget input yang digunakan untuk menerima data dari pengguna.

TextField merupakan widget yang digunakan untuk menerima input teks dari pengguna. TextField dapat digunakan untuk berbagai kebutuhan seperti memasukkan nama, alamat, maupun data lainnya.

TextEditingController digunakan untuk mengontrol isi dari TextField dan mengambil nilai yang dimasukkan oleh pengguna. Controller juga perlu di-dispose ketika widget sudah tidak digunakan.

Selain TextField, Flutter menyediakan TextFormField yang dapat digunakan bersama dengan widget Form. TextFormField mendukung proses validasi input menggunakan property validator.

GlobalKey<FormState> digunakan untuk mengakses state dari Form. Dengan menggunakan key tersebut, aplikasi dapat menjalankan proses validasi menggunakan method validate() sebelum data diproses.

Pada praktikum ini konsep TextField dan TextFormField kemudian diterapkan untuk membuat form sederhana serta aplikasi kalkulator yang dapat menjalankan operasi kabataku.

III. Langkah-Langkah Praktikum

A. Basic Form TextField

Membuat File form-textfield.dart
Langkah pertama yaitu membuat file Dart baru di dalam folder lib dengan nama form-textfield.dart.
```
lib/form-textfield.dart
                    
```
File tersebut digunakan untuk membuat aplikasi Basic Form menggunakan widget TextField.

Membuat Tampilan Basic Form
Selanjutnya dibuat tampilan awal Basic Form menggunakan MaterialApp, Scaffold, AppBar, StatefulWidget, Padding, Column, TextField, dan ElevatedButton.

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> {
  @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,
          ),
          const TextField(
            decoration: InputDecoration(
              labelText: 'Nama Lengkap',
              hintText: 'Misalnya masnoer',
              border: OutlineInputBorder(),
              prefixIcon: Icon(Icons.person)),
          ),
          const SizedBox(
            height: 20,
          ),
          ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.amber,
              foregroundColor: Colors.black),
            child: const Text('Tampilkan mama'))
        ],
      ),
    );
  }
}

Pada tahap awal, TextField digunakan untuk menerima input nama lengkap pengguna.

Menambahkan TextEditingController
Pada class _MyFormState ditambahkan TextEditingController untuk mengambil inputan dari pengguna.
```
TextEditingController _textEditingController = TextEditingController();

@override
void dispose() {
  _textEditingController.dispose();
  super.dispose();
}
                    
```
TextEditingController berfungsi untuk mengambil inputan yang diberikan oleh pengguna pada TextField.
Menambahkan Controller, keyboardType, dan onChanged
Property tambahan kemudian diberikan pada widget TextField.
```
TextField(
  decoration: const InputDecoration(
    labelText: 'Nama Lengkap',
    hintText: 'Misalnya masnoer',
    border: OutlineInputBorder(),
    prefixIcon: Icon(Icons.person)),
  controller: _textEditingController,
  keyboardType: TextInputType.text,
  onChanged: (text) {
    print('Sedang mengetik teks : ,$text');
  },
),
                    
```
Property controller digunakan untuk menghubungkan TextField dengan TextEditingController. Property keyboardType menentukan jenis input, sedangkan onChanged digunakan untuk mengetahui perubahan teks ketika pengguna sedang mengetik.
Menambahkan Fungsi pada ElevatedButton
Selanjutnya property onPressed pada ElevatedButton diubah untuk mengambil input pengguna dan menampilkannya menggunakan SnackBar.
```
onPressed: () {
  String inputText = _textEditingController.text;
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('Nama anda adalah , $inputText'))
  );
},
                    
```
Nilai yang dimasukkan pengguna diambil melalui _textEditingController.text. Setelah tombol ditekan, nilai tersebut ditampilkan menggunakan SnackBar.
Menjalankan Program TextField
Setelah seluruh kode selesai dibuat, program dijalankan menggunakan device Chrome.
```
flutter run -d chrome -t lib/form-textfield.dart
                    
```
Setelah program berhasil dijalankan, pengguna dapat memasukkan nama pada TextField kemudian menekan tombol Tampilkan mama untuk menampilkan input melalui SnackBar.

B. Basic Form TextFormField

Membuat File form-textformfield.dart
File baru dibuat di dalam folder lib dengan nama form-textformfield.dart.
```
lib/form-textformfield.dart
                    
```
File ini digunakan untuk membuat Basic Form menggunakan widget TextFormField.

Membuat Tampilan Basic Form TextFormField
Pada tahap awal dibuat dua buah TextFormField untuk menerima input nama dan email serta satu tombol Submit.

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<MyFormText> createState() => _MyFormTextState();
}

class _MyFormTextState extends State<MyFormText> {
  @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')))
      ],
    );
  }
}

Dua TextFormField digunakan untuk menerima data nama dan email dari pengguna.

Menambahkan GlobalKey dan Controller
Pada class _MyFormTextState ditambahkan GlobalKey untuk Form serta controller untuk masing-masing input.

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'))
    );
  }
}

GlobalKey digunakan untuk mengakses state dari Form. Controller digunakan untuk mengambil nilai dari TextFormField, sedangkan method _submitForm() digunakan ketika tombol Submit ditekan.

Membungkus Tampilan dengan Form
Widget tampilan kemudian dibungkus menggunakan widget Form dan diberikan property key: _formKey.
```
return Form(
  key: _formKey,
  child: Padding(
    padding: const EdgeInsets.all(20.0),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
                    
```
Form digunakan sebagai wadah untuk TextFormField sehingga proses validasi dapat dilakukan menggunakan FormState.
Menambahkan Validasi pada Nama
TextFormField nama diberikan controller dan validator untuk memastikan input nama tidak kosong.
```
TextFormField(
  controller: _nameController,
  decoration: const InputDecoration(
    labelText: "Nama : ", border: OutlineInputBorder()),
  validator: (value){
    if (value == null || value.isEmpty) {
      return 'Masukkan nama anda';
    }
    return null;
  },
),
                    
```
Jika field nama kosong, validator akan memberikan pesan Masukkan nama anda. Jika input valid, validator mengembalikan nilai null.

Menambahkan Validasi pada Email
TextFormField email kemudian diberikan controller dan validator untuk memastikan email tidak kosong serta memiliki karakter @.

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;
  },
),

Jika email kosong maka akan muncul pesan Masukkan email anda. Jika email tidak mengandung karakter @ maka akan muncul pesan Email tidak valid.

Menambahkan _submitForm pada ElevatedButton
Method _submitForm kemudian dipanggil melalui property onPressed pada ElevatedButton.
```
SizedBox(
  width: double.infinity,
  child: ElevatedButton(
    onPressed: _submitForm,
    child: const Text('Submit')))
                    
```
Ketika tombol Submit ditekan, Form akan menjalankan proses validasi. Jika seluruh input valid, nama dan email akan ditampilkan menggunakan SnackBar.
Menjalankan Program TextFormField
Setelah seluruh perubahan selesai, aplikasi dijalankan menggunakan Chrome.
```
flutter run -d chrome -t lib/form-textformfield.dart
                    
```
Form dapat diuji dengan mengosongkan input, memasukkan email yang tidak valid, serta memasukkan nama dan email yang valid.

IV. Tugas Praktikum

Pada tugas praktikum ini digunakan ketentuan Kelas A. Tugas yang diberikan adalah membuat aplikasi kalkulator yang dapat menjalankan operasi kabataku.

Operasi kabataku yang digunakan terdiri dari perkalian, pembagian, penjumlahan, dan pengurangan. Aplikasi menggunakan dua buah widget input untuk menerima nilai yang akan dihitung.

Membuat File kalkulator.dart
File baru dibuat di dalam folder lib dengan nama kalkulator.dart.
```
lib/kalkulator.dart
                    
```
Membuat Dua Widget Input
Dua TextField digunakan untuk menerima angka pertama dan angka kedua.
```
final _angka1Controller = TextEditingController();
final _angka2Controller = TextEditingController();
                    
```
Kedua controller digunakan untuk mengambil nilai angka yang dimasukkan pengguna.

Membuat Method Perhitungan
Method hitung() digunakan untuk menjalankan operasi kabataku berdasarkan tombol yang dipilih.

void hitung(String operasi) {
  double angka1 = double.tryParse(_angka1Controller.text) ?? 0;
  double angka2 = double.tryParse(_angka2Controller.text) ?? 0;

  double hasilPerhitungan = 0;

  if (operasi == 'kali') {
    hasilPerhitungan = angka1 * angka2;
  } else if (operasi == 'bagi') {
    if (angka2 == 0) {
      setState(() {
        hasil = 'Tidak dapat dibagi 0';
      });
      return;
    }
    hasilPerhitungan = angka1 / angka2;
  } else if (operasi == 'tambah') {
    hasilPerhitungan = angka1 + angka2;
  } else if (operasi == 'kurang') {
    hasilPerhitungan = angka1 - angka2;
  }

  setState(() {
    hasil = hasilPerhitungan.toString();
  });
}

Method tersebut menerima parameter operasi untuk menentukan jenis perhitungan yang dilakukan. Hasil perhitungan kemudian disimpan dan ditampilkan pada aplikasi.

Membuat Tombol Operasi Kabataku
Empat ElevatedButton digunakan untuk menjalankan operasi Kali, Bagi, Tambah, dan Kurang.

ElevatedButton(
  onPressed: () {
    hitung('kali');
  },
  child: const Text('Kali'),
),

ElevatedButton(
  onPressed: () {
    hitung('bagi');
  },
  child: const Text('Bagi'),
),

ElevatedButton(
  onPressed: () {
    hitung('tambah');
  },
  child: const Text('Tambah'),
),

ElevatedButton(
  onPressed: () {
    hitung('kurang');
  },
  child: const Text('Kurang'),
),

Setiap tombol memanggil method hitung() dengan parameter operasi yang sesuai.

Menampilkan Hasil Perhitungan
Widget Text digunakan untuk menampilkan hasil operasi yang telah dilakukan.
```
Text(
  'Hasil: $hasil',
  style: const TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
  ),
),
                    
```
Nilai hasil akan berubah setiap kali pengguna menekan salah satu tombol operasi.
Menjalankan Aplikasi Kalkulator
Aplikasi kalkulator dijalankan menggunakan Chrome.
```
flutter run -d chrome -t lib/kalkulator.dart
                    
```
Setelah aplikasi dijalankan, pengguna dapat memasukkan dua angka kemudian memilih operasi Kali, Bagi, Tambah, atau Kurang.
Hasil Tugas Praktikum
Aplikasi berhasil menjalankan empat operasi kabataku dan menampilkan hasil perhitungan menggunakan widget Text.

V. Hasil dan Pembahasan

Berdasarkan praktikum yang telah dilakukan, widget TextField berhasil digunakan untuk menerima input teks dari pengguna. TextEditingController digunakan untuk mengambil nilai yang dimasukkan melalui TextField.

Pada penggunaan TextFormField, form berhasil dilengkapi dengan proses validasi menggunakan GlobalKey<FormState> dan validator. Validasi dapat digunakan untuk memastikan bahwa input nama dan email telah memenuhi kondisi yang ditentukan.

Pada tugas Kelas A, konsep input widget kemudian diterapkan pada aplikasi kalkulator. Dua input digunakan untuk menerima angka, sedangkan ElevatedButton digunakan untuk menjalankan operasi perkalian, pembagian, penjumlahan, dan pengurangan.

Hasil operasi kemudian ditampilkan menggunakan widget Text sehingga pengguna dapat melihat hasil perhitungan secara langsung pada aplikasi.

VI. Kesimpulan

Dari praktikum yang telah dilakukan dapat disimpulkan bahwa Flutter menyediakan berbagai widget input seperti TextField dan TextFormField yang dapat digunakan untuk menerima data dari pengguna.

TextEditingController dapat digunakan untuk mengambil dan mengontrol nilai input, sedangkan TextFormField dapat digunakan bersama Form dan validator untuk melakukan validasi terhadap data yang dimasukkan.

Pada tugas praktikum Kelas A, konsep tersebut berhasil diterapkan dalam pembuatan aplikasi kalkulator kabataku yang menggunakan dua input, ElevatedButton untuk menjalankan operasi, serta Text untuk menampilkan hasil perhitungan.

🔗 Lihat Repository GitHub