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

Les cours

Les cours

Flutter

Exercices et TP Flutter Série 02

Exercices et TP Flutter Série 02

Exercice 01

Énoncé

Solution

Exercice 02

Énoncé

Solution

Exercice 03

Énoncé

Solution

Exercice 04

Énoncé

Solution

Exercice 05

Énoncé

Solution

Cours Flutter

Créer un design responsive avec MediaQuery

Qu'est ce qu'un widget dans Flutter ?

Cours informatique à domicile et à distance
Nous sommes là pour vous aider

Les cours

Les cours

Flutter

Exercices et TP Flutter Série 02

Exercice 01

Énoncé

Solution

Exercice 02

Énoncé

Solution

Exercice 03

Énoncé

Solution

Exercice 04

Énoncé

Solution

Exercice 05

Énoncé

Solution

Cours Flutter

Créer un design responsive avec MediaQuery

Qu'est ce qu'un widget dans Flutter ?

Ces articles pourraient aussi vous intéresser

Le widget Drawer dans Flutter

Comment gérer les opérations sur une base de données SQLite dans Flutter

Projet Flutter : Application de Gestion des Utilisateurs (CRUD) -1