[Flutter][68] Form (Bagian 6) Date Picker pada Flutter

Tuesday, 01 Dec 2020 | By Riza

Image Load

Hello world, 

Kadang kita menemukan kasus dimana kita harus memasang form untuk menginput data dalam bentuk tanggal/bulan/tahun. Saat itulah kita membutuhkan datepicker. Datepicker merupakan bagian dari form yang berfungsi untuk menampilkan pilihan tanggal yang nantinya dapat memudahkan pengguna dalam mengisi data dalam bentuk tanggal. Pada flutter kita memerlukan fungsi bernama showDatePicker. Berikut tahapan yang harus dilakukan.

Tahap 1.

Buat halaman sederhana serti berikut.

import 'package:flutter/material.dart';

class HalmamanDate extends StatefulWidget {
  @override
  _HalmamanDateState createState() => _HalmamanDateState();
}

class _HalmamanDateState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Home"),
      ),
      body: Center(
        child: Text("Home"),
      ),
    );
  }
}


Tahap 2.

Inisiasi data tanggal yang akan disimpan.

  DateTime selectedDate = DateTime.now();


Tahap 3.

Buat sebuah function/void seperti berikut.

  _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
      context: context,
      initialDate: selectedDate, // Refer step 1
      firstDate: DateTime(2000),
      lastDate: DateTime(3000),
    );
    if (picked != null && picked != selectedDate)
      setState(() {
        selectedDate = picked;
      });
  }


Tahap 4.

Tambahkan tombol untuk menampilkan datepicker yang fullcode hasilnya menjadi seperti berikut.

import 'package:flutter/material.dart';

class HalamanDate extends StatefulWidget {
  @override
  _HalamanDateState createState() => _HalamanDateState();
}

class _HalamanDateState extends State {
  DateTime selectedDate = DateTime.now();
  _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
      context: context,
      initialDate: selectedDate, // Refer step 1
      firstDate: DateTime(2000),
      lastDate: DateTime(3000),
    );
    if (picked != null && picked != selectedDate)
      setState(() {
        selectedDate = picked;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Halaman Datepicker"),
      ),
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: Text(
                selectedDate.toString(),
                style: TextStyle(fontSize: 20.0),
              ),
            ),
            RaisedButton(
              onPressed: () {
                _selectDate(context);
              },
              child: Text('Pilih Tanggal'),
            )
          ],
        ),
      ),
    );
  }
}


Selamat mencoba :)