Tip Calculator: The Bill

Part of the Making It Interactive section of Coddy's Flutter journey. Lesson 30 of 34.

Time to put the whole section to work. Over the next five lessons you build a tip calculator: type the bill, pick a tip, say how many people share it, and see what each one pays.

The app is a StatefulWidget with a Column inside a Padding. The first part is the bill: a field for numbers with a decimal point, read with double.tryParse, and kept in the State as a double.

Show the bill back under the field with two decimals, so you can see the app read it right. Money always has two: 42.50, not 42.5.

Challenge

Medium

Replace the line Type the bill to start with a TextField labelled Bill, with a border and the number keyboard with a decimal point.
Keep the bill in double _bill = 0;, read with double.tryParse, or 0.
Under the field, show Bill: 42.50 with two decimals.

Try it yourself

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