Configuration Flutter et Structure de Projet

Développer avec Flutter

Flutter est présenté comme une librairie de création “pseudo-déclarative” d’UI réactive multi-plateforme, en partie inspirée de React.

Flutter est donc un environnement de développement multi-paradigme :

• composition
• fonctionnelle
• event-driven
• déclaratif
• impératif

Utiliser Flutter CLI

Documentation officielle Flutter CLI

Flutter peut être utilisé via lignes de commande pour l’ensemble du cycle de développement.

Configuration

Vérifiez votre installation Flutter :

flutter doctor

Cette commande vérifie votre environnement et affiche un rapport des outils installés.

Création de projet

Créer un nouveau projet Flutter :

flutter create .

Plusieurs options sont disponibles :

• --platforms : Spécifier les plateformes cibles
• --org : Définir l’organisation (ex: com.example)
• --ios-language : Langage pour iOS (Swift/Objective-C)
• --android-language : Langage pour Android (Kotlin/Java)
• --template : Type de projet (app, module, package, plugin)

Commandes Flutter essentielles

# Gestion des dépendances
flutter pub get
flutter pub outdated
flutter pub upgrade

# Développement
flutter run -d device
flutter test
flutter build
flutter drive

# Outils
flutter format
flutter analyze
flutter doctor

# Extras
flutter emulators
flutter gen-l10n
flutter bash-completion

Création de projet avec un IDE

Android Studio / IntelliJ

1. Installer le plugin Flutter
2. Configurer le chemin vers Flutter SDK
3. Créer nouveau projet Flutter via l’assistant

VS Code

1. Installer l’extension Flutter
2. Utiliser la palette de commandes : “Flutter: New Project”

Structure de l’application

Comme toutes les applications Dart, les applications Flutter ont un point d’entrée unique : la fonction main.

L’initialisation de l’application est lancée via la méthode runApp qui configure les couches nécessaires au fonctionnement d’une application Flutter Material.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: Scaffold(
    body: Text('Hello world')
  )
));

MaterialApp Configuration

MaterialApp est le widget racine qui configure votre application Flutter avec Material Design.

Titre et titre généré

MaterialApp(
  title: 'Mon App Flutter',
  onGenerateTitle: (context) => 'Titre Localisé',
  // ...
)

Thèmes Material Design

Configuration des thèmes clair et sombre :

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.light,
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
  ),
  // Thèmes à contraste élevé
  highContrastTheme: ThemeData(
    brightness: Brightness.light,
    // Configuration contraste élevé
  ),
  highContrastDarkTheme: ThemeData(
    brightness: Brightness.dark,
    // Configuration contraste élevé sombre
  ),
)

Configuration du Navigator

Le Navigator gère la navigation entre les écrans :

MaterialApp(
  home: HomeScreen(), // Écran d'accueil
  navigatorKey: GlobalKey<NavigatorState>(),

  // Routes nommées
  routes: {
    '/': (context) => HomeScreen(),
    '/settings': (context) => SettingsScreen(),
  },

  initialRoute: '/',
  onGenerateRoute: (settings) {
    // Génération dynamique de routes
  },
  onGenerateInitialRoutes: (initialRoute) {
    // Routes initiales personnalisées
  },
  onUnknownRoute: (settings) {
    // Gestion des routes inconnues
    return MaterialPageRoute(
      builder: (context) => NotFoundScreen(),
    );
  },
)

Localisation

Configuration des langues supportées :

MaterialApp(
  locale: Locale('fr', 'FR'),
  supportedLocales: [
    Locale('en', 'US'),
    Locale('fr', 'FR'),
  ],
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  localeResolutionCallback: (locale, supportedLocales) {
    // Résolution personnalisée de locale
  },
)

Options de debug

MaterialApp(
  debugShowCheckedModeBanner: false, // Masquer le banner debug
  debugShowMaterialGrid: false,      // Grille Material Design
  showPerformanceOverlay: false,     // Overlay de performance
  showSemanticsDebugger: false,      // Debugger d'accessibilité
)

Structure d’un écran avec Scaffold

Le Scaffold fournit la structure de base d’un écran Material Design :

Scaffold(
  appBar: AppBar(
    title: Text('Mon Écran'),
    leading: IconButton(
      icon: Icon(Icons.menu),
      onPressed: () {},
    ),
    actions: [
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {},
      ),
    ],
  ),

  body: Center(
    child: Text('Contenu principal'),
  ),

  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),

  drawer: Drawer(
    child: ListView(
      children: [
        DrawerHeader(
          decoration: BoxDecoration(color: Colors.blue),
          child: Text('Menu'),
        ),
        ListTile(
          title: Text('Accueil'),
          onTap: () {},
        ),
      ],
    ),
  ),

  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Accueil',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.settings),
        label: 'Paramètres',
      ),
    ],
  ),
)

Project Structure Overview

Structure des dossiers

mon_app_flutter/
├── android/           # Code natif Android
├── ios/              # Code natif iOS
├── lib/              # Code Dart principal
│   ├── main.dart     # Point d'entrée
│   ├── models/       # Modèles de données
│   ├── screens/      # Écrans de l'application
│   ├── widgets/      # Widgets personnalisés
│   └── services/     # Services (API, base de données)
├── test/             # Tests unitaires
├── assets/           # Ressources (images, polices)
├── pubspec.yaml      # Configuration des dépendances
└── README.md         # Documentation du projet

Fichier pubspec.yaml

Configuration principal du projet :

name: mon_app_flutter
description: Description de mon application Flutter
version: 1.0.0+1

environment:
  sdk: '>=3.0.0 <4.0.0'
  flutter: ">=3.10.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

  assets:
    - assets/images/
    - assets/icons/

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

Organisation du code

main.dart - Point d’entrée :

import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mon App Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

Cette structure de base vous permet de démarrer efficacement le développement d’applications Flutter avec une architecture claire et maintenable.