Máy tính tiền tip: Hóa đơn

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 30 trên 34.

Đã đến lúc vận dụng toàn bộ phần này. Trong năm bài học tiếp theo, bạn sẽ xây dựng ứng dụng tính tiền boa: nhập số tiền hóa đơn, chọn tiền boa, cho biết có bao nhiêu người cùng chia và xem mỗi người phải trả bao nhiêu.

Ứng dụng là một StatefulWidget có Column bên trong Padding. Phần đầu tiên là số tiền hóa đơn: một trường nhập liệu (field) dành cho các số có dấu thập phân, được đọc bằng double.tryParse và lưu trong State dưới dạng double.

Hiển thị lại số tiền hóa đơn bên dưới trường nhập liệu với hai chữ số thập phân để bạn thấy ứng dụng đã đọc đúng. Tiền luôn có hai chữ số thập phân: 42.50, không phải 42.5.

Thử thách

Trung bình

Thay dòng Type the bill to start bằng một TextField có nhãn Bill, có viền và bàn phím số có dấu thập phân.
Lưu hóa đơn trong double _bill = 0;, đọc bằng double.tryParse hoặc dùng 0.
Bên dưới trường nhập, hiển thị Bill: 42.50 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> {
  @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: [
            const Text('Type the bill to start', style: TextStyle(fontSize: 20)),
          ],
        ),
      ),
    );
  }
}