Debuter avec Flutter

Pourquoi Flutter ?

Flutter est une plateforme d'interface utilisateur moderne, open source, créée par Google. Elle permet de développer des applications pour iOS, Android, Web, Desktop et VR/AR en utilisant un seul codebase. Dans le contexte professionnel, Flutter offre une solution complète pour les développeurs qui cherchent à créer des applications performantes et uniques pour leurs clients.

Un cas d'usage concret est la création d'une application de messagerie mobile. Avec Flutter, vous pouvez développer une interface utilisateur fluide et personnalisée pour iOS et Android en utilisant le même codebase, ce qui accélère le processus de développement et réduit les coûts.

Prerequis

• Connaissances en programmation : Java ou Kotlin pour Android, Swift pour iOS.
• Connaissance de Dart (langage utilisé par Flutter) : pas obligatoire, mais utile pour comprendre le code source et les packages tiers.
• Outils à installer :
  • Visual Studio Code avec l'extension Flutter
  • Android Studio
  • Xcode
  • Git

Concepts fondamentaux

1. Widgets

Les widgets sont les éléments de base de l'interface utilisateur en Flutter. Ils décrivent ce que vous souhaitez afficher.

// Import Flutter Material package
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Mon Application')),
        body: Center(child: Text('Bonjour Flutter !')),
      ),
    );
  }
}

2. State Management

La gestion de l'état est cruciale dans les applications Flutter, surtout pour ceux qui ont des états complexes.

// Import Flutter packages
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Mon Application')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Vous avez tapé sur ce bouton :'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

3. Routing

Le routage permet de naviguer entre différentes pages dans votre application.

// Import Flutter packages
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
      routes: {
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Mon Application')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.pushNamed(context, '/second'),
          child: Text('Aller à la deuxième page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Deuxième Page')),
      body: Center(child: Text('Bienvenue sur la deuxième page !')),
    );
  }
}

Mise en pratique : projet fil rouge

Mini-projet : Un gestionnaire de tâches simples

Étape 1 : Créer un nouveau projet Flutter

flutter create task_manager
cd task_manager

Étape 2 : Ajouter une liste de tâches et un bouton pour ajouter des tâches

// Import Flutter packages
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TaskManager(),
    );
  }
}

class TaskManager extends StatefulWidget {
  @override
  _TaskManagerState createState() => _TaskManagerState();
}

class _TaskManagerState extends State<TaskManager> {
  List<String> _tasks = [];

  void _addTask(String task) {
    setState(() {
      _tasks.add(task);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gestionnaire de Tâches')),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              itemCount: _tasks.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_tasks[index]),
                );
              },
            ),
          ),
          Divider(),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(hintText: 'Ajouter une tâche'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {
                    _addTask((context as ScaffoldState).formKey.currentState!.value['task']);
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Mise en pratique : projet fil rouge - Conclusion

Dans ce tutoriel, nous avons appris les concepts fondamentaux de Flutter et avons construit un mini-projet complet : un gestionnaire de tâches. Nous avons utilisé des widgets, la gestion de l'état, et le routage pour créer une application simple et fonctionnelle.

Erreurs frequentes et debugging

1. Erreur : The named parameter 'initialValue' isn't defined

// ❌ Mauvais
TextField(
  initialValue: _task,
);
dart
// ✅ Correct
TextField(
  controller: TextEditingController(text: _task),
);

2. Erreur : type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'String'

// ❌ Mauvais
_formKey.currentState!.value['task'];
dart
// ✅ Correct
_formKey.currentState!.value['task'] as String;

3. Erreur : setState() called with invalid argument: Expected a int, got null

// ❌ Mauvais
setState(() {
  _counter = null;
});
dart
// ✅ Correct
setState(() {
  if (_counter != null) {
    _counter++;
  }
});

Pour aller plus loin

1. State Management avancée : Explorer les packages comme provider, flutter_bloc ou riverpod pour une gestion d'état plus complexe.
2. Tests unitaires et widget tests : Apprendre à écrire des tests pour votre application Flutter.
3. Navigation avec go_router : Pour une navigation plus avancée et personnalisée.

Défi pratique

Créer une application simple de "To-Do List" qui permet d'ajouter, supprimer et marquer comme terminée les tâches. Utilisez la gestion d'état avec provider.