Home Android How to Use Date Picker in Flutter

How to Use Date Picker in Flutter

0
How to Use Date Picker in Flutter

Halo sobat Flutter! Pada artikel kali ini saya ingin membahas tentang “How to Use Date Picker in Flutter”

Date Picker adalah berupa pemilihan tanggal yang memungkinkan user dapat memilih rentang waktu dari kalender.

  1. Buat Class dengan nama Date Picker.
import 'package:flutter/material.dart';

class DatePicker extends StatefulWidget {
  const DatePicker({Key? key}) : super(key: key);

  @override
  _DatePickerState createState() => _DatePickerState();
}

class _DatePickerState extends State<DatePicker> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      
    );
  }
}

2. Kemudian tambahkan variabel dengan nama Date Picker.

DateTime? _dateTime;

3. Tambahkan variabel _dateTime pada widget DatePicker

import 'package:flutter/material.dart';

class DatePicker extends StatefulWidget {
  const DatePicker({Key? key}) : super(key: key);

  @override
  _DatePickerState createState() => _DatePickerState();
}

class _DatePickerState extends State<DatePicker> {

  //buat variabel pertama
  DateTime? _dateTime;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[

            //kedua buat codingan ini
            Text(_dateTime == null
                ? 'Nothing has been picked yet'
                : _dateTime.toString()),
          ],
        ),
      ),
    );
  }
}

3. Tambahkan Raised Button dan tambahkan widget showDatePicer()

RaisedButton(
              child: Text("Pick a date"),
              onPressed: () {
                showDatePicker(
                  context: context,
                  initialDate: DateTime.now(),
                  firstDate: DateTime(2000),
                  lastDate: DateTime(2099),
                ));
              },
            ),

Date Picker memiliki beberapa parameter seperti initialDate, firstDate, dan lastDate.

4. Terakhir tambahkan setState(); didalam Date Picker.

RaisedButton(
              child: Text("Pick a date"),
              onPressed: () {
                showDatePicker(
                  context: context,
                  initialDate: DateTime.now(),
                  firstDate: DateTime(2000),
                  lastDate: DateTime(2099),

                ).then((date) {  //tambahkan setState dan panggil variabel _dateTime.
                  setState(() {
                    _dateTime = date;
                  });
                });
              },
            ),

5. Berikut hasil running Date Picker Widget