Calculateur de pourboire : L’addition

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

Il est temps de mettre en pratique toute cette section. Au cours des cinq prochaines leçons, tu vas créer un calculateur de pourboire : saisis le montant de l’addition, choisis un pourboire, indique combien de personnes le partagent et vois combien chacune paie.

L’application est un StatefulWidget avec un Column à l’intérieur d’un Padding. La première partie concerne l’addition : un champ pour les nombres avec un séparateur décimal, lu avec double.tryParse et conservé dans l’état sous forme de double.

Réaffiche le montant de l’addition sous le champ avec deux décimales, pour vérifier que l’application l’a bien lu. Les montants ont toujours deux décimales : 42.50, et non 42.5.

Défi

Moyen

Remplacez la ligne Type the bill to start par un TextField intitulé Bill, avec une bordure et un clavier numérique avec séparateur décimal.
Conservez le montant dans double _bill = 0;, lisez-le avec double.tryParse, ou utilisez 0.
Sous le champ, affichez Bill: 42.50 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> {
  @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)),
          ],
        ),
      ),
    );
  }
}