Project Aplikasi Expense Tracker – Part 4

Pada modul ini kita akan membahas styling pada file form_expense.dart. Seperti keyboard setting dan validasi input.

Untuk melakukan validasi, kita buat fungsi baru dalam class FormExpense. Memeriksa jika title kosong dengan fungsi isEmpty dan memeriksa amount <= 0, maka perintah addExpneseH tidak dipanggil.

void submitForm() {
    final inpTitle = titleCtrl.text;
    final inpAmount = double.parse(amountCtrl.text);

    if (inpAmount <= 0 || inpTitle.isEmpty) {
      return;
    }

    addExpenseH(titleCtrl.text, double.parse(amountCtrl.text));
  }

Sementara untuk setting keyboard, agar input amount menampilkan keyboard numeric, dapat diatur melalui property keyboardType.

TextField(
  decoration: InputDecoration(labelText: 'Amount'),
  controller: amountCtrl,
  keyboardType: TextInputType.number,

import 'package:flutter/material.dart';

class FormExpense extends StatefulWidget {
  final Function addExpenseH;

  FormExpense(this.addExpenseH);

  @override
  _FormExpenseState createState() => _FormExpenseState();
}

class _FormExpenseState extends State<FormExpense> {
  final titleCtrl = TextEditingController();

  final amountCtrl = TextEditingController();

  void submitForm() {
    final inpTitle = titleCtrl.text;
    final inpAmount = double.parse(amountCtrl.text);

    if (inpAmount <= 0 || inpTitle.isEmpty) {
      return;
    }

    widget.addExpenseH(titleCtrl.text, double.parse(amountCtrl.text));
    Navigator.of(context).pop();
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Container(
        padding: EdgeInsets.all(7),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            TextField(
              decoration: InputDecoration(labelText: 'Title'),
              controller: titleCtrl,
            ),
            TextField(
              decoration: InputDecoration(labelText: 'Amount'),
              controller: amountCtrl,
              keyboardType: TextInputType.number,
            ),
            FlatButton(
              onPressed: submitForm,
              child: Text('Add Expense'),
              textColor: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}