Debuter avec Dart

Pourquoi Dart ?

Le langage de programmation Dart est une solution complète pour le développement web, mobile et serveur. Il a été créé en 2011 par Google et est conçu pour être simple, efficace et facile à apprendre. La plupart des développeurs qui ont eu l'occasion de travailler avec Dart sont satisfaits de sa qualité et de son utilisation dans de nombreux projets.

Un cas d'usage concret : Vous êtes un développeur web et vous avez besoin de développer une application mobile et un site web dynamique. Avec Dart, vous pouvez créer ces deux applications en utilisant le même langage de programmation, réduisant ainsi la quantité de code que vous devez écrire et la maintenance des projets.

Prerequis

Avant de commencer à apprendre Dart, il est recommandé d'avoir une certaine connaissance du développement web. Voici les connaissances nécessaires :

• Connaissances de base en programmation (variables, boucles, structures conditionnelles)
• Compréhension des concepts de base en JavaScript (non fortement typé, événements, etc.)
• Familiarité avec le terminal et la gestion des paquets

Outils à installer :

• Flutter SDK : Pour développer applications mobiles

  • Téléchargez-le depuis https://flutter.dev/docs/get-started/install
  • Suivez les instructions pour l'installation sur votre système d'exploitation

• Dart SDK : Pour le développement web et serveur

  • Vous pouvez installer Dart en utilisant Flutter SDK, qui inclut Dart.

Concepts fondamentaux

Variables et types de données

// Déclaration d'une variable avec type
int nombre = 10;
double pi = 3.14;
String message = "Bonjour Dart";
bool estActif = true;

// Affichage des variables
print(nombre);
print(pi);
print(message);
print(estActif);

Fonctions

void direBonjour(String nom) {
  print("Bonjour, $nom !");
}

direBonjour("Dart");

Structures de contrôle

int age = 18;

// Condition if-else
if (age >= 18) {
  print("Majeur");
} else {
  print("Mineur");
}

// Boucle for
for (int i = 0; i < 5; i++) {
  print(i);
}

// Liste et boucle foreach
List<String> noms = ["Alice", "Bob", "Charlie"];
noms.forEach((nom) => print(nom));

Objets et classes

class Personne {
  String nom;
  int age;

  Personne(this.nom, this.age);

  void afficher() {
    print("Nom : $nom, Age : $age");
  }
}

Personne personne = Personne("Alice", 25);
personne.afficher();

Mise en pratique : projet fil rouge

Mini-projet : Gestionnaire de tâches

1. Initialisation du projet Flutter

   flutter create todo_app
   cd todo_app
   

2. Structure des fichiers

   Le projet a une structure standard avec les fichiers suivants :

   lib/
     main.dart
     models/
       task.dart
     screens/
       home_screen.dart
   

3. Création du modèle Task

   // lib/models/task.dart
   class Task {
     String id;
     String title;
     bool completed;
   
     Task({required this.id, required this.title, required this.completed});
   }
   

4. Création de la page d'accueil

   // lib/screens/home_screen.dart
   import 'package:flutter/material.dart';
   import '../models/task.dart';
   
   class HomeScreen extends StatefulWidget {
     @override
     _HomeScreenState createState() => _HomeScreenState();
   }
   
   class _HomeScreenState extends State<HomeScreen> {
     List<Task> tasks = [];
   
     void addTask(String title) {
       setState(() {
         tasks.add(Task(id: DateTime.now().toString(), title: title, completed: false));
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text('Gestionnaire de Tâches')),
         body: ListView.builder(
           itemCount: tasks.length,
           itemBuilder: (context, index) {
             Task task = tasks[index];
             return ListTile(
               title: Text(task.title),
               trailing: Checkbox(
                 value: task.completed,
                 onChanged: (value) {
                   setState(() {
                     tasks[index].completed = value!;
                   });
                 },
               ),
             );
           },
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: () async {
             String? newTask = await showDialog<String>(
               context: context,
               builder: (BuildContext context) {
                 return AlertDialog(
                   title: Text('Ajouter une tâche'),
                   content: TextField(
                     decoration: InputDecoration(hintText: 'Entrer le titre de la tâche'),
                   ),
                   actions: <Widget>[
                     TextButton(
                       onPressed: () => Navigator.of(context).pop(null),
                       child: Text('Annuler'),
                     ),
                     TextButton(
                       onPressed: () {
                         Navigator.of(context).pop(context);
                       },
                       child: Text('Ajouter'),
                     ),
                   ],
                 );
               },
             );
             if (newTask != null) addTask(newTask);
           },
           child: Icon(Icons.add),
         ),
       );
     }
   }
   

5. Mise à jour de main.dart pour utiliser la page d'accueil

   // lib/main.dart
   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: 'Gestionnaire de Tâches',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: HomeScreen(),
       );
     }
   }
   

Exécution du projet

flutter run

Erreurs frequentes et debugging

1. Erreur de type

Message d'erreur :

type 'Null' is not a subtype of type 'String'

Code incorrect :

void sayHello(String name) {
  print("Hello, $name!");
}

sayHello(null); // Error: Null safety crash

Code correct :

void sayHello(String? name) {
  if (name != null) {
    print("Hello, $name!");
  } else {
    print("Hello, Guest!");
  }
}

sayHello(null); // Correctly handles null input

2. Erreur de syntaxe

Message d'erreur :

SyntaxError: Unexpected token '='

Code incorrect :

int x = 5;
x = 10; // Error: Syntax error

Code correct :

int x = 5;
x += 5; // Correct syntax for updating a variable

3. Erreur de négation

Message d'erreur :

The argument type 'bool?' can't be assigned to the parameter type 'bool'.

Code incorrect :

void check(bool? isTrue) {
  if (!isTrue) { // Error: Null safety crash
    print("False");
  }
}

check(null); // Error: Passing null to a non-nullable parameter

Code correct :

void check(bool? isTrue) {
  if (isTrue == false) { // Correctly checks for false
    print("False");
  } else {
    print("True or not provided");
  }
}

check(null); // Handles null input correctly

Pour aller plus loin

1. Dart Server-side Development : Explorez comment utiliser Dart pour le développement de serveurs avec packages comme shelf et http.

   https://dart.dev/guides/server

2. Flutter Packages : Découvrez les nombreux packages Flutter disponibles sur pub.dev pour accélérer le développement.

   https://pub.dev/flutter/packages

3. State Management with Provider : Apprenez à gérer l'état de votre application Flutter efficacement avec le package provider.

   https://flutter.dev/docs/development/data-and-state/state-mgmt/simple-lists

Défi pratique

• Projet de Blog : Créez une application mobile en utilisant Flutter pour un blog simple. L'application devrait permettre aux utilisateurs d'afficher la liste des articles, de créer de nouveaux articles et de les marquer comme favoris.

Bon appétit à votre apprentissage Dart ! N'hésitez pas à poser des questions ou à partager vos expériences dans les commentaires.