Калькулятор чаевых: счёт

Часть раздела Добавляем интерактивность путешествия по Flutter на Coddy. Урок 30 из 34.

Пора применить на практике всё, что вы изучили в этом разделе. В следующих пяти уроках вы создадите калькулятор чаевых: введёте сумму счёта, выберете размер чаевых, укажете, на сколько человек разделить счёт, и увидите, сколько заплатит каждый.

Приложение — это StatefulWidget с 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)),
          ],
        ),
      ),
    );
  }
}