updaet costum header
This commit is contained in:
parent
283f2b1942
commit
c36077c716
|
@ -1,4 +1,5 @@
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import '../../widgets/costum_header.dart';
|
||||||
|
|
||||||
class ControlScreen extends StatefulWidget {
|
class ControlScreen extends StatefulWidget {
|
||||||
const ControlScreen({super.key});
|
const ControlScreen({super.key});
|
||||||
|
@ -26,10 +27,8 @@ class _ControlScreenState extends State<ControlScreen> {
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
appBar: AppBar(
|
appBar: const CustomHeader(
|
||||||
title: const Text('Kontrol Sistem'),
|
deviceName: 'HamaGuard', // ini wajib diisi
|
||||||
backgroundColor: Colors.green[700],
|
|
||||||
centerTitle: true,
|
|
||||||
),
|
),
|
||||||
body: Padding(
|
body: Padding(
|
||||||
padding: const EdgeInsets.all(20),
|
padding: const EdgeInsets.all(20),
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import 'dart:math';
|
import 'dart:math';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import '../../widgets/thermal_grid.dart';
|
import '../../widgets/thermal_grid.dart';
|
||||||
|
import '../../widgets/costum_header.dart';
|
||||||
|
|
||||||
class DashboardScreen extends StatelessWidget {
|
class DashboardScreen extends StatelessWidget {
|
||||||
const DashboardScreen({super.key});
|
const DashboardScreen({super.key});
|
||||||
|
@ -19,6 +20,9 @@ class DashboardScreen extends StatelessWidget {
|
||||||
|
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
backgroundColor: Colors.grey[100],
|
backgroundColor: Colors.grey[100],
|
||||||
|
appBar: const CustomHeader(
|
||||||
|
deviceName: 'HamaGuard', // ini wajib diisi
|
||||||
|
),
|
||||||
body: SingleChildScrollView(
|
body: SingleChildScrollView(
|
||||||
padding: const EdgeInsets.all(16.0),
|
padding: const EdgeInsets.all(16.0),
|
||||||
child: Column(
|
child: Column(
|
||||||
|
@ -26,7 +30,8 @@ class DashboardScreen extends StatelessWidget {
|
||||||
// Thermal Sensor dalam Card
|
// Thermal Sensor dalam Card
|
||||||
Card(
|
Card(
|
||||||
elevation: 4,
|
elevation: 4,
|
||||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
|
shape: RoundedRectangleBorder(
|
||||||
|
borderRadius: BorderRadius.circular(16)),
|
||||||
child: Padding(
|
child: Padding(
|
||||||
padding: const EdgeInsets.all(16.0),
|
padding: const EdgeInsets.all(16.0),
|
||||||
child: Column(
|
child: Column(
|
||||||
|
@ -84,24 +89,6 @@ class DashboardScreen extends StatelessWidget {
|
||||||
icon: Icons.speaker,
|
icon: Icons.speaker,
|
||||||
color: Colors.green,
|
color: Colors.green,
|
||||||
),
|
),
|
||||||
|
|
||||||
const SizedBox(height: 20),
|
|
||||||
|
|
||||||
// Tombol pengusir manual
|
|
||||||
ElevatedButton.icon(
|
|
||||||
onPressed: () {
|
|
||||||
ScaffoldMessenger.of(context).showSnackBar(
|
|
||||||
const SnackBar(content: Text('Fitur pengusir manual belum tersedia')),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
icon: const Icon(Icons.play_arrow),
|
|
||||||
label: const Text('Aktifkan Pengusir Manual'),
|
|
||||||
style: ElevatedButton.styleFrom(
|
|
||||||
backgroundColor: Colors.green[700],
|
|
||||||
minimumSize: const Size.fromHeight(48),
|
|
||||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
|
@ -0,0 +1,115 @@
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:intl/intl.dart';
|
||||||
|
|
||||||
|
class CustomHeader extends StatefulWidget implements PreferredSizeWidget {
|
||||||
|
final String deviceName;
|
||||||
|
final VoidCallback? onNotificationTap;
|
||||||
|
|
||||||
|
const CustomHeader({
|
||||||
|
super.key,
|
||||||
|
required this.deviceName,
|
||||||
|
this.onNotificationTap,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Size get preferredSize => const Size.fromHeight(kToolbarHeight + 24);
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<CustomHeader> createState() => _CustomHeaderState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _CustomHeaderState extends State<CustomHeader> {
|
||||||
|
late String _dateString;
|
||||||
|
late final ticker;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
_updateDate();
|
||||||
|
// Update setiap hari (atau bisa sesuaikan interval jika perlu)
|
||||||
|
ticker = Stream.periodic(const Duration(minutes: 1)).listen((_) {
|
||||||
|
if (mounted) {
|
||||||
|
_updateDate();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
void _updateDate() {
|
||||||
|
final now = DateTime.now();
|
||||||
|
// Format hanya tanggal: Contoh "Fri, 16 May 2025"
|
||||||
|
final formatted = DateFormat('EEE, dd MMM yyyy').format(now);
|
||||||
|
setState(() {
|
||||||
|
_dateString = formatted;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
ticker.cancel();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return AppBar(
|
||||||
|
backgroundColor: Colors.transparent,
|
||||||
|
elevation: 0,
|
||||||
|
automaticallyImplyLeading: false,
|
||||||
|
titleSpacing: 16,
|
||||||
|
title: Row(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
// Nama alat dan tanggal di kiri
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.only(right: 8.0),
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
widget.deviceName,
|
||||||
|
style: const TextStyle(
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: Colors.black87,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 4),
|
||||||
|
Text(
|
||||||
|
_dateString,
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 12,
|
||||||
|
color: Colors.grey[600],
|
||||||
|
height: 1.2,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
|
||||||
|
const Spacer(),
|
||||||
|
|
||||||
|
// Lonceng dalam lingkaran abu-abu lembut
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.only(left: 8.0),
|
||||||
|
child: Material(
|
||||||
|
color: Colors.grey.shade200,
|
||||||
|
shape: const CircleBorder(),
|
||||||
|
child: IconButton(
|
||||||
|
padding: const EdgeInsets.all(8),
|
||||||
|
icon: const Icon(Icons.notifications_none, color: Colors.black87, size: 28),
|
||||||
|
onPressed: widget.onNotificationTap ??
|
||||||
|
() {
|
||||||
|
ScaffoldMessenger.of(context).showSnackBar(
|
||||||
|
const SnackBar(content: Text('Notifikasi belum tersedia')),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
splashRadius: 24,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -75,6 +75,14 @@ packages:
|
||||||
description: flutter
|
description: flutter
|
||||||
source: sdk
|
source: sdk
|
||||||
version: "0.0.0"
|
version: "0.0.0"
|
||||||
|
intl:
|
||||||
|
dependency: "direct main"
|
||||||
|
description:
|
||||||
|
name: intl
|
||||||
|
sha256: "3bc132a9dbce73a7e4a21a17d06e1878839ffbf975568bc875c60537824b0c4d"
|
||||||
|
url: "https://pub.dev"
|
||||||
|
source: hosted
|
||||||
|
version: "0.18.1"
|
||||||
leak_tracker:
|
leak_tracker:
|
||||||
dependency: transitive
|
dependency: transitive
|
||||||
description:
|
description:
|
||||||
|
|
|
@ -31,6 +31,9 @@ dependencies:
|
||||||
flutter:
|
flutter:
|
||||||
sdk: flutter
|
sdk: flutter
|
||||||
|
|
||||||
|
intl: ^0.18.0
|
||||||
|
|
||||||
|
|
||||||
# The following adds the Cupertino Icons font to your application.
|
# The following adds the Cupertino Icons font to your application.
|
||||||
# Use with the CupertinoIcons class for iOS style icons.
|
# Use with the CupertinoIcons class for iOS style icons.
|
||||||
cupertino_icons: ^1.0.8
|
cupertino_icons: ^1.0.8
|
||||||
|
|
Loading…
Reference in New Issue