Exercices et TP Flutter Série 01

Le Widget Checkbox dans Flutter

• Exercice 1.1

• Énoncé

• Comment centrer un champ de texte dans un conteneur dans Flutter?
• Proposer deux méthodes différentes
• Argumenter chacune des deux méthodes par un exemple détaillé.

• Solution

Cliquez ici
Code
Container(
  width: double.infinity,
  height: 100.0,
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.blue,
      width: 2.0,
    ),
  ),
  child: Align(
    alignment: Alignment.center,
    child: TextField(
      decoration: InputDecoration(
        hintText: 'Enter text here',
      ),
    ),
  ),
)
Description
• Dans cet exemple, le widget ‘Align‘ est utilisé pour centrer le ‘TextField‘ dans le fichier . La propriété est définie sur ‘center‘ pour centrer horizontalement et verticalement dans le ‘Container‘.
• Les propriétés et de la sont définies sur width: double.infinity et height: 100.0, respectivement, pour occuper autant d’espace que possible.
Code
Container(
  padding: EdgeInsets.all(16.0),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      TextField(
        decoration: InputDecoration(
          hintText: 'Enter some text',
        ),
      ),
    ],
  ),
)
Description
• Vous pouvez centrer un widget TextField à l’intérieur d’un ‘Container‘ dans Flutter à l’aide des propriétés MainAxisAlignment et CrossAxisAlignment du parent widget Column .
• Dans cet exemple, nous encapsulons la propriété ‘mainAxisAlignment à MainAxisAlignment.center et la propriété crossAxisAlignment à ‘CrossAxisCrossAxisAlignment.center’. Cela centre le TextField à la fois horizontalement et verticalement à l’intérieur du Container.

• Exercice 1.2

• Énoncé

• Comment ajouter un compteur de caractères à la propriété counterText d’un textfield dans une application Flutter ?
• Argumenter chacune des deux méthodes par un exemple détaillé.

• Solution

Cliquez ici

Pour ajouter un compteur de caractères à la propriété counterText d’un TextField dans une application Flutter, vous pouvez suivre les étapes suivantes :

• 1- Définir une variable pour stocker la longueur actuelle du texte entré dans le champ de texte :

  int _currentLength = 0;

• 2- Utiliser la propriété maxLength pour définir la longueur maximale autorisée pour le champ de texte :

  TextField(
    maxLength: maxLength,
    decoration: InputDecoration(
      counterText: '$_currentLength/$maxLength',
    ),
    onChanged: (value) {
      setState(() {
        _currentLength = value.length;
      });
    },
  ),

• 3- Utiliser la propriété ‘counterTextcounterText peut être définie en utilisant une expression de chaîne interpolée pour afficher la longueur actuelle du texte entré dans le champ de texte et la longueur maximale autorisée :

  counterText: '$_currentLength/$maxLength',

• 4- Mettre à jour la variable ‘_onChanged pour refléter la longueur actuelle du texte entré dans le champ de texte :

  onChanged: (value) {
    setState(() {
      _currentLength = value.length;
    });
  },

• Exercice 1.3

• Énoncé

• Comment ajouter deux nombres entrés dans deux champs de texte (textField) en utilisant un contrôleur pour chaque champ de texte et en les convertissant en nombres avec la méthode ‘parse‘
• Donner un exemple pour chaque étape

• Solution

Cliquez ici
1-Créez deux contrôleurs :
final _firstNumberController = TextEditingController();
final _secondNumberController = TextEditingController();
2-Associez les contrôleurs à deux champs de texte :
TextField(
  controller: _firstNumberController,
),
TextField(
  controller: _secondNumberController,
),
3-Convertissez les entrées en nombres et calculez la somme :
int firstNumber = int.parse(_firstNumberController.text);
int secondNumber = int.parse(_secondNumberController.text);
int sum = firstNumber + secondNumber;
4-Affichez le résultat :
Text("The sum is: $sum")
Notez que dans cet exemple, nous supposons que l’utilisateur entre des entrées valides et que nous ne gérons pas les erreurs liées à la conversion en nombre. Il est donc conseillé d’implémenter des contrôles de saisie pour vous assurer que l’utilisateur entre des entrées valides.

• Exercice 1.4

• Énoncé

• Comment utiliser décoration TextField dans une application flutter
• Donner un exemple pour chaque étape

• Solution

Cliquez ici
Pour utiliser la décoration d’un ‘TextFieldInputDecoration‘ et l’assigner à la propriété decoration du TextField.
Voici un exemple simple montrant comment utiliser une décoration pour un ‘
TextTextField
TextField(
  decoration: InputDecoration(
    hintText: "Enter your email",
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
  ),
),
Dans ce code, nous avons défini un ‘InputDecorationhintText‘ indiquant à l’utilisateur ce qu’il doit entrer dans le champ de texte. Nous avons également défini une bordure en utilisant OutlineInputBorder avec un ‘borderborderRadius‘ de 10.0 pour donner à la bordure un aspect arrondi.
Vous pouvez personnaliser davantage votre ‘TextInputDecoration, telles que label ‘labelText‘, préfixe ‘prefixText‘, suffixText, icon etc. Vous pouvez également définir des couleurs d’arrière-plan, des polices, des marges, etc. en utilisant des widgets de conteneur tels que ‘Container‘.

