Kalkulator Tip: Orang

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

Tagihan sering dibagi. Tambahkan baris dengan jumlah orang dan dua tombol ikon, minus dan plus, seperti penghitung yang kamu buat di Naik Turun Penghitung.

Selalu ada setidaknya satu orang yang membayar, jadi tombol minus menjadi abu-abu saat jumlahnya 1. IconButton menjadi abu-abu dengan cara yang sama seperti tombol lain, menggunakan onPressed: null. Jika fungsinya singkat, kamu bisa menulisnya langsung di dalam ? ::

onPressed: _people > 1
    ? () {
        setState(() {
          _people--;
        });
      }
    : null,

SizedBox(width: 16) di baris itu menjaga jarak antara tombol dan teks.

Tantangan

Mudah

Pertahankan jumlah orang di int _people = 1;
Di bawah jumlah tip, tambahkan Row dengan People: 1, satu IconButton dengan Icons.remove dan satu lagi dengan Icons.add.
Tombol plus menambah satu orang. Tombol minus mengurangi satu orang dan berwarna abu-abu saat jumlahnya 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;

  @override
  Widget build(BuildContext context) {
    final double tip = _bill * _tipPercent / 100;
    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)}'),
          ],
        ),
      ),
    );
  }
}