Calculadora de propinas: La cuenta

Parte de la sección Cómo hacerla interactiva del Journey de Flutter de Coddy. Lección 30 de 34.

Es hora de poner en práctica toda la sección. En las próximas cinco lecciones crearás una calculadora de propinas: escribe el importe de la cuenta, elige una propina, indica cuántas personas la comparten y descubre cuánto paga cada una.

La aplicación es un StatefulWidget con un Column dentro de un Padding. La primera parte es el importe de la cuenta: un campo para números con punto decimal, leído con double.tryParse y guardado en el State como un double.

Muestra el importe de la cuenta debajo del campo con dos decimales, para que puedas ver que la aplicación lo leyó correctamente. El dinero siempre tiene dos: 42.50, no 42.5.

Desafío

Intermedio

Reemplaza la línea Type the bill to start por un TextField etiquetado como Bill, con un borde y el teclado numérico con punto decimal.
Guarda el importe en double _bill = 0;, léelo con double.tryParse o usa 0.
Debajo del campo, muestra Bill: 42.50 con dos decimales.

Pruébalo tú mismo

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