Thời gian với DateFormat

Thuộc phần Dữ liệu và mạng trong hành trình Flutter của Coddy. Bài học 21 trên 27.

Cùng một DateTime cũng lưu thời gian, còn DateFormat định dạng thời gian bằng các ký tự riêng:

final start = DateTime.parse('2026-11-03T18:30:00');
DateFormat('h:mm a').format(start)   // 6:30 PM
DateFormat('HH:mm').format(start)    // 18:30

h là giờ theo đồng hồ 12 giờ, còn H là giờ theo đồng hồ 24 giờ, mm là phút, và a thêm AM hoặc PM. Hai chữ cái giữ số 0 ở đầu: HH viết 9 giờ thành 09.

Hãy chú ý chữ hoa một lần nữa. mm viết thường là phút, còn MM viết hoa là tháng: h:MM a chuyển 6:30 PM trong tháng 11 thành 6:11 PM, vì tháng 11 có số tháng là 11.

Thử thách

Dễ

Hiển thị thời gian bắt đầu của từng sự kiện: thêm văn bản trailing có giờ vào mỗi ListTile, để sự kiện đầu tiên hiển thị 6:30 PM.

Tự làm thử

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(DateFormat('EEE, MMM d').format(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),
    );
  }
}