Hai Teman Koding, pada tutorial Flutter Bahasa Indonesia series yang ke-20, kita akan mempelajari mengenai bagaimana cara menampilkan date picker (Showing Date Picker) dan mengambil value dari Date Picker (Get Value Date Picker).
Show and Get DatePicker Flutter
Show and Get DatePicker Flutter
Date Picker sendiri merupakan salah satu widget Flutter yang amat penting pasalnya, bila kamu berhubungan dengan waktu, tanggal, membuat booking date dan hal yang berhubungan dengan tanggal lainnya kamu perlu menggunakan Date Picker.

Apa Yang Akan Kita Pelajari?

1. Membuat Project Baru Flutter
2. Memulai Koding Date Picker Flutter
3. Penjelasan Kode Date Picker Flutter

Membuat Project Baru Flutter

Bagi kamu yang belum membuat project Flutter, silahkan buka terminal atau cmd kamu dan ketikan perintah di bawah ini :

flutter create date_picker

Memulai Koding Date Picker Flutter

Setelah kamu berhasil membuat project Flutter baru, silahkan buka project mu di Text Editor atau IDE favoritmu dan silahkan ubah kode di file lib/main.dart dan ubah kodingannya menjadi seperti kode flutter di bawah ini:

Jika kamu telah mengubah kode di atas, silahkan jalankan project flutter mu dengan perintah :

flutter run

Dan jika berhasil maka tampilan output aplikasi Flutter yang kita buat akan seperti gambar di bawah ini :

Show and Get DatePicker Flutter
Show and Get DatePicker Flutter 
Show and Get DatePicker Flutter
Show and Get DatePicker Flutter




Penjelasan Kode Date Picker Flutter

  // Variable/State untuk mengambil tanggal
  DateTime selectedDate = DateTime.now();
Potongan kode diatas berfungsi untuk initisial variable/state DateTime

//  Initial SelectDate FLutter
  Future<Null> _selectDate(BuildContext context) async {
    // Initial DateTime FIinal Picked
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(2015, 8),
        lastDate: DateTime(2101));
    if (picked != null && picked != selectedDate)
      setState(() {
        selectedDate = picked;
      });
  }

Kemudian kode di atas berfungsi membuat Asycnronous Function untuk membuat Date Picker

Text("${selectedDate.toLocal()}".split(' ')[0]),
            SizedBox(height: 20.0,),
            RaisedButton(
              onPressed: () => {
                _selectDate(context),
                print(selectedDate.day + selectedDate.month + selectedDate.year )
              },
Dan terakhir kita memanggil Function tersebut dan menampilkannya dala Widget Text 

Sekian semoga tutorial Date Picker Flutter kali ini dapat bermanfaat dan membantu kamu yang sedang mempelajari tutorail Flutter Bahasa Indonesia. Happy Coding From Konsep Koding.

 Baca Tutorial Flutter Dart KonsepKoding Lainnya:
#11 Tutorial Flutter Alert Dialog
#12 Tutorial Menampilkan Gambar Pada Flutter
#13 Tutorial Flutter Membuat Top TabBarView
#14 Tutorial Flutter Membuat Bottom TabBarView
#15 Tutorial Flutter Membuat Drawer Navigation
#16 Tutorial Flutter Membuat Menu Dengan Row
#17 Tutorial Flutter Membuat Stepper Schedule
#18 Tutorial Flutter Membuat CircularProgressIndicator
#19 Tutorial Flutter Membuat SilverAppBar