• Énoncé

• Créer une application Flutter simple. L’objectif est de vous permettre de pratiquer les premières notions déjà vues., placer un texte ‘Bienvenue’ au centre de l’écran , un bouton ‘Valider’ en bas de l’écran
• Changer la couleur de la fenêtre (propriété background), la taille de texte, la couleur de texte
• Naturellement, rien ne se produit lorsque vous appuyez sur le bouton. Testez votre application sur un émulateur ou autre ‘device’ disponible.
• Votre application doive correspondre au schéma suivant:



• Solution

Non disponible

• Énoncé

• Pouvez Vous ajouter plusieurs champs de saisie dans un seul Container en utilisant une série de widgets TextField.
• Argumentez votre réponse par un exemple fonctionnel

• Solution

Cliquez ici
Container(
  padding: EdgeInsets.all(16.0),
  child: Column(
    children: [
      TextField(
        decoration: InputDecoration(
          hintText: 'Entrez le nom',
        ),
      ),
      SizedBox(height: 16.0),
      TextField(
        decoration: InputDecoration(
          hintText: 'Entrez l\'adresse e-mail',
        ),
      ),
      SizedBox(height: 16.0),
      TextField(
        decoration: InputDecoration(
          hintText: 'Entrez le numéro de téléphone',
        ),
      ),
    ],
  ),
)
Dans cet exemple, nous utilisons un Container pour ajouter une marge à l’ensemble de nos champs de saisie. Nous utilisons également une colonne Column pour organiser nos champs de saisie les uns sous les autres. Les widgets SizedBox sont utilisés pour ajouter de l’espace entre les champs de saisie.

• Énoncé

Créez une application Flutter qui contient une seule activité, avec deux ‘TextField‘ n’acceptant que des nombres, et un BUTTON qui permet de lancer le calcul de la moyenne, la somme et le produit des deux nombres saisis, après le résultat doit être affiché dans trois widgets Text



• Solution

Cliquez ici

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Operation',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Opérations')),
        body: Center(
          child: AverageCalculator(),
        ),
      ),
    );
  }
}

class AverageCalculator extends StatefulWidget {
  @override
  _AverageCalculatorState createState() => _AverageCalculatorState();
}

class _AverageCalculatorState extends State<AverageCalculator> {
  final _firstNumberController = TextEditingController();
  final _secondNumberController = TextEditingController();
  late double _average = 0;
  late double _somme = 0;
  late double _produit = 0;

  void _calculerMoyenne() {
    setState(() {
      _average = ((_firstNumberController.text.isNotEmpty &&
              _secondNumberController.text.isNotEmpty)
          ? (double.parse(_firstNumberController.text) +
                  double.parse(_secondNumberController.text)) /
              2
          : null)!;
    });
  }

  void _calculerSomme() {
    setState(() {
      _somme = ((_firstNumberController.text.isNotEmpty &&
              _secondNumberController.text.isNotEmpty)
          ? (double.parse(_firstNumberController.text) +
              double.parse(_secondNumberController.text))
          : null)!;
    });
  }

  void _calculerProduit() {
    setState(() {
      _produit = ((_firstNumberController.text.isNotEmpty &&
              _secondNumberController.text.isNotEmpty)
          ? (double.parse(_firstNumberController.text) *
              double.parse(_secondNumberController.text))
          : null)!;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(32),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            TextField(
              keyboardType: TextInputType.number,
              controller: _firstNumberController,
              decoration: InputDecoration(
                hintText: 'Saisir le premier nombre',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
              ),
            ),
            const SizedBox(
              height: 10.0,
            ),
            TextField(
              keyboardType: TextInputType.number,
              controller: _secondNumberController,
              decoration: InputDecoration(
                hintText: 'Saisir le deuxième nombre',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
              ),
            ),
            const SizedBox(
              height: 20.0,
            ),
            ElevatedButton(
              onPressed: () {
                _calculerMoyenne();
                _calculerSomme();
                _calculerProduit();
              },
              child: const Text('Afficher la moyenne, la somme et le produit'),
            ),
            const SizedBox(
              height: 20.0,
            ),
            // ignore: unnecessary_null_comparison
            _average == null
                ? Container()
                : Text(
                    'La moyenne est : $_average',
                    style: const TextStyle(
                      color: Colors.green,
                      fontSize: 20.0,
                    ),
                  ),
            const SizedBox(
              height: 20.0,
            ),
            // ignore: unnecessary_null_comparison
            _somme == null
                ? Container()
                : Text(
                    'La somme est : $_somme',
                    style: const TextStyle(
                      color: Colors.blue,
                      fontSize: 20.0,
                    ),
                  ),
            const SizedBox(
              height: 20.0,
            ),
            // ignore: unnecessary_null_comparison
            _produit == null
                ? Container()
                : Text(
                    'Le produit est : $_produit',
                    style: const TextStyle(
                      color: Color.fromARGB(255, 241, 7, 210),
                      fontSize: 20.0,
                    ),
                  ),
          ],
        ));
  }
}