Calcolatore della mancia: La mancia

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

Ora, la mancia. Un Slider da 0 a 30 percento, con incrementi di 5, la seleziona e l'app mostra a quanto ammonta.

Mantieni la percentuale nello State come double, inizializzato a 10. L'importo della mancia non è qualcosa da memorizzare: deriva dal conto e dalla percentuale, quindi calcolalo all'inizio di build, come final:

final double tip = _bill * _tipPercent / 100;

Ogni setState, dal campo o dallo slider, ricostruisce la schermata e tip viene ricalcolato con i nuovi valori.

Sfida

Facile

Sotto l'importo del conto, mostra Tip: 10% e uno Slider da 0 a 30 con 6 divisioni, inizialmente impostato su 10.
Sotto lo slider, mostra Tip amount: 4.00 per un conto di 40, con due 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> {
  double _bill = 0;

  @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: [
            TextField(
              keyboardType: const TextInputType.numberWithOptions(decimal: true),
              decoration: const InputDecoration(
                labelText: 'Bill',
                border: OutlineInputBorder(),
              ),
              onChanged: (String value) {
                setState(() {
                  _bill = double.tryParse(value) ?? 0;
                });
              },
            ),
            const SizedBox(height: 8),
            Text('Bill: ${_bill.toStringAsFixed(2)}'),
          ],
        ),
      ),
    );
  }
}