Dates avec DateFormat

Fait partie de la section Données et réseau du Journey Flutter de Coddy. Leçon 20 sur 27.

Les serveurs envoient les dates sous forme de texte dans un format fixe, comme "2026-11-03T18:30:00" : année, mois, jour, puis heure. DateTime.parse transforme ce texte en DateTime. Affiché tel quel, un DateTime ressemble à 2026-11-03 18:30:00.000, ce que personne n’a envie de lire sur un téléphone.

Le package intl met les dates en forme pour les rendre lisibles. DateFormat prend un motif, c’est-à-dire des lettres qui représentent les différentes parties d’une date :

import 'package:intl/intl.dart';

final day = DateTime.parse('2026-11-03T18:30:00');
DateFormat('EEE, MMM d').format(day)    // mar., nov. 3
DateFormat('EEEE d MMMM').format(day)   // mardi 3 novembre

E représente le jour de la semaine, M le mois et d le jour du mois. Davantage de lettres donnent une forme plus longue : EEE correspond à Tue, EEEE à Tuesday, MMM à Nov, MMMM à November, MM à 11. Les majuscules comptent : D représente le jour de l’année. Les virgules et les espaces du motif sont conservés tels quels.

Défi

Facile

La liste des événements affiche des dates brutes. Formate chacune d’elles avec DateFormat, afin que le premier événement affiche Tue, Nov 3. L’importation de intl est déjà présente.

Essayez vous-même

import 'dart:convert';

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

import 'api.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class EventsScreen extends StatefulWidget {
  const EventsScreen({super.key});

  @override
  State<EventsScreen> createState() => _EventsScreenState();
}

class _EventsScreenState extends State<EventsScreen> {
  late Future<List<Event>> _events;

  @override
  void initState() {
    super.initState();
    _events = loadEvents();
  }

  Future<List<Event>> loadEvents() async {
    final body = await fetch('/events');
    final items = jsonDecode(body) as List<dynamic>;
    return items.map((item) => Event.fromJson(item as Map<String, dynamic>)).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Events')),
      body: FutureBuilder<List<Event>>(
        future: _events,
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(child: Text('Could not load: ${snapshot.error}'));
          }
          if (snapshot.hasData) {
            final events = snapshot.data!;
            return ListView.builder(
              itemCount: events.length,
              itemBuilder: (context, index) {
                final event = events[index];
                return ListTile(
                  title: Text(event.title),
                  subtitle: Text('${event.start}'),
                );
              },
            );
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

class Event {
  Event({required this.title, required this.start});

  final String title;
  final DateTime start;

  factory Event.fromJson(Map<String, dynamic> json) {
    return Event(
      title: json['title'] as String,
      start: DateTime.parse(json['start'] as String),
    );
  }
}