Additionner deux chiffres avec Flutter

Objectif

Dans ce tutoriel, nous allons vous montrer comment additionner le contenu de deux widgets TextField.

Présentation

Pour additionner deux chiffres saisis dans deux TextFields dans une application Flutter, vous pouvez utiliser les widgets TextField pour créer les champs de saisie et un bouton pour déclencher l’opération d’addition.
Dans le gestionnaire d’événements du bouton, récupérez les valeurs des champs de saisie en utilisant les propriétés controllers, et utilisez l’opérateur de surcharge « + » pour effectuer l’addition. Enfin, affichez le résultat en utilisant un widget Text ou un autre widget approprié.

Cas pratique

Commencez par créer un nouveau projet Flutter en utilisant la commande flutter create mon_projet.
Dans le fichier main.dart, importez les packages material.dart et flutter_form_builder.dart pour utiliser les widgets de bouton et de formulaire.
Créez une fonction additionner() qui prend en entrée deux variables numériques a et b, et renvoie leur somme.
Dans la méthode build(), ajoutez deux champs de formulaire pour saisir les deux chiffres à additionner, en utilisant le widget TextField de material.dart.
Ajoutez également un bouton pour lancer l’opération d’addition en utilisant le widget RaisedButton de material.dart, et en utilisant la fonction onPressed pour appeler la fonction additionner() lorsque le bouton est cliqué.
Enfin, ajoutez un widget Text pour afficher le résultat de l’addition, en utilisant la variable resultat qui est renvoyée par la fonction additionner().

Code

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Additionner deux chiffres', home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _resultat = 0; int _chiffre1 = 0; int _chiffre2 = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Additionner deux chiffres'), ), body: Column( children: [ Padding( padding: const EdgeInsets.fromLTRB(20, 20, 20, 10), child: TextField( keyboardType: TextInputType.number, onChanged: (value) { _chiffre1 = int.parse(value); }, decoration: const InputDecoration( labelText: "Entrez le premier chiffre", border: OutlineInputBorder()), ), ), Padding( padding: const EdgeInsets.fromLTRB(20, 0, 20, 20), child: TextField( keyboardType: TextInputType.number, onChanged: (value) { _chiffre2 = int.parse(value); }, decoration: const InputDecoration( labelText: "Entrez le deuxième chiffre", border: OutlineInputBorder()), ), ), ElevatedButton( onPressed: () { setState(() { _resultat = _chiffre1 + _chiffre2; }); }, child: const Text('Additionner'), ), SizedBox( height: 20.0, ), Text("Le résultat est $_resultat"), ], ), ); } }

Exemples

Dans le premier exemple, nous créons deux TextFields avec des « TextEditingController » pour gérer les entrées utilisateur.
Nous avons également un bouton « Add » qui appelle une fonction « _addValues » lorsqu’il est appuyé.
Cette fonction récupère les valeurs des TextFields en utilisant les propriétés « text » des « TextEditingController » et les additionne.
Le résultat est stocké dans une variable « _result » et affiché à l’écran.
Dans le deuxième exemple, nous utilisons deux champs de texte pour saisir les deux chiffres à additionner, et un bouton élevé pour déclencher l’addition. Nous utilisons également le widget Text pour afficher le résultat de l’addition.

Code 01

import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatefulWidget { const MyApp({super.key}); @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { final TextEditingController _textController1 = TextEditingController(); final TextEditingController _textController2 = TextEditingController(); int _result = 0; void _add() { setState(() { _result = int.parse(_textController1.text) + int.parse(_textController2.text); }); } @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar(title: const Text("Somme de deux textField")), body: Column( children: [ Padding( padding: const EdgeInsets.fromLTRB(20, 30, 10, 0), child: TextField( controller: _textController1, ), ), Padding( padding: const EdgeInsets.fromLTRB(20, 0, 10, 30), child: TextField( controller: _textController2, ), ), ElevatedButton( onPressed: _add, child: const Text("Ajouter"), ), Padding( padding: const EdgeInsets.fromLTRB(20, 10, 10, 0), child: Text( "Résultat: $_result", style: const TextStyle( fontSize: 18, ), ), ), ], ), ), ); } }

