Kalender adalah alat penting dalam perencanaan dan pengaturan waktu. Dalam pengembangan aplikasi Flutter, kita dapat dengan mudah menampilkan kalender yang interaktif dan menarik menggunakan berbagai widget yang tersedia. Dalam artikel ini, kita akan menjelajahi langkah-langkah untuk menampilkan kalender di Flutter dengan antarmuka yang menarik dan fungsional.

Langkah 1: Mengimpor Dependensi

Langkah pertama adalah mengimpor dependensi yang diperlukan untuk menampilkan kalender di Flutter. Dalam file pubspec.yaml, tambahkan dependensi berikut:

dependencies:
  table_calendar: ^3.0.0

Setelah itu, jalankan perintah flutter pub get untuk mengunduh dependensi baru.

Langkah 2: Membuat Widget Kalender

Setelah dependensi diimpor, kita dapat membuat widget kalender di Flutter. Dalam widget yang ada, tambahkan kode berikut:

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

class CalendarScreen extends StatefulWidget {
  @override
  _CalendarScreenState createState() => _CalendarScreenState();
}

class _CalendarScreenState extends State<CalendarScreen> {
  CalendarFormat _calendarFormat = CalendarFormat.month;
  DateTime _focusedDay = DateTime.now();
  DateTime? _selectedDay;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kalender Flutter'),
      ),
      body: TableCalendar(
        firstDay: DateTime.utc(2023, 01, 01),
        lastDay: DateTime.utc(2030, 12, 31),
        focusedDay: _focusedDay,
        calendarFormat: _calendarFormat,
        onFormatChanged: (format) {
          setState(() {
            _calendarFormat = format;
          });
        },
        onDaySelected: (selectedDay, focusedDay) {
          setState(() {
            _selectedDay = selectedDay;
            _focusedDay = focusedDay;
          });
        },
        onPageChanged: (focusedDay) {
          _focusedDay = focusedDay;
        },
      ),
    );
  }
}

Kode di atas menunjukkan implementasi sederhana dari widget TableCalendar di dalam Flutter. Widget TableCalendar membutuhkan beberapa properti penting seperti firstDay, lastDay, focusedDay, calendarFormat, serta fungsi pemrosesan seperti onFormatChanged, onDaySelected, dan onPageChanged. Anda dapat menyesuaikan properti ini sesuai dengan kebutuhan Anda.

Langkah 3: Menampilkan Kalender di Aplikasi

Terakhir, Anda perlu menambahkan CalendarScreen ke dalam aplikasi Flutter Anda. Dalam widget MaterialApp, tentukan home sebagai CalendarScreen:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Aplikasi Kalender Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CalendarScreen(),
    );
  }
}

Dengan ini, Anda telah menampilkan kalender di aplikasi Flutter Anda. Anda dapat menjalankan aplikasi dan melihat antarmuka kalender yang dapat diinteraksikan. Anda dapat memilih tanggal, mengubah format