Assalamualaikum sobat Baraja, kali ini mimin akan berbagi ilmu lagi tentang fungsi showDatePicker() dan showTimePicker(), nahh apa sih itu?

Okee jadi gini, flutter itu sendiri tidak menyediakan kelas khusus untuk membuat komponen mengenai tanggal dan waktu pada layar aplikasi, namun flutter sudah menyediakan fungsi showDatePicker() dan showTimePicker() dan widget-widegtnya.

Ooke cuss kita buat methode showDatePicker() untuk buat pilihan tanggal atau sering disebut kalender

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class ShowDatePicker extends StatefulWidget {
  @override
  _ShowDatePickerState createState() => _ShowDatePickerState();
}

class _ShowDatePickerState extends State {
  DateTime date = DateTime.now();
  Future selectDate(BuildContext context) async {
    final DateTime selected = await showDatePicker(
        context: context,
        initialDate: this.date,
        firstDate: DateTime(2021),
        lastDate: DateTime(2023));

    if (selected != null && selected != this.date) {
      setState(() {
        selected;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo show DatePicker'),
      ),
      body: Container(
        padding: EdgeInsets.all(30.0),
        child: Column(
          children: [
            Text('Tanggal yang dipilih : ${this.date.toString()}'),
            RaisedButton(
              child: Text('Pilih Tanggal'),
              onPressed: () {
                selectDate(context);
              },
            )
          ],
        ),
      ),
    );
  }
}

Maka outputnya akan seperti ini

.

.

.

.

.

.

.

.

Selanjutnya untuk membuat pilihan waktu silahkan gunakan fungsi showTimePicker(). Contoh penggunaannya silahkan ikuti dan jalankan script di bawah ini

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

void main() => runApp(MyApp());

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

class ShowTimePicker extends StatefulWidget {
  @override
  _ShowTimePickerState createState() => _ShowTimePickerState();
}

class _ShowTimePickerState extends State {
  TimeOfDay time = TimeOfDay.now();
  Future selectDate(BuildContext context) async {
    final TimeOfDay selected =
        await showTimePicker(context: context, initialTime: this.time);

    if (selected != null && selected != this.time) {
      setState(() {
        this.time = selected;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo showTimePicker()'),
      ),
      body: Container(
        padding: EdgeInsets.all(30.0),
        child: Column(
          children: [
            Text('Waktu yang dipilih : ${this.time.toString()}'),
            RaisedButton(
              child: Text('Pilih Waktu'),
              onPressed: () {
                selectDate(context);
              },
            )
          ],
        ),
      ),
    );
  }
}

Maka outputnya akan tampil seperti ini

.

.

.

.

.

.

.

Baik mungkin sekian pengenalan mengenai pembuatan komponen pilihan waktu dan tanggal menggunakan methode showDatePicker() dan showTimePicker(). Atas perhatiannya terima kasih😊