Projets complets

Application connectée avec HTTP

Objectif : Créer une application qui communique avec une API REST.

Exemple complet - Liste d’articles :

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MainScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MainScreen extends StatelessWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Articles')),
      body: FutureBuilder<List<Post>>(
        future: _loadPosts(),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return const Text(
              'Erreur',
              style: TextStyle(color: Colors.red)
            );
          }

          if (!snapshot.hasData) {
            return const Center(
              child: CircularProgressIndicator()
            );
          }

          final posts = snapshot.data!;
          return ListView.builder(
            itemCount: posts.length,
            itemBuilder: (context, index) {
              final post = posts[index];
              return ListTile(
                title: Text(
                  post.title,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
                subtitle: Text(
                  post.body,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              );
            },
          );
        },
      ),
    );
  }

  Future<List<Post>> _loadPosts() async {
    final result = await http.get(
      Uri.parse('https://jsonplaceholder.typicode.com/posts'),
    );

    return List.from(jsonDecode(result.body))
        .map((e) => Post.fromMap(e))
        .toList();
  }
}

class Post {
  final int id;
  final int userId;
  final String title;
  final String body;

  Post({
    required this.id,
    required this.userId,
    required this.title,
    required this.body,
  });

  Post.fromMap(Map<String, dynamic> data)
      : id = data['id'],
        userId = data['userId'],
        title = data['title'],
        body = data['body'];
}

Service et Controller Pattern

TP Architecture : Implémentation du pattern Service/Controller

Composants à créer :

• DestinationService : Gestion des données
• DestinationController : Logique métier et état

Gestion d’état avec sealed classes :

sealed class AsyncTask<T> {}

class PendingTask<T> extends AsyncTask<T> {}

class TaskError<T> extends AsyncTask<T> {
  final String error;
  TaskError([this.error = 'Error !']);
}

class AsyncResult<T> extends AsyncTask<T> {
  final T data;
  AsyncResult(this.data);
}