Back

Exercices et TP Flutter Série 02

 

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:
          • Exercices et TP Flutter Série 02

      • 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,
                    ),
                  ),
                ],
              ),
            );
          }
        }
        

        –>




    • 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
        • 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,
                      ),
                    ),
                  ],
                ),
              );
            }
          }
          
    • 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:
            • Exercices et TP Flutter Série 02

        • 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.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,
                      ),
                    ),
                  ],
                ),
              );
            }
          }
          
    • 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
        • Cliquez ici
          
           
          
    • 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.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,
                      ),
                    ),
                  ],
                ),
              );
            }
          }
          

    Riadh HAJJI

    Abonnez vous à notre chaîne YouTube gratuitement