Image Load

Hello world, 

Sebelumnya saya pernah membahas mengenai date picker yang digunakan untuk membuat form inputan yang berfungsi untuk mengisi data dalam bentuk tanggal (yang bisa dilihat di sini). Nah berbeda dari date picker, kali ini saya akan membahas mengenai month picker. Apa bedanya? Perbedaannya adalah pada format data yang ditampilkan. Date picker menampilkan data dalam bentuk tanggal bulan dan tahun (yyyy-mm-dd) sedangkan month picker dalam bentuk bulan dan tahun saja (yyyy-mm). Akan tetapi pada dasarnya data yang didapat dari date picker dan month picker memiliki format yang sama yaitu yyyy-MM-dd HH:mm:ss hanya saja untuk month picker data tanggal selalu terisi tanggal 01. Mari kita coba ikuti contoh berikut.

Langkah pertama install pada pubspec.yaml

dependencies:
  month_picker_dialog: ^0.4.0


Buat halaman seperti 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"),
      ),
    );
  }
}


Import pada file dart kalian.

import 'package:month_picker_dialog/month_picker_dialog.dart';


Inisiasi data tanggal yang akan disimpan.

DateTime selectedDate = DateTime.now();

Buat sebuah function/void seperti berikut.

_selectMonth(BuildContext context) async {
    showMonthPicker(
      context: context,
      firstDate: DateTime(DateTime.now().year - 1, 5),
      lastDate: DateTime(DateTime.now().year + 1, 9),
      initialDate: selectedDate,
      locale: Locale("id"),
    ).then((date) {
      if (date != null) {
        setState(() {
          selectedDate = date;
          print(selectedDate);
        });
      }
    });
  }


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

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

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

class _HalamanDateState extends State {
  DateTime selectedDate = DateTime.now();
  _selectMonth(BuildContext context) async {
    showMonthPicker( context: context, firstDate: DateTime(DateTime.now().year - 1, 5), lastDate: DateTime(DateTime.now().year + 1, 9), initialDate: selectedDate, locale: Locale("id"), ).then((date) { if (date != null) { setState(() { selectedDate = date; print(selectedDate); }); } });
  }

  @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: () {
                _selectMonth(context);
              },
              child: Text('Pilih Tanggal'),
            )
          ],
        ),
      ),
    );
  }
}


Selamat mencoba :)