Calculateur de pourboire : Les personnes

Fait partie de la section Rendre l’application interactive du Journey Flutter de Coddy. Leçon 32 sur 34.

Une facture est souvent partagée. Ajoute une ligne avec le nombre de personnes et deux boutons icônes, moins et plus, comme le compteur que tu as créé dans « Un compteur qui augmente et diminue ».

Il y a toujours au moins une personne qui paie, donc le bouton moins devient grisé à 1. Un IconButton devient grisé de la même façon que les autres boutons, avec onPressed: null. Lorsque la fonction est courte, tu peux l’écrire directement dans le ? : :

onPressed: _people > 1
    ? () {
        setState(() {
          _people--;
        });
      }
    : null,

Un SizedBox(width: 16) dans la ligne éloigne un peu les boutons du texte.

Défi

Facile

Conservez le nombre de personnes dans int _people = 1;
Sous le montant du pourboire, ajoutez un Row avec People: 1, un IconButton avec Icons.remove et un autre avec Icons.add.
Le signe plus ajoute une personne. Le signe moins en enlève une, et il est grisé lorsque le nombre est égal à 1.

Essayez vous-même

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;
  double _tipPercent = 10;

  @override
  Widget build(BuildContext context) {
    final double tip = _bill * _tipPercent / 100;
    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)}'),
            const SizedBox(height: 24),
            Text('Tip: ${_tipPercent.round()}%', style: const TextStyle(fontSize: 20)),
            Slider(
              value: _tipPercent,
              min: 0,
              max: 30,
              divisions: 6,
              onChanged: (double value) {
                setState(() {
                  _tipPercent = value;
                });
              },
            ),
            Text('Tip amount: ${tip.toStringAsFixed(2)}'),
          ],
        ),
      ),
    );
  }
}