Calcolatore della mancia: Il conto

Fa parte della sezione Rendere l’app interattiva del percorso Flutter di Coddy. Lezione 30 di 34.

È il momento di mettere in pratica l’intera sezione. Nelle prossime cinque lezioni costruirai una calcolatrice per le mance: inserisci il conto, scegli una mancia, indica quante persone lo dividono e scopri quanto paga ciascuna.

L’app è un StatefulWidget con un Column all’interno di un Padding. La prima parte riguarda il conto: un campo per i numeri con la virgola, letto con double.tryParse e conservato nello State come double.

Mostra di nuovo il conto sotto il campo con due cifre decimali, così puoi vedere che l’app l’ha letto correttamente. Gli importi hanno sempre due cifre decimali: 42.50, non 42.5.

Sfida

Medio

Sostituisci la riga Type the bill to start con un TextField etichettato Bill, con un bordo e la tastiera numerica con il separatore decimale.
Memorizza l’importo in double _bill = 0;, leggilo con double.tryParse oppure usa 0.
Sotto il campo, mostra Bill: 42.50 con due cifre decimali.

Provalo tu

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