チップ計算機：会計金額

CoddyのFlutterジャーニー「アプリをインタラクティブにする」セクションの一部。レッスン 30/34。

ここでセクション全体の内容を実践してみましょう。これからの5つのレッスンでチップ計算アプリを作ります。請求額を入力し、チップを選び、何人で割り勘するかを指定すると、1人あたりの支払額が表示されます。

このアプリは、Paddingの中にColumnを配置したStatefulWidgetです。最初に扱うのは請求額です。小数点を含む数値用のフィールドを作り、double.tryParseで読み取り、State内でdoubleとして保持します。

フィールドの下に請求額を小数点以下2桁で表示し、アプリが正しく読み取れたことを確認できるようにします。金額は常に小数点以下2桁で表示します。42.50であり、42.5ではありません。

チャレンジ

中級

Type the bill to startという行を、枠線付きで小数点キーのある数字キーボードを表示する、BillというラベルのTextFieldに置き換えます。
請求額はdouble _bill = 0;に保持し、double.tryParseで読み取ります。解析できない場合は0にします。
入力欄の下に、小数点以下2桁で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)),
          ],
        ),
      ),
    );
  }
}