Pada pembahasan flutter kali ini menjelaskan bagaimana cara mendapatkan satuan waktu dan menampilkannya dalam aplikasi flutter. Di sini kita akan menggunakan Class DateTime.

Langkah -langkah yang harus dilakukan:

• Buat sebuah projet baru pad flutter dan beri nama project sesuai keinginan.
• Berikut ini Code yang akan kita masukkan pada file main.dart :

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

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'),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Berikut ini adalah hasil yang di run di web :

• ini hasil tampilan awal ketika berhasil dirunning

• hasil ketika mengklik button Selected Date:

• hasil ketika mengklik button Selected TIme :