Posts

Bismillahirahmanirrahim,

Terima kasih kepada sahabat udacoding yang selalu setia membaca blog ini, postingan kali ini kita akan membahas cara membuat Date & Time Picker.

Berikut langkah-langkah yang akan kita jalankan :

Pada halaman main.dart,

Import package material.dart dan arahkan halaman pada home ke class MyApp

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: MyApp(),
  debugShowCheckedModeBanner: false,
));

Berikutnya kita akan membuat class MyApp dengan Statefulwidget dimana sifat stateful widget ini dinamis dan dapat diperbaharui datanya sesuai dengan kebutuhan.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  //buat type data selectDate dan selectedTime

  DateTime selectedDate = DateTime.now();
  TimeOfDay selectedTime = TimeOfDay.now();


  //fungsi untuk mengload Data pada tanggal

  Future<Null> _selectedDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: selectedDate.subtract(Duration(days: 30)),
        lastDate: DateTime(selectedDate.year + 1));
    if (picked != null && picked != selectedDate) {
      setState(() {
        selectedDate = picked;
      });
    }
  }

  //fungsi untuk mengload Data pada waktu

  Future<Null> _selectedTime(BuildContext context) async {
    final TimeOfDay picked_time = await showTimePicker(
        context: context,
        initialTime: selectedTime,
        builder: (BuildContext context, Widget child) {
          return MediaQuery(
            data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
            child: child,
          );
        });

    if (picked_time != null && picked_time != selectedTime)
      setState(() {
        selectedTime = picked_time;
      });
  }

Kemudian pada Widget Build, Widget ini berfungsi untuk menampilkan informasi  struktur dasar material design pada halaman, pada Body terdapat Padding Column dan Row.

@override
Widget build(BuildContext context) {
  // TODO: implement build
  return Scaffold(
    appBar: AppBar(
      title: Text('Date & Time Picker'),
      centerTitle: true,
    ),
    body: Center(
      child: Padding(
        padding: const EdgeInsets.only(left: 10, right: 10, top: 10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Text(
                    "${selectedDate.toLocal()}".split(' ')[0],
                  style: TextStyle(
                    fontSize: 20,
                    foreground: Paint()
                      ..style = PaintingStyle.stroke
                      ..strokeWidth = 1
                      ..color = Colors.blue[700],
                  ),
                ),
                SizedBox(width: 10,),
                Text("${selectedTime.format(context)}",
                  style: TextStyle(
                    fontSize: 20,
                    foreground: Paint()
                      ..style = PaintingStyle.stroke
                      ..strokeWidth = 1
                      ..color = Colors.blue[700],
                  ),
                ),
              ],
            ),
            SizedBox(height: 50,),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[

              RaisedButton(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(5)
                ),
                color: Colors.blue,
                textColor: Colors.white,
                onPressed: () => _selectedDate(context),
                child: Text('Selected Date'),
              ),
              SizedBox(width: 10,),
              RaisedButton(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(5)
                ),
                color: Colors.blue,
                textColor: Colors.white,
                onPressed: () => _selectedTime(context),
                child: Text('Selected Time'),
              ),
            ],
            )
            //Text("Date Time Picker", style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),),
          ],
        ),
      ),
    ),
  );
}

Berikut capture demo dari Date Time Picker :

Menampilkan Date Picker, klik pada tombol Selected Date, disini pilih tanggal 24

• 

• 

• 

Selanjutnya menampilkan Waktu, select jam, menit, perubahan yang terjadi pada pukul 3:30 PM

• 

• 

• 

Demikian blog tutorial membuat Data Time Picker ini, semoga ilmu yang disampaikan bermanfaat.

Terima kasih.