Image Load

Hello world,

Sebelumnya saya pernah membuat postingan tentang menampilkan tanggal/waktu dengan DateFormat yang bisa dilihat di sini dan di sini. Selanjutnya kali ini saya akan coba menulis tentang bagaimana cara membuat dan menampilkan jam/waktu pada aplikasi kita. Pada dasarnya strukturnya adalah kita membuat timer yang akan mengambil waktu setiap detik menggunakan DateTime dan memperbaharui pada tampilan aplikasi menggunakan setState.

Langkah pertama kita buat dulu halamannya seperti berikut.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

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

class _MyAppState extends State<MyApp> {
var jam = 'JAM';

@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: const Text('Clock example app'),
),
body: Center(
child: Text(
jam,
style: TextStyle(fontSize: 40),
),
),
),
);
}
}

Selanjutnya kita buat void untuk mengambil waktu saat ini dengan DateTime dan memperbaharui variable "jam" dengan setState.

void startJam() {
Timer.periodic(new Duration(seconds: 1), (_) {
var tgl = new DateTime.now();
setState(() {
jam = tgl;
});
});
}

Jalankan void di atas dengan initstate.

@override
void initState() {
startJam();
// TODO: implement initState
super.initState();
}

Pada kasus ini kita akan perlu menambahkan dart:async pada halaman kita.

import 'dart:async';

Dari sini kita sudah menampilkan waktu dalam format lengkap yaitu tgl dan jam. Selanjutnya kita tinggal ubah saja formatnya menggunakan Dateformat dengan menambahkan package intl. lihat di sini. Lalu kita ubah void kita seperti berikut.

void startJam() {
Timer.periodic(new Duration(seconds: 1), (_) {
var tgl = new DateTime.now();
var formatedjam = new DateFormat.Hms().format(tgl);
setState(() {
jam = formatedjam;
});
});
}

FormatedJam di sini saya tentukan formatnya menjadi Hms yaitu Jam Menit dan Detik saja. jika ingin format yang lain bisa disesuaikan sesuai keinginan. Dan full codenya akan menjadi seperti berikut.

import 'dart:async';
import 'dart:core';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

void main() => runApp(new MyApp());

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

class _MyAppState extends State<MyApp> {
var jam = '';
void startJam() {
Timer.periodic(new Duration(seconds: 1), (_) {
var tgl = new DateTime.now();
var formatedjam = new DateFormat.Hms().format(tgl);
setState(() {
jam = formatedjam;
});
});
}

@override
void initState() {
startJam();
// TODO: implement initState
super.initState();
}

@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: const Text('Clock example app'),
),
body: Center(
child: Text(
jam,
style: TextStyle(fontSize: 40),
),
),
),
);
}
}

Preview :


Selamat mencoba :)