Flutter

Exercices et TP Flutter Série 02

Un cours complet pour maîtriser Exercices et TP Flutter Série 02.

0 chapitres 0 QCM Accès gratuit

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

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:
- 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

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

Exercices et TP Flutter Série 02

Sommaire du cours

Autres catégories

Exercice 01

Énoncé

Solution

Exercice 02

Énoncé

Solution

Exercice 03

Énoncé

Solution

Exercice 04

Énoncé

Solution

Exercice 05

Énoncé

Solution

Cours Flutter