Assets

1. Images

Afficher une image depuis un asset

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Image asset')),
        body: Center(
          child: Image.asset('assets/images/logo.png'),
        ),
      ),
    );
  }
}

Spécifier la largeur et la hauteur

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Image avec taille')),
        body: Center(
          child: Image.asset(
            'assets/images/background.jpg',
            width: 200,
            height: 150,
            fit: BoxFit.cover, // Ajuster l'image à la taille du conteneur
          ),
        ),
      ),
    );
  }
}

Gérer différentes résolutions

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Résolutions multiples')),
        body: Center(
          // Structure des dossiers
          // assets/images/
          //   - logo.png
          //   - logo@2x.png
          //   - logo@3x.png
          child: Image.asset('assets/images/logo.png'),
          // Flutter choisira la meilleure résolution
        ),
      ),
    );
  }
}

2. Polices

Utiliser une police personnalisée

import 'package:flutter/material.dart';

// Dans pubspec.yaml
// fonts:
//   - family: MyCustomFont
//     fonts:
//       - asset: assets/fonts/MyCustomFont-Regular.ttf

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Police personnalisée')),
        body: const Center(
          child: Text(
            'Hello World',
            style: TextStyle(fontFamily: 'MyCustomFont'),
          ),
        ),
      ),
    );
  }
}

Définir le style de la police

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Style de police')),
        body: const Center(
          child: Text(
            'Titre',
            style: TextStyle(
              fontFamily: 'MyCustomFont',
              fontSize: 24,
              fontWeight: FontWeight.bold,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

3. Icônes

Utiliser des icônes personnalisées

import 'package:flutter/material.dart';

// Dans pubspec.yaml
// flutter:
//   assets:
//     - assets/icons/

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Icône personnalisée')),
        body: Center(
          child: IconButton(
            onPressed: () {},
            icon: Image.asset('assets/icons/settings.png'),
          ),
        ),
      ),
    );
  }
}

Utiliser des icônes vectorielles

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

// Ajouter le package font_awesome_flutter à pubspec.yaml
// flutter pub add font_awesome_flutter

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Icône vectorielle')),
        body: const Center(
          child: FaIcon(FontAwesomeIcons.addressBook),
        ),
      ),
    );
  }
}

4. Fichiers de données

Charger un fichier JSON

import 'dart:convert';

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: JsonAssetDemo());
  }
}

class JsonAssetDemo extends StatefulWidget {
  const JsonAssetDemo({super.key});

  @override
  State<JsonAssetDemo> createState() => _JsonAssetDemoState();
}

class _JsonAssetDemoState extends State<JsonAssetDemo> {
  String _output = 'Aucune donnée';

  Future<void> loadData() async {
    final data = await DefaultAssetBundle.of(context).loadString('assets/data/data.json');
    final jsonData = jsonDecode(data);
    setState(() {
      _output = jsonData.toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Charger JSON')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: loadData,
              child: const Text('Charger'),
            ),
            const SizedBox(height: 12),
            Text(_output),
          ],
        ),
      ),
    );
  }
}

Lire un fichier texte

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: TextAssetDemo());
  }
}

class TextAssetDemo extends StatefulWidget {
  const TextAssetDemo({super.key});

  @override
  State<TextAssetDemo> createState() => _TextAssetDemoState();
}

class _TextAssetDemoState extends State<TextAssetDemo> {
  String _output = 'Aucun contenu';

  Future<void> readFile() async {
    final data = await DefaultAssetBundle.of(context).loadString('assets/text/notes.txt');
    setState(() {
      _output = data;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Lire un fichier texte')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: readFile,
              child: const Text('Lire'),
            ),
            const SizedBox(height: 12),
            Text(_output),
          ],
        ),
      ),
    );
  }
}

Conseils supplémentaires

• **Organisation **: Structurez vos dossiers d'assets de manière logique pour faciliter la gestion.
• **Optimisation **: Utilisez des formats de fichiers optimisés pour réduire la taille de votre application (ex: WebP pour les images).
• **Documentation **: Consultez la documentation officielle de Flutter pour en savoir plus sur les assets : https://docs.flutter.dev/ui/assets/assets-and-images

Optimisation des ressources et préparation au build

Compression et optimisation des images

• Convertir PNG → WebP pour réduire la taille (30-40% plus petit)
• Utiliser des outils : ImageMagick, TinyPNG, Squoosh
• Supprimer les métadonnées des images
• Générer les résolutions multiples (@2x, @3x) seulement si nécessaire

Gestion des polices personnalisées

• Exclure les poids non utilisés de pubspec.yaml
• Préférer Google Fonts (CDN) pour réduire la taille du bundle
• Une police personnalisée coûte ~100-300 KB

Évaluation de la taille du build

flutter build apk --release --analyze-size
flutter build aab --release --analyze-size

Suppression des ressources inutiles

• Vérifier dans pubspec.yaml qu'aucun asset inutile n'est inclus
• Utiliser flutter pub get puis flutter pub upgrade pour nettoyer
• Vérifier les dépendances non utilisées : flutter pub deps --no-dev

Structure optimale des assets

assets/
  images/
    - logo.png (1x)
    - logo@2x.png (2x)
    - logo@3x.png (3x)
  fonts/
    - CustomFont-Regular.ttf
    - CustomFont-Bold.ttf
  data/
    - config.json