小费计算器：账单

本课属于 Coddy Flutter 学习旅程的“让应用具有交互性”单元。第 30 课，共 34 课。

现在开始运用整个单元所学的内容。接下来的 5 节课中，你将制作一个小费计算器：输入账单金额，选择小费比例，说明由多少人分摊，然后查看每个人要付多少钱。

这个应用是一个 StatefulWidget，里面有一个 Column，而 Column 位于 Padding 中。第一部分是账单金额：使用一个可以输入小数的数字输入框，通过 double.tryParse 读取，并在 State 中保存为 double。

在输入框下方以两位小数显示账单金额，这样你就能确认应用是否正确读取了金额。金额始终保留两位小数：42.50，而不是 42.5。

挑战

中等

将 Type the bill to start 这一行替换为带边框的 TextField，标签为 Bill，并使用带小数点的数字键盘。
将账单金额保存在 double _bill = 0; 中，使用 double.tryParse 读取，解析失败时使用 0。
在输入框下方显示 Bill: 42.50，保留两位小数。

亲手试试

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)),
          ],
        ),
      ),
    );
  }
}