Code 02

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage(), ); } } class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { int num1 = 0; int num2 = 0; int result = 0; void _addNumbers() { setState(() { result = num1 + num2; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Additionner deux chiffres"), ), body: Column( children: [ TextField( onChanged: (value) { setState(() { num1 = int.parse(value); }); }, decoration: InputDecoration( hintText: "Entrez le premier chiffre", ), ), TextField( onChanged: (value) { setState(() { num2 = int.parse(value); }); }, decoration: InputDecoration( hintText: "Entrez le deuxième chiffre", ), ), ElevatedButton( onPressed: _addNumbers, child: Text("Additionner"), ), Text("Résultat: $result"), ], ), ); } }

Applications

App-01

Il est demandé de créer une application flutter similaire à l’image ci-dessous:

Additionner deux chiffres avec Flutter

Solution

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Additionner deux nombres';

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const AdditionnerDeuxNombres(),
      ),
    );
  }
}

class AdditionnerDeuxNombres extends StatefulWidget {
  const AdditionnerDeuxNombres({super.key});

  @override
  _AdditionnerDeuxNombresState createState() => _AdditionnerDeuxNombresState();
}

class _AdditionnerDeuxNombresState extends State<AdditionnerDeuxNombres> {
  TextEditingController num1controller = TextEditingController();
  TextEditingController num2controller = TextEditingController();
  String result = "0";
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.topCenter,
      padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
      child: Column(
        children: [
          Row(
            children: [
              Flexible(
                child: TextField(
                  decoration: InputDecoration(
                    hintText: "Saisir le premier nombre",
                    contentPadding: const EdgeInsets.all(12),
                    isDense: true,
                    focusedBorder: const OutlineInputBorder(
                      borderSide: BorderSide(
                          width: 2, color: Color.fromARGB(255, 99, 82, 255)),
                    ),
                    suffixIcon: IconButton(
                        icon: const Icon(Icons.clear,
                            color: Color.fromARGB(255, 201, 73, 67)),
                        onPressed: viderTextField),
                  ),
                  controller: num1controller,
                  // clear text),
                ),
              ),
            ],
          ),
          Row(
            children: [
              Flexible(
                child: TextField(
                  decoration: InputDecoration(
                    hintText: "Saisir le deuxième nombre",
                    contentPadding: const EdgeInsets.all(12),
                    isDense: true,
                    focusedBorder: const OutlineInputBorder(
                      borderSide: BorderSide(
                          width: 2, color: Color.fromARGB(255, 99, 82, 255)),
                    ),
                    suffixIcon: IconButton(
                        icon: const Icon(Icons.clear,
                            color: Color.fromARGB(255, 201, 73, 67)),
                        onPressed: viderTextField2),
                  ),
                  controller: num2controller,
                  // clear text),
                ),
              ),
            ],
          ),
          //Ajouter un espace
          const SizedBox(
            height: 10,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                  onPressed: () {
                    sommeDeuxNombres();
                  },
                  child: const Text("Vider le contenu du TextField"))
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                "Résultat:",
                style: TextStyle(
                  fontSize: 30,
                ),
              ),
              Text(
                result,
                style: const TextStyle(
                  fontSize: 30,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  void sommeDeuxNombres() {
    setState(() {
      int sum = int.parse(num1controller.text) + int.parse(num2controller.text);
      result = sum.toString();
    });
  }

  void viderTextField() {
    num1controller.clear();
    setState(() {
      result = '0'.toString();
    });
  }

  void viderTextField2() {
    num2controller.clear();
    setState(() {
      result = '0'.toString();
    });
  }
}

App-02

Dans une application Flutter, créer une calculette simple avec deux TextFields, quatre radios pour choisir l’addition, la soustraction, la division ou la multiplication et un bouton résultat.
Utiliser les deux méthodes vues en cours

Additionner deux chiffres avec Flutter

Solution 01

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State {
  String _operation = 'add';
  double _result = 0;

  late double _num1, _num2;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Calculatrice'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              keyboardType: TextInputType.number,
              decoration: const InputDecoration(
                hintText: 'Entrez le premier chiffre',
              ),
              onChanged: (value) {
                _num1 = double.parse(value);
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              keyboardType: TextInputType.number,
              decoration: const InputDecoration(
                hintText: 'Entrez le deuxième chiffre',
              ),
              onChanged: (value) {
                _num2 = double.parse(value);
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              children: [
                const Text('Addition'),
                Radio(
                  value: 'add',
                  groupValue: _operation,
                  onChanged: (value) {
                    setState(() {
                      _operation = value!;
                    });
                  },
                ),
                const Text('Multiplication'),
                Radio(
                  value: 'mul',
                  groupValue: _operation,
                  onChanged: (value) {
                    setState(() {
                      _operation = value!;
                    });
                  },
                ),
                const Text('Soustraction'),
                Radio(
                  value: 'soust',
                  groupValue: _operation,
                  onChanged: (value) {
                    setState(() {
                      _operation = value!;
                    });
                  },
                ),
                const Text('Division'),
                Radio(
                  value: 'div',
                  groupValue: _operation,
                  onChanged: (value) {
                    setState(() {
                      _operation = value!;
                    });
                  },
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: ElevatedButton(
              child: const Text('Calculer'),
              onPressed: () {
                setState(() {
                  if (_operation == 'add') {
                    _result = _num1 + _num2;
                  } else if (_operation == 'soust') {
                    _result = _num1 - _num2;
                  } else if (_operation == 'div') {
                    _result = _num1 / _num2;
                  } else {
                    _result = _num1 * _num2;
                  }
                });
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(_result != null ? 'Résultat : $_result' : ''),
          ),
        ],
      ),
    );
  }
}

Solution 02

import 'package:flutter/material.dart';

void main() => runApp(Calculator());

class Calculator extends StatefulWidget {
  @override
  _CalculatorState createState() => _CalculatorState();
}

class _CalculatorState extends State<Calculator> {
  String _operation = 'addition';
  double _result = 0;
  final TextEditingController _num1Controller = TextEditingController();
  final TextEditingController _num2Controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Calculatrice'),
        ),
        body: Column(
          children: [
            Container(
              padding: const EdgeInsets.fromLTRB(20, 20, 20, 10),
              child: TextField(
                controller: _num1Controller,
                decoration: const InputDecoration(
                  hintText: 'Entrez le premier nombre',
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.fromLTRB(20, 0, 20, 10),
              child: TextField(
                controller: _num2Controller,
                decoration: const InputDecoration(
                  hintText: 'Entrez le deuxième nombre',
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.all(20),
              child: Row(
                children: [
                  const Text('Addition'),
                  Radio(
                    value: 'addition',
                    groupValue: _operation,
                    onChanged: (value) {
                      setState(() {
                        _operation = value!;
                      });
                    },
                  ),
                  const Text('Soustraction'),
                  Radio(
                    value: 'soustraction',
                    groupValue: _operation,
                    onChanged: (value) {
                      setState(() {
                        _operation = value!;
                      });
                    },
                  ),
                  const Text('Multiplication'),
                  Radio(
                    value: 'multiplication',
                    groupValue: _operation,
                    onChanged: (value) {
                      setState(() {
                        _operation = value!;
                      });
                    },
                  ),
                  const Text('division'),
                  Radio(
                    value: 'division',
                    groupValue: _operation,
                    onChanged: (value) {
                      setState(() {
                        _operation = value!;
                      });
                    },
                  ),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.all(20),
              child: ElevatedButton(
                child: const Text('Calculer'),
                onPressed: () {
                  double num1 = double.parse(_num1Controller.text);
                  double num2 = double.parse(_num2Controller.text);

                  if (_operation == 'addition') {
                    _result = num1 + num2;
                  } else if (_operation == 'soustraction') {
                    _result = num1 - num2;
                  } else if (_operation == 'division') {
                    _result = num1 / num2;
                  } else {
                    _result = num1 * num2;
                  }
                  setState(() {});
                },
              ),
            ),
            Container(
              padding: const EdgeInsets.all(20),
              child: Text('Résultat : $_result'),
            ),
          ],
        ),
      ),
    );
  }
}

Flutter

Additionner deux chiffres avec Flutter