Exercices et TP Flutter Série 02
Sommaire
- 1- Exercice 01
- 1.1- Énoncé
- 1.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 05
- 5.1- Énoncé
- 5.2- Solution
- 6- Exercice 06
- 6.1- Énoncé
- 6.2- Solution
- 7- Exercice 07
- 7.1- Énoncé
- 7.2- Solution
- 8- Exercice 08
- 8.1- Énoncé
- 8.2- Solution
- 9- Exercice 09
- 9.1- Énoncé
- 9.2- Solution
- 10- Exercice 10
- 10.1- Énoncé
- 10.2- Solution
- 10.2.1- Cours Flutter
Exercices et TP Flutter Série 02
Exercice 01
-
Énoncé
- Créer un nouveau projet Flutter appelé ‘votrePrenomNom‘,
- Sous le dossier lib, ouvrez le fichier principal main.dart.
- Supprimez le code du fichier main.dart , remplacez le par le code qui vous permet de :
- Créez une application Flutter qui contient une seule activité, avec deux ‘ElevatedButton‘ portant deux icones comme il est indiqué sur l’image ci-dessous, et un widget “container” qui contient un numéro.
- Votre application doive correspondre au schéma suivant:
- Vous pouvez visiter le site suivant pour chercher les icones : https://api.flutter.dev/flutter/material/Icons-class.html
-
Solution
-
Exercice 02
-
Énoncé
- Créer un nouveau projet Flutter appelé ‘votrePrenomNom‘,
- Sous le dossier lib, ouvrez le fichier principal main.dart.
- Supprimez le code du fichier main.dart , remplacez le par le code qui vous permet de :
- Créez une application Flutter qui contient une seule activité, avec deux ‘ElevatedButton‘ portant deux icones comme il est indiqué sur l’image ci-dessous, et un widget “container” qui contient un numéro.
- Votre application doive correspondre au schéma suivant:
- Vous pouvez visiter le site suivant pour chercher les icones : https://api.flutter.dev/flutter/material/Icons-class.html
-
Solution
-
Exercice 03
-
Énoncé
- Créer un nouveau projet Flutter appelé 'votrePrenomNom',
- Sous le dossier lib, ouvrez le fichier principal main.dart.
- Supprimez le code du fichier main.dart , remplacez le par le code qui vous permet de :
- Créer une application Flutter qui contient une seule activité, avec deux 'Icon' comme il est indiqué sur l'image ci-dessous, et un widget "container" qui contient un numéro.
- Votre application doive correspondre au schéma suivant:
- Vous pouvez visiter le site suivant pour chercher les icones : https://api.flutter.dev/flutter/material/Icons-class.html
-
Solution
-
Exercice 04
-
Énoncé
- Créer un nouveau projet Flutter appelé 'votrePrenomNom',
- Sous le dossier lib, ouvrez le fichier principal main.dart.
- Supprimez le code du fichier main.dart , remplacez le par le code qui vous permet de :
- Créer une application Flutter qui contient une seule activité, avec deux 'FloatingActionButton' portant deux icones comme il est indiqué sur l'image ci-dessous, et un widget "container" qui contient un numéro.
- Votre application doive correspondre au schéma suivant:
- Vous pouvez visiter le site suivant pour chercher les icones : https://api.flutter.dev/flutter/material/Icons-class.html
-
Solution
-
Exercice 05
-
Énoncé
- Créer un nouveau projet Flutter appelé 'votrePrenomNom',
- Sous le dossier lib, ouvrez le fichier principal main.dart.
- Supprimez le code du fichier main.dart , remplacez le par le code qui vous permet de :
- Créer une application Flutter qui contient une seule activité, avec deux 'FloatingActionButton' portant deux icones comme il est indiqué sur l'image ci-dessous, et un widget "container" qui contient une lettre suivie de son code ASCII.
- Votre application doive correspondre au schéma suivant:
- Vous pouvez visiter le site suivant pour chercher les icones : https://api.flutter.dev/flutter/material/Icons-class.html
-
Solution
Cliquez ici
import 'package:flutter/material.dart';
void main() => runApp(const MyWidget());
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
leading: const Icon(Icons.access_alarm),
title: const Text('Votre prénom et nom'),
elevation: 4,
),
body: const InteractiveWidget(),
),
);
}
}
class InteractiveWidget extends StatefulWidget {
const InteractiveWidget({super.key});
@override
State<InteractiveWidget> createState() => _InteractiveWidgetState();
}
class _InteractiveWidgetState extends State<InteractiveWidget> {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.topCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
},
child: const Icon(
Icons.add,
size: 50.0,
),
),
Container(
padding: const EdgeInsets.all(20),
child: Text(
'0',
style: TextStyle(
fontSize: 60, color: Colors.red),
),
),
ElevatedButton(
onPressed: () {
},
child: const Icon(
Icons.remove,
size: 50.0,
),
),
],
),
);
}
}
–>
Cliquez ici
import 'package:flutter/material.dart';
void main() => runApp(const MyWidget());
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.green),
),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
leading: const Icon(
Icons.exposure_rounded,
size: 50.0,
),
title: const Text('Votre prénom et nom'),
elevation: 4,
),
body: const InteractiveWidget(),
),
);
}
}
class InteractiveWidget extends StatefulWidget {
const InteractiveWidget({super.key});
@override
State<InteractiveWidget> createState() => _InteractiveWidgetState();
}
class _InteractiveWidgetState extends State<InteractiveWidget> {
int _counter = 0;
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.topCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
setState(() {
_counter--;
});
},
child: const Icon(
Icons.arrow_circle_down,
size: 50.0,
),
),
Container(
padding: const EdgeInsets.all(20),
child: Text(
'$_counter',
style: TextStyle(
fontSize: 60,
color: _counter < 0 ? Colors.red : Colors.green),
),
),
ElevatedButton(
onPressed: () {
setState(() {
_counter++;
});
},
child: const Icon(
Icons.arrow_circle_up,
size: 50.0,
),
),
],
),
);
}
}
Cliquez ici
import 'package:flutter/material.dart';
void main() => runApp(const MyWidget());
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
leading: const Icon(Icons.thumbs_up_down),
title: const Text('Votre prénom et nom'),
elevation: 4,
),
body: const InteractiveWidget(),
),
);
}
}
class InteractiveWidget extends StatefulWidget {
const InteractiveWidget({super.key});
@override
State<InteractiveWidget> createState() => _InteractiveWidgetState();
}
class _InteractiveWidgetState extends State<InteractiveWidget> {
int _counter = 0;
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.topCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
setState(() {
_counter++;
});
},
child: const Icon(Icons.thumb_up,
size: 80.0, color: Colors.blueAccent),
),
Container(
padding: const EdgeInsets.all(20),
child: Text(
'$_counter',
style: TextStyle(
fontSize: 60, color: _counter < 0 ? Colors.red : Colors.cyan),
),
),
InkWell(
onTap: () {
setState(() {
_counter--;
});
},
child: const Icon(
Icons.thumb_down,
size: 80.0,
color: Colors.red,
),
),
],
),
);
}
}
Cliquez ici
Cliquez ici
import 'package:flutter/material.dart';
void main() => runApp(const MyWidget());
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
leading: const Icon(
Icons.keyboard_outlined,
size: 50,
),
title: const Text('Votre prénom et nom'),
elevation: 4,
),
body: const InteractiveWidget(),
),
);
}
}
class InteractiveWidget extends StatefulWidget {
const InteractiveWidget({super.key});
@override
State<InteractiveWidget> createState() => _InteractiveWidgetState();
}
class _InteractiveWidgetState extends State<InteractiveWidget> {
int _counter = 65;
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.topCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(
onPressed: () {
setState(() {
_counter++;
});
},
child: const Icon(
Icons.abc_outlined,
size: 40.0,
),
),
Container(
padding: const EdgeInsets.all(20),
child: Text(
"${String.fromCharCode(_counter)} ('$_counter')",
style: TextStyle(
fontSize: 60,
color: (_counter >= 65 && _counter <= 90)
? Colors.cyan
: ((_counter >= 97 && _counter <= 122)
? Colors.green
: Colors.red)),
),
),
FloatingActionButton(
onPressed: () {
setState(() {
_counter--;
});
},
child: const Icon(
Icons.sort_by_alpha_rounded,
size: 40.0,
),
),
],
),
);
}
}
