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.
- 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