Calculateur de pourboire : Le pourboire

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

Ensuite, le pourboire. Un Slider de 0 à 30 % par paliers de 5 permet de le choisir, et l’application affiche le montant correspondant.

Conserve le pourcentage dans le State sous forme de double, avec une valeur initiale de 10. Le montant du pourboire n’est pas une donnée à stocker : il découle de la facture et du pourcentage, alors calcule-le au début de build, sous forme de final :

final double tip = _bill * _tipPercent / 100;

Chaque setState, depuis le champ ou depuis le curseur, reconstruit l’écran, et tip est recalculé avec les nouvelles valeurs.

Défi

Facile

Sous le montant de la facture, affiche Tip: 10% et un Slider de 0 à 30 avec 6 divisions, en commençant à 10.
Sous le curseur, affiche Tip amount: 4.00 pour une facture de 40, avec deux décimales.

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;

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