Date con DateFormat

Fa parte della sezione Dati e rete del percorso Flutter di Coddy. Lezione 20 di 27.

I server inviano le date come testo in un formato fisso, ad esempio "2026-11-03T18:30:00": anno, mese, giorno, poi l’ora. DateTime.parse trasforma quel testo in un DateTime. Così com’è, un DateTime viene visualizzato come 2026-11-03 18:30:00.000, un formato che nessuno vorrebbe leggere sul telefono.

Il pacchetto intl formatta le date per le persone. DateFormat accetta un pattern, cioè lettere che rappresentano le parti di una data:

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)   // martedì 3 novembre

E indica il giorno della settimana, M il mese e d il giorno del mese. Più lettere danno una forma più estesa: EEE è Tue, EEEE è Tuesday, MMM è Nov, MMMM è November, MM è 11. Le maiuscole contano: D indica il giorno dell’anno. Le virgole e gli spazi nel pattern vengono mantenuti così come sono.

Sfida

Facile

L’elenco degli eventi mostra date non formattate. Formatta ciascuna con DateFormat, così il primo evento sarà visualizzato come Tue, Nov 3. L’importazione di intl è già presente.

Provalo tu

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),
    );
  }
}

Mettiti alla prova

Questa lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.

Tutte le lezioni di Dati e rete

Esercitati da solo: Compilatore Flutter online