ShowDatePicker adalah salah satu widget di Flutter yang memungkinkan kita untuk menampilkan dialog untuk memilih tanggal. Ketika widget ini dipanggil, maka dialog akan muncul dan memungkinkan pengguna untuk memilih tanggal dari kalender.

Berikut ini adalah contoh implementasi sederhana dari ShowDatePicker:

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ShowDatePicker Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final DateTime picked = await showDatePicker(
              context: context,
              initialDate: DateTime.now(),
              firstDate: DateTime(2015, 8),
              lastDate: DateTime(2101),
            );
            if (picked != null) {
              print('Tanggal yang dipilih: $picked');
            }
          },
          child: Text('Pilih Tanggal'),
        ),
      ),
    );
  }
}

Pada contoh di atas, ketika tombol ditekan, fungsi showDatePicker akan dipanggil. Fungsi ini meminta BuildContext sebagai parameter yang digunakan untuk membangun dialog untuk memilih tanggal.

Selain itu, kita juga memberikan beberapa parameter seperti initialDate untuk menentukan tanggal awal yang akan ditampilkan, firstDate untuk menentukan tanggal pertama yang bisa dipilih, dan lastDate untuk menentukan tanggal terakhir yang bisa dipilih.

Ketika pengguna memilih tanggal dari dialog, maka variabel picked akan berisi nilai yang sesuai. Jika pengguna memilih untuk membatalkan dialog, maka nilai variabel picked akan menjadi null.

Dengan demikian, ketika pengguna memilih sebuah tanggal, maka pesan “Tanggal yang dipilih: …” akan ditampilkan di konsol bersama dengan tanggal yang dipilih.

ShowDatePicker juga dapat digunakan dalam TextFormFields untuk memungkinkan pengguna memilih tanggal langsung dari field input. Ini sangat berguna dalam formulir yang membutuhkan input tanggal.

Berikut ini adalah contoh implementasi sederhana dari ShowDatePicker pada TextFormField:

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatelessWidget {
  final _formKey = GlobalKey<FormState>();
  DateTime _selectedDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ShowDatePicker Demo'),
      ),
      body: Form(
        key: _formKey,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Tanggal Lahir',
                ),
                readOnly: true,
                onTap: () async {
                  final DateTime picked = await showDatePicker(
                    context: context,
                    initialDate: _selectedDate ?? DateTime.now(),
                    firstDate: DateTime(1900),
                    lastDate: DateTime.now(),
                  );
                  if (picked != null && picked != _selectedDate) {
                    _selectedDate = picked;
                    print('Tanggal yang dipilih: $_selectedDate');
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Pada contoh di atas, kita menambahkan sebuah TextFormField untuk input tanggal. Ketika pengguna mengetuk TextFormField, maka fungsi showDatePicker akan dipanggil dan memungkinkan pengguna memilih tanggal.

Dalam fungsi showDatePicker, kita memberikan beberapa parameter seperti initialDate untuk menentukan tanggal awal yang akan ditampilkan, firstDate untuk menentukan tanggal pertama yang bisa dipilih, dan lastDate untuk menentukan tanggal terakhir yang bisa dipilih.

Jika pengguna memilih tanggal, maka nilai _selectedDate akan diubah dan pesan “Tanggal yang dipilih: …” akan ditampilkan di konsol bersama dengan tanggal yang dipilih.

Selain itu, kita juga menetapkan readOnly: true pada TextFormField untuk mencegah pengguna mengedit nilai tanggal secara langsung. Dengan demikian, pengguna hanya dapat memilih tanggal melalui dialog yang ditampilkan ketika TextFormField ditekan.