Kalkulator Tip: Atur Ulang

Termasuk bagian Membuat Aplikasi Interaktif dalam perjalanan Flutter di Coddy. Pelajaran 34 dari 34.

Sentuhan terakhir adalah tombol Reset yang memulai dari awal: kolom kosong, tip 10%, 1 orang.

Angka-angka tersebut berada di State, jadi setState dapat mengembalikannya. Kolomnya adalah bagian yang rumit: kolom itu menyimpan teksnya sendiri, dan mengatur _bill ke 0 tidak akan mengosongkannya. Kamu akan melihat 40 di kolom sementara aplikasi menggunakan 0. Untuk mengosongkannya, kolom memerlukan controller, seperti dalam Baca Kolom dengan Controller:

final TextEditingController _billController = TextEditingController();

void _reset() {
  _billController.clear();
  setState(() {
    _bill = 0;
    // serta jumlah tip dan orang
  });
}

Kolom tetap menggunakan onChanged: controller hanya diperlukan agar _reset dapat mengosongkannya. Ingat untuk membuangnya.

Tantangan

Mudah

Beri kolom itu TextEditingController bernama _billController, lalu panggil dispose untuk controller tersebut.
Di bagian bawah, tambahkan TextButton berlabel Reset yang mengosongkan kolom dan mengatur kembali tagihan ke 0, tip ke 10, dan jumlah orang ke 1.

Coba sendiri

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(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double _bill = 0;
  double _tipPercent = 10;
  int _people = 1;

  @override
  Widget build(BuildContext context) {
    final double tip = _bill * _tipPercent / 100;
    final double each = (_bill + tip) / _people;
    return Scaffold(
      appBar: AppBar(title: const Text('Tip Calculator')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              keyboardType: const TextInputType.numberWithOptions(decimal: true),
              decoration: const InputDecoration(
                labelText: 'Bill',
                border: OutlineInputBorder(),
              ),
              onChanged: (String value) {
                setState(() {
                  _bill = double.tryParse(value) ?? 0;
                });
              },
            ),
            const SizedBox(height: 8),
            Text('Bill: ${_bill.toStringAsFixed(2)}'),
            const SizedBox(height: 24),
            Text('Tip: ${_tipPercent.round()}%', style: const TextStyle(fontSize: 20)),
            Slider(
              value: _tipPercent,
              min: 0,
              max: 30,
              divisions: 6,
              onChanged: (double value) {
                setState(() {
                  _tipPercent = value;
                });
              },
            ),
            Text('Tip amount: ${tip.toStringAsFixed(2)}'),
            const SizedBox(height: 24),
            Row(
              children: [
                Text('People: $_people', style: const TextStyle(fontSize: 20)),
                const SizedBox(width: 16),
                IconButton(
                  icon: const Icon(Icons.remove),
                  onPressed: _people > 1
                      ? () {
                          setState(() {
                            _people--;
                          });
                        }
                      : null,
                ),
                IconButton(
                  icon: const Icon(Icons.add),
                  onPressed: () {
                    setState(() {
                      _people++;
                    });
                  },
                ),
              ],
            ),
            const SizedBox(height: 24),
            Text(
              'Each person pays \$${each.toStringAsFixed(2)}',
              style: const TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
    );
  }
}