Máy tính tiền tip: Tiền tip

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 31 trên 34.

Tiếp theo là tiền boa. Một Slider chọn mức từ 0 đến 30 phần trăm, tăng mỗi lần 5 phần trăm, và ứng dụng hiển thị số tiền tương ứng.

Lưu phần trăm trong trạng thái (state) dưới dạng double, bắt đầu từ 10. Bạn không cần lưu số tiền boa: số tiền này được tính từ hóa đơn và phần trăm, nên hãy tính ở đầu build dưới dạng final:

final double tip = _bill * _tipPercent / 100;

Mỗi lần gọi setState, từ trường nhập hoặc thanh trượt, màn hình sẽ được dựng lại và tip được tính lại với các giá trị mới.

Thử thách

Dễ

Bên dưới hóa đơn, hiển thị Tip: 10% và một Slider từ 0 đến 30 với 6 khoảng chia, bắt đầu ở mức 10.
Bên dưới thanh trượt, hiển thị Tip amount: 4.00 khi hóa đơn là 40, với hai chữ số thập phân.

Tự làm thử

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;

  @override
  Widget build(BuildContext context) {
    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)}'),
          ],
        ),
      ),
    );
  }
}