×

Crée une application complète de gestion de taches avec Flutter et Firebase

Android iPhone Programmation

Crée une application complète de gestion de taches avec Flutter et Firebase

Dans ce tutoriel on va crée une application de gestion de tâches avec Flutter et Firebase.

Flutter est un Framework open source développé par Google qui permet de créer des applications mobiles, web et de bureau à partir d’un seul code source. Il est principalement utilisé pour développer des applications mobiles pour iOS et Android, mais il est également utilisé pour le développement web (avec Flutter for Web) et le développement de bureau (avec Flutter Desktop).

Assurez-vous d’avoir Flutter et Firebase installés sur votre système avant de commencer.

Étape 1 : Configuration de Firebase

  1. Créez un projet Firebase sur la console Firebase (https://console.firebase.google.com/).
  2. Configurez Firebase pour votre application Flutter en suivant les instructions fournies sur la console Firebase. Vous devrez télécharger le fichier google-services.json pour Android et le fichier GoogleService-Info.plist pour iOS et les placer dans les répertoires appropriés de votre projet Flutter.

Étape 2 : Configuration du projet Flutter

  1. Créez un nouveau projet Flutter en utilisant la commande flutter create task_manager.
  2. Ajoutez les dépendances Firebase à votre fichier pubspec.yaml :
dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^latest_version
  cloud_firestore: ^latest_version
  firebase_auth: ^latest_version

Assurez-vous de spécifier la dernière version pour ces dépendances en remplaçant latest_version par la version actuelle de chaque package Firebase.

  1. Exécutez flutter pub get pour récupérer les dépendances.
  2. Initialisez Firebase dans votre application en utilisant Firebase.initializeApp() dans la fonction main() de votre fichier main.dart. Voici un exemple :
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Étape 3 : Création de l’interface utilisateur

1. main.dart

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'screens/task_list_screen.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

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

2. task_list_screen.dart

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

class TaskListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Task List'),
      ),
      body: StreamBuilder(
        stream: FirebaseFirestore.instance.collection('tasks').snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return CircularProgressIndicator();
          }
          final tasks = snapshot.data.docs;
          List<Widget> taskWidgets = [];
          for (var task in tasks) {
            // Créez des widgets pour afficher les tâches.
            // ...
          }
          return ListView(
            children: taskWidgets,
          );
        },
      ),
    );
  }
}

3. add_task_screen.dart (Écran pour ajouter une tâche)

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

class AddTaskScreen extends StatelessWidget {
  final TextEditingController _taskController = TextEditingController();

  void addTask(String taskName) {
    FirebaseFirestore.instance.collection('tasks').add({
      'name': taskName,
      'completed': false,
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add Task'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _taskController,
              decoration: InputDecoration(labelText: 'Task Name'),
            ),
            ElevatedButton(
              onPressed: () {
                String taskName = _taskController.text;
                if (taskName.isNotEmpty) {
                  addTask(taskName);
                  Navigator.pop(context);
                }
              },
              child: Text('Add Task'),
            ),
          ],
        ),
      ),
    );
  }
}

4. main.dart (avec routage entre les écrans)

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'screens/task_list_screen.dart';
import 'screens/add_task_screen.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Task Manager',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => TaskListScreen(),
        '/add_task': (context) => AddTaskScreen(),
      },
    );
  }
}

Étape 4 : Gestion de l’authentification (en option)

Si vous souhaitez ajouter une fonctionnalité d’authentification à votre application, vous pouvez utiliser firebase_auth pour gérer l’inscription et la connexion des utilisateurs.

Étape 5 : Test et déploiement

Testez votre application sur des émulateurs ou des appareils physiques pour vous assurer qu’elle fonctionne comme prévu. Ensuite, vous pouvez la déployer sur le Google Play Store (Android) et l’App Store (iOS) en suivant les étapes appropriées pour chaque plateforme.

Ceci est un tutoriel de base pour créer une application de gestion de tâches avec Flutter et Firebase. Vous devrez ajouter plus de fonctionnalités et de détails en fonction de vos besoins spécifiques. N’oubliez pas de consulter la documentation Flutter et Firebase pour obtenir des informations plus détaillées sur chaque étape

Related Posts

361 commentaires