Datumsangaben mit DateFormat

Teil des Abschnitts Daten und Netzwerk der Flutter-Journey von Coddy. Lektion 20 von 27.

Server senden Datumsangaben in einer festen Textform, zum Beispiel "2026-11-03T18:30:00": Jahr, Monat, Tag und dann die Uhrzeit. DateTime.parse wandelt diesen Text in ein DateTime um. Unformatiert sieht ein DateTime so aus: 2026-11-03 18:30:00.000 – das möchte niemand auf einem Smartphone lesen.

Das Paket intl formatiert Datumsangaben für Menschen. DateFormat verwendet ein Muster aus Buchstaben, die für die Bestandteile eines Datums stehen:

import 'package:intl/intl.dart';

final day = DateTime.parse('2026-11-03T18:30:00');
DateFormat('EEE, MMM d').format(day)    // Di, Nov 3
DateFormat('EEEE d MMMM').format(day)   // Dienstag 3 November

E steht für den Wochentag, M für den Monat und d für den Tag des Monats. Mehr Buchstaben ergeben eine längere Form: EEE ist Tue, EEEE ist Tuesday, MMM ist Nov, MMMM ist November, MM ist 11. Groß- und Kleinschreibung ist wichtig: D steht für den Tag des Jahres. Kommas und Leerzeichen im Muster bleiben unverändert.

Aufgabe

Einfach

Die Ereignisliste zeigt rohe Datumsangaben. Formatiere jedes Datum mit DateFormat, sodass das erste Ereignis Tue, Nov 3 lautet. Der Import von intl ist bereits vorhanden.

Probier es selbst

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

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Daten und Netzwerk

Übe selbstständig: Online-Flutter-Compiler