Date Picker adalah komponen UI yang memungkinkan pengguna memilih tanggal melalui antarmuka yang ramah pengguna. Artikel ini akan membahas cara menggunakan Date Picker dalam aplikasi Flutter.

Apa itu Date Picker?

Date Picker adalah widget Flutter yang menyediakan antarmuka pengguna untuk memilih tanggal. Ini memungkinkan pengguna untuk memilih tanggal dengan cepat dan mudah, membuatnya ideal untuk formulir atau bagian dari aplikasi yang memerlukan input tanggal.

Berikut contoh implementasinya

Output :

Source code :

main.dart

void main() {
  runApp(MaterialApp(
    home: DatePickerExample(),
  ));
}

datepicker.dart

import 'package:flutter/material.dart';

class DatePickerExample extends StatefulWidget {
  @override
  _DatePickerExampleState createState() => _DatePickerExampleState();
}

class _DatePickerExampleState extends State<DatePickerExample> {
  DateTime _selectedDate = DateTime.now(); // Menyimpan tanggal yang dipilih
  DateTime firstdate = DateTime(1950);
  DateTime lastdate = DateTime.now();

  // Metode untuk menampilkan Date Picker
  Future<void> _selectDate(BuildContext context) async {
    final DateTime? picked = await showDatePicker(
      keyboardType: TextInputType.datetime,
        context: context, firstDate: firstdate, lastDate: lastdate);

    if (picked != null && picked != _selectedDate) {
      // Jika pengguna memilih tanggal, update nilai _selectedDate
      setState(() {
        _selectedDate = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.lightBlueAccent,
        title: Text('Date Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Tanggal yang Dipilih:',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 10),
            Text(
              '${_selectedDate.toLocal()}'.split(' ')[0],
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            MaterialButton(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(15)),
              color: Colors.lightBlueAccent,
              onPressed: () => _selectDate(context),
              child: Text('Pilih Tanggal'),
            ),
          ],
        ),
      ),
    );
  }
}

Sekarang, aplikasi Anda harus berjalan, dan Anda dapat mencoba dan melihat bagaimana date picker berfungsi.

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil mengimplementasikan date picker dalam aplikasi Flutter Anda. Anda dapat menyesuaikan kode ini sesuai dengan kebutuhan proyek Anda. Semoga bermanfaat!