3.1.2 – Utiliser les icônes avec Icon

Les icônes sont des symboles visuels simples qui permettent d'améliorer l'interface de votre application. Flutter fournit une grande collection d'icônes prédéfinies grâce à Material Design. Le widget Icon permet de les afficher facilement.

🎨 Icônes Material

Flutter inclut des milliers d'icônes Material Design prêtes à l'emploi. Ces icônes sont accessibles via la classe Icons. Voici comment utiliser une icône :

Icon(Icons.star)

C'est tout ! Icon(Icons.star) affiche une icône d'étoile. La syntaxe est très simple :

• Icon( : Le widget qui affiche une icône
• Icons.star : L'icône à afficher (une étoile)

📏 Taille et couleur

Par défaut, l'icône a une taille et une couleur standard. Mais vous pouvez les personnaliser avec les paramètres size et color :

Icon(
  Icons.star,
  size: 48,
  color: Colors.amber,
)

Analysons ce code :

• Icons.star : L'icône à afficher (étoile)
• size: 48 : La taille de l'icône (48 pixels)
• color: Colors.amber : La couleur de l'icône (ambre/doré)

🧪 Exemple complet : icône personnalisée

Voici un exemple complet dans une application :

import 'package:flutter/material.dart';

void main() {
  runApp(const MaPage());
}

class MaPage extends StatelessWidget {
  const MaPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mon Application'),
        ),
        body: SafeArea(
          child: Center(
            child: Icon(
              Icons.star,
              size: 64,
              color: Colors.amber,
            ),
          ),
        ),
      ),
    );
  }
}

Dans ce code, une grande étoile dorée s'affichera au centre de l'écran.

🔗 Intégration

Les icônes sont souvent utilisées avec d'autres widgets. Par exemple, vous pouvez combiner une icône avec du texte dans une Column :

Column(
  children: [
    Icon(
      Icons.star,
      size: 48,
      color: Colors.amber,
    ),
    Text('Favoris'),
  ],
)

Dans cet exemple, l'icône d'étoile est affichée au-dessus du texte "Favoris". Ils sont organisés verticalement grâce à Column.

🧪 Exemple : icône avec texte

Voici un exemple complet avec une icône et du texte :

import 'package:flutter/material.dart';

void main() {
  runApp(const MaPage());
}

