Exercices et TP Flutter Série 01
Sommaire
- 1- Exercice 01
- 1.1- Exercice 1.1
- 1.1.1- Énoncé
- 1.1.2- Solution
- 1.2- Exercice 1.2
- 1.2.1- Énoncé
- 1.2.2- Solution
- 1.3- Exercice 1.3
- 1.3.1- Énoncé
- 1.3.2- Solution
- 1.4- Exercice 1.4
- 1.4.1- Énoncé
- 1.4.2- Solution
- 2- Exercice 02
- 2.1- Énoncé
- 2.2- Solution
- 3- Exercice 03
- 3.1- Énoncé
- 3.2- Solution
- 4- Exercice 04
- 4.1- Énoncé
- 4.2- Solution
- 5- Exercice 04
- 5.1- Énoncé
- 6- Exercice 05
- 6.1- Énoncé
- 6.2- Solution
- 7- Exercice 06
- 7.1- Énoncé
- 7.2- Solution
- 8- Exercice 07
- 8.1- Énoncé
- 8.2- Solution
- 9- Exercice 08
- 9.1- Énoncé
- 9.2- Solution
- 10- Exercice 09
- 10.1- Énoncé
- 10.2- Solution
- 11- Exercice 10
- 11.1- Énoncé
- 11.2- Solution
- 11.2.1- Cours Flutter
Le Widget Checkbox dans Flutter
Exercices et TP Flutter Série 01
Exercice 01
-
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
- 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.
- 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
- 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
- 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
- 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
- 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‘.
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
Code
Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextField(
decoration: InputDecoration(
hintText: 'Enter some text',
),
),
],
),
)
Description
Cliquez ici
Cliquez ici
Cliquez ici
TextField(
decoration: InputDecoration(
hintText: "Enter your email",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
),
Exercice 02
-
É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
Exercice 03
-
É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
- 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.
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',
),
),
],
),
)
Exercice 04
-
É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,
),
),
],
));
}
}