Tanggal dengan DateFormat

Termasuk bagian Data dan Jaringan dalam perjalanan Flutter di Coddy. Pelajaran 20 dari 27.

server mengirim tanggal sebagai teks dengan format tetap, seperti "2026-11-03T18:30:00": tahun, bulan, hari, lalu waktu. DateTime.parse mengubah teks itu menjadi DateTime. Jika dicetak begitu saja, DateTime terlihat seperti 2026-11-03 18:30:00.000, yang sulit dibaca di ponsel.

Package intl memformat tanggal agar mudah dibaca. DateFormat menggunakan pola, yaitu huruf yang mewakili bagian-bagian tanggal:

import 'package:intl/intl.dart';

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

E adalah nama hari, M adalah bulan, dan d adalah tanggal. Huruf yang lebih banyak menghasilkan bentuk yang lebih panjang: EEE adalah Tue, EEEE adalah Tuesday, MMM adalah Nov, MMMM adalah November, MM adalah 11. Huruf kapital berpengaruh: D adalah hari dalam tahun. Koma dan spasi dalam pola tetap seperti semula.

Tantangan

Mudah

Daftar acara menampilkan tanggal mentah. Format setiap tanggal dengan DateFormat, sehingga acara pertama terbaca Tue, Nov 3. Import intl sudah tersedia.

Coba sendiri

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

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Data dan Jaringan

Latihan sendiri: Compiler Flutter online