class MaPage extends StatelessWidget {
  const MaPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mon Application'),
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  Icons.favorite,
                  size: 64,
                  color: Colors.red,
                ),
                const SizedBox(height: 16),
                const Text(
                  'Mes favoris',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Dans cet exemple, une grande icône de cœur rouge est affichée au-dessus du texte "Mes favoris", le tout centré à l'écran.

💡 Points clés à retenir

• Le widget Icon() affiche une icône Material Design
• Icons contient toutes les icônes disponibles (Icons.star, Icons.home, Icons.favorite, etc.)
• size définit la taille de l'icône en pixels (par défaut : 24)
• color définit la couleur de l'icône (comme pour le texte)
• Les icônes peuvent être combinées avec d'autres widgets (Text, Column, etc.)

Icon(
  Icons.nom_de_l_icone,
  size: 48,
  color: Colors.blue,
)

3.1.3 – Afficher des images

Les images sont essentielles pour créer des interfaces attrayantes. Flutter permet d'afficher des images de deux manières : depuis votre projet (images locales) ou depuis Internet (images réseau). Découvrons comment faire.

📁 Images locales

Les images locales sont des fichiers image que vous placez dans votre projet Flutter. Pour les utiliser, vous devez d'abord les ajouter au projet, puis les référencer dans votre code.

Pour afficher une image locale, utilisez le widget Image.asset() :

Image.asset('assets/images/mon_image.png')

Analysons ce code :

• Image.asset( : Le widget qui affiche une image locale
• 'assets/images/mon_image.png' : Le chemin vers l'image dans votre projet

🌐 Images réseau

Les images réseau sont des images hébergées sur Internet. Pour les afficher, utilisez le widget Image.network() :

Image.network('https://example.com/image.jpg')

Analysons ce code :

• Image.network( : Le widget qui affiche une image depuis Internet
• 'https://example.com/image.jpg' : L'URL (adresse) de l'image sur Internet

🧪 Exemple complet : image réseau

Voici un exemple complet avec une image réseau :

import 'package:flutter/material.dart';

void main() {
  runApp(const MaPage());
}

class MaPage extends StatelessWidget {
  const MaPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mon Application'),
        ),
        body: SafeArea(
          child: Center(
            child: Image.network(
              'http://mazoul.online/images/courses/flutter/chapitre_3/owl.jpg',
              width: 300,
              height: 300,
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

Dans cet exemple, une image de 300x300 pixels est affichée au centre de l'écran. L'URL http://mazoul.online/images/courses/flutter/chapitre_3/owl.jpg pointe vers une image de démonstration officielle proposée par Flutter.

📐 BoxFit

Par défaut, une image peut être déformée si sa taille ne correspond pas à l'espace disponible. Le paramètre fit permet de contrôler comment l'image s'adapte à son espace :

Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

Les valeurs possibles pour BoxFit sont :

• BoxFit.cover : L'image remplit tout l'espace en gardant ses proportions. Elle peut être coupée si nécessaire.
• BoxFit.contain : L'image s'adapte entièrement dans l'espace en gardant ses proportions. Il peut y avoir des espaces vides.
• BoxFit.fill : L'image remplit tout l'espace, mais peut être déformée.
• BoxFit.fitWidth : L'image s'adapte à la largeur disponible.
• BoxFit.fitHeight : L'image s'adapte à la hauteur disponible.

🧪 Exemple complet : BoxFit

Voici un exemple qui montre la différence entre BoxFit.cover et BoxFit.contain :

import 'package:flutter/material.dart';

void main() {
  runApp(const MaPage());
}

class MaPage extends StatelessWidget {
  const MaPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mon Application'),
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.network(
                  'http://mazoul.online/images/courses/flutter/chapitre_3/owl.jpg',
                  width: 200,
                  height: 200,
                  fit: BoxFit.cover,
                ),
                const SizedBox(height: 20),
                const Text('BoxFit.cover'),
                const SizedBox(height: 30),
                Image.network(
                  'http://mazoul.online/images/courses/flutter/chapitre_3/owl.jpg',
                  width: 200,
                  height: 200,
                  fit: BoxFit.contain,
                ),
                const SizedBox(height: 20),
                const Text('BoxFit.contain'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Dans cet exemple, deux images identiques sont affichées avec des modes BoxFit différents. Vous pouvez voir la différence : cover remplit tout l'espace (peut couper), tandis que contain montre toute l'image (peut laisser des espaces).

👤 CircleAvatar

CircleAvatar est un widget spécial qui affiche une image (ou un texte) dans un cercle. C'est très utile pour afficher des photos de profil, des avatars, etc.

Voici comment utiliser CircleAvatar avec une image :

CircleAvatar(
  radius: 50,
  backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
)

Analysons ce code :

• CircleAvatar( : Le widget qui affiche une image circulaire
• radius: 50 : Le rayon du cercle (50 pixels, donc un diamètre de 100 pixels)
• backgroundImage: NetworkImage(...) : L'image à afficher (depuis Internet)

🧪 Exemple complet : CircleAvatar

Voici un exemple complet avec CircleAvatar :

import 'package:flutter/material.dart';

void main() {
  runApp(const MaPage());
}

class MaPage extends StatelessWidget {
  const MaPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mon Application'),
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CircleAvatar(
                  radius: 100,
                  backgroundImage: NetworkImage('http://mazoul.online/images/courses/flutter/chapitre_3/owl.jpg'),
                ),
                const SizedBox(height: 20),
                const Text(
                  'Photo de profil',
                  style: TextStyle(fontSize: 20),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Dans cet exemple, une image circulaire de 120 pixels de diamètre (radius: 60) est affichée au centre de l'écran, avec un texte en dessous.

CircleAvatar(
  radius: 50,
  backgroundColor: Colors.blue[700],
  child: Text('MA', style: TextStyle(fontSize: 40, color: Colors.white)),
),

💡 Points clés à retenir

• Image.asset() affiche une image locale (depuis votre projet)
• Image.network() affiche une image depuis Internet
• width et height définissent la taille de l'image
• fit: BoxFit.cover remplit l'espace en gardant les proportions (peut couper)
• fit: BoxFit.contain montre toute l'image en gardant les proportions (peut laisser des espaces)
• CircleAvatar affiche une image (ou texte) dans un cercle
• CircleAvatar utilise NetworkImage ou AssetImage pour les images

// Image locale
Image.asset('assets/images/image.png')

// Image réseau
Image.network('https://example.com/image.jpg', width: 200, height: 200)

// Image avec BoxFit
Image.network('url', width: 200, height: 200, fit: BoxFit.cover)

// CircleAvatar
CircleAvatar(
  radius: 50,
  backgroundImage: NetworkImage('url'),
)

3.1.4 – Utiliser des polices personnalisées

Par défaut, Flutter utilise des polices système. Mais vous pouvez utiliser vos propres polices pour donner une identité visuelle unique à votre application. Pour cela, vous devez ajouter les fichiers de police à votre projet, les déclarer, puis les utiliser.

📁 Ajout des polices

Pour utiliser une police personnalisée, vous devez d'abord avoir le fichier de police (généralement un fichier .ttf ou .otf). Ensuite, vous devez le placer dans votre projet.

Structure recommandée :

mon_projet_flutter/
  ├── lib/
  │   └── main.dart
  ├── assets/
  │   └── fonts/
  │       ├── MaPolice-Regular.ttf
  │       └── MaPolice-Bold.ttf
  └── pubspec.yaml

📝 Déclaration

Une fois la police placée dans le dossier assets/fonts/, vous devez la déclarer dans le fichier pubspec.yaml de votre projet.

Voici comment déclarer une police dans pubspec.yaml :

flutter:
  fonts:
    - family: MaPolice
      fonts:
        - asset: assets/fonts/MaPolice-Regular.ttf
        - asset: assets/fonts/MaPolice-Bold.ttf
          weight: 700

Analysons ce code :

• fonts: : Section pour déclarer les polices
• - family: MaPolice : Le nom de la famille de police (vous choisissez ce nom)
• fonts: : Liste des fichiers de police pour cette famille
• - asset: assets/fonts/MaPolice-Regular.ttf : Chemin vers le fichier de police normal
• - asset: assets/fonts/MaPolice-Bold.ttf : Chemin vers le fichier de police gras
• weight: 700 : Le poids (épaisseur) de la police. 400 = normal, 700 = gras

🎨 Application

Une fois la police déclarée dans pubspec.yaml et l'application redémarrée, vous pouvez l'utiliser dans votre code avec TextStyle :

Text(
  'Mon texte avec police personnalisée',
  style: TextStyle(
    fontFamily: 'MaPolice',
    fontSize: 24,
  ),
)

Analysons ce code :

• fontFamily: 'MaPolice' : Le nom de la famille de police que vous avez déclarée dans pubspec.yaml
• fontSize: 24 : La taille du texte (comme d'habitude)

🧪 Exemple complet : police personnalisée

Voici un exemple complet avec une police personnalisée :

import 'package:flutter/material.dart';

void main() {
  runApp(const MaPage());
}

class MaPage extends StatelessWidget {
  const MaPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mon Application'),
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Texte sans police',
                  style: TextStyle(
                    fontSize: 24,
                  ),
                ),
                const SizedBox(height: 20),
                Text(
                  'Texte normal',
                  style: TextStyle(
                    fontFamily: 'Pacifico',
                    fontSize: 24,
                  ),
                ),
                const SizedBox(height: 20),
                Text(
                  'Texte en gras',
                  style: TextStyle(
                    fontFamily: 'Pacifico',
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Dans cet exemple, deux textes utilisent la police personnalisée "Pacifico" : un en style normal, et un en gras.
Télécharger le fichier Pacifico-Regular.ttf

Déclaration de la police dans pubspec.yaml

flutter:
  fonts:
    - family: Pacifico
      fonts:
        - asset: assets/fonts/Pacifico-Regular.ttf

Ce bloc montre comment déclarer la police Pacifico dans votre fichier pubspec.yaml :

• family: Pacifico : nom que vous utiliserez dans fontFamily.
• asset: : chemin d'accès au fichier de police dans votre dossier assets/fonts/.
• weight: 700 : spécifie la version "gras" de la police.

📋 Exemple : une seule police

Si vous n'avez qu'un seul fichier de police (par exemple, juste la version normale), voici comment le déclarer :

flutter:
  fonts:
    - family: MaPolice
      fonts:
        - asset: assets/fonts/MaPolice-Regular.ttf

Dans ce cas, vous pouvez toujours utiliser fontWeight: FontWeight.bold, mais Flutter simulera le gras (il ne sera pas aussi net qu'avec un vrai fichier de police gras).

💡 Points clés à retenir

• Les polices personnalisées se placent dans assets/fonts/
• Les polices doivent être déclarées dans pubspec.yaml sous la section flutter: fonts:
• Le nom de la famille (family) est celui que vous choisissez
• Le paramètre weight définit l'épaisseur (400 = normal, 700 = gras)
• Après modification de pubspec.yaml, il faut redémarrer l'application
• Utilisez fontFamily: 'NomDeLaPolice' dans TextStyle pour appliquer la police
• Le nom dans fontFamily doit correspondre exactement au nom dans pubspec.yaml

🎯 Exercice pratique

Objectif : Reproduire l'interface de profil ci-dessous en utilisant tous les concepts appris dans ce chapitre.

import 'package:flutter/material.dart';

void main() {
  runApp(const MaPage());
}

class MaPage extends StatelessWidget {
  const MaPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: const Color(0xFF1AB096),
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const CircleAvatar(
                  radius: 80,
                  backgroundImage: AssetImage(
                    "assets/images/steve jobs.jpg",
                  ),
                ),
                const SizedBox(height: 20),
                const Text(
                  'Mazoul Abdenbi',
                  style: TextStyle(
                    fontSize: 40,
                    color: Colors.white,
                    fontFamily: 'Pacifico',
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 5),
                const Text(
                  'FLUTTER DEVELOPER',
                  style: TextStyle(
                    fontSize: 18,
                    color: Colors.white70,
                    letterSpacing: 2,
                  ),
                ),
                const SizedBox(height: 10),
                const Divider(
                  color: Colors.white,
                  thickness: 1,
                  indent: 100,
                  endIndent: 100,
                ),
                const SizedBox(height: 20),
                Card(
                  margin: const EdgeInsets.symmetric(horizontal: 25),
                  child: Padding(
                    padding: const EdgeInsets.all(15),
                    child: Row(
                      children: [
                        const Icon(
                          Icons.phone,
                          color: Color(0xFF1AB096),
                          size: 30,
                        ),
                        const SizedBox(width: 20),
                        Text(
                          '+212 612345678',
                          style: TextStyle(
                            fontSize: 18,
                            color: Colors.grey[800],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                const SizedBox(height: 15),
                Card(
                  margin: const EdgeInsets.symmetric(horizontal: 25),
                  child: Padding(
                    padding: const EdgeInsets.all(15),
                    child: Row(
                      children: [
                        const Icon(
                          Icons.email,
                          color: Color(0xFF1AB096),
                          size: 30,
                        ),
                        const SizedBox(width: 20),
                        Text(
                          'mazoul.abdenbi@gmail.com',
                          style: TextStyle(
                            fontSize: 18,
                            color: Colors.grey[800],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}