fix button elevated

This commit is contained in:
Muhammad Iqbal 2025-05-16 23:14:05 +07:00
parent b62772d4ae
commit 283f2b1942
8 changed files with 512 additions and 137 deletions

View File

@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'screens/splash/splash_screen.dart';
void main() {
runApp(const MyApp());
@ -7,119 +8,16 @@ void main() {
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
title: 'HamaGuard',
debugShowCheckedModeBanner: false,
theme: ThemeData(
// This is the theme of your application.
//
// TRY THIS: Try running your application with "flutter run". You'll see
// the application has a purple toolbar. Then, without quitting the app,
// try changing the seedColor in the colorScheme below to Colors.green
// and then invoke "hot reload" (save your changes or press the "hot
// reload" button in a Flutter-supported IDE, or press "r" if you used
// the command line to start the app).
//
// Notice that the counter didn't reset back to zero; the application
// state is not lost during the reload. To reset the state, use hot
// restart instead.
//
// This works for code too, not just values: Most code changes can be
// tested with just a hot reload.
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// TRY THIS: Try changing the color here to a specific color (to
// Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
// change color while the other colors stay the same.
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
//
// TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
// action in the IDE, or press "p" in the console), to see the
// wireframe for each widget.
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
home: const SplashScreen(), // << mulai dari splash
);
}
}

View File

@ -0,0 +1,80 @@
import 'package:flutter/material.dart';
class ControlScreen extends StatefulWidget {
const ControlScreen({super.key});
@override
State<ControlScreen> createState() => _ControlScreenState();
}
class _ControlScreenState extends State<ControlScreen> {
bool isAutoMode = true; // default: mode otomatis
void toggleMode() {
setState(() {
isAutoMode = !isAutoMode;
});
}
void triggerRepeller() {
// fungsi sementara, nanti bisa dihubungkan ke backend/ESP32
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Pengusir diaktifkan secara manual!')),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Kontrol Sistem'),
backgroundColor: Colors.green[700],
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
children: [
const SizedBox(height: 20),
const Text(
'Mode Operasi',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
const SizedBox(height: 20),
Card(
elevation: 4,
child: ListTile(
leading: Icon(
isAutoMode ? Icons.autorenew : Icons.handyman,
color: isAutoMode ? Colors.blue : Colors.orange,
),
title: Text(
isAutoMode ? 'Otomatis' : 'Manual',
style: const TextStyle(fontSize: 18),
),
subtitle: const Text('Mode saat ini'),
trailing: ElevatedButton(
onPressed: toggleMode,
child: Text(
isAutoMode ? 'Ganti ke Manual' : 'Ganti ke Otomatis',
),
),
),
),
const SizedBox(height: 30),
if (!isAutoMode)
ElevatedButton.icon(
onPressed: triggerRepeller,
icon: const Icon(Icons.volume_up),
label: const Text('Aktifkan Pengusir Sekarang'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
minimumSize: const Size.fromHeight(50),
),
),
],
),
),
);
}
}

View File

@ -0,0 +1,141 @@
import 'dart:math';
import 'package:flutter/material.dart';
import '../../widgets/thermal_grid.dart';
class DashboardScreen extends StatelessWidget {
const DashboardScreen({super.key});
@override
Widget build(BuildContext context) {
// Dummy data sementara
final List<double> thermalData =
List.generate(64, (index) => 25 + Random().nextDouble() * 10);
final Map<String, dynamic> sensorData = const {
'PIR': 'Tidak',
'Ultrasonik': '50 cm',
'Status Pengusir': 'Nonaktif',
};
return Scaffold(
backgroundColor: Colors.grey[100],
body: SingleChildScrollView(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
// Thermal Sensor dalam Card
Card(
elevation: 4,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: const [
Icon(Icons.thermostat_outlined, color: Colors.red),
SizedBox(width: 8),
Text(
'Thermal AMG8833 (8x8)',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
],
),
const SizedBox(height: 12),
ThermalGrid(temperatures: thermalData),
],
),
),
),
const SizedBox(height: 16),
// PIR & Ultrasonik side by side
Row(
children: [
Expanded(
child: SensorCard(
title: 'PIR',
value: sensorData['PIR']!,
icon: Icons.motion_photos_on_outlined,
color: Colors.orange,
),
),
const SizedBox(width: 12),
Expanded(
child: SensorCard(
title: 'Ultrasonik',
value: sensorData['Ultrasonik']!,
icon: Icons.straighten,
color: Colors.blue,
),
),
],
),
const SizedBox(height: 12),
// Status Pengusir
SensorCard(
title: 'Status Pengusir',
value: sensorData['Status Pengusir']!,
icon: Icons.speaker,
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)),
),
),
],
),
),
);
}
}
class SensorCard extends StatelessWidget {
final String title;
final String value;
final IconData icon;
final Color color;
const SensorCard({
super.key,
required this.title,
required this.value,
required this.icon,
required this.color,
});
@override
Widget build(BuildContext context) {
return Card(
elevation: 3,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: ListTile(
leading: CircleAvatar(
backgroundColor: color.withOpacity(0.15),
child: Icon(icon, color: color),
),
title: Text(title),
subtitle: Text(value),
),
);
}
}

View File

@ -0,0 +1,107 @@
import 'package:flutter/material.dart';
import 'dashboard/dashboard_screen.dart';
import 'control/control_screen.dart';
import 'setting/setting_screen.dart';
class MainScreen extends StatefulWidget {
const MainScreen({super.key});
@override
State<MainScreen> createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
int _selectedIndex = 0;
final List<Widget> _screens = const [
DashboardScreen(),
ControlScreen(),
SettingScreen(),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
Widget buildIconButton(IconData icon, String label, int index) {
final isSelected = _selectedIndex == index;
final color = isSelected ? Colors.green[700] : Colors.grey;
return Flexible(
fit: FlexFit.tight,
child: InkWell(
onTap: () => _onItemTapped(index),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, color: color, size: 26),
const SizedBox(height: 2),
FittedBox(
child: Text(
label,
style: TextStyle(
color: color,
fontWeight:
isSelected ? FontWeight.w600 : FontWeight.normal,
fontSize: 11,
),
),
),
],
),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
resizeToAvoidBottomInset: true,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: SizedBox(
width: 66,
height: 66,
child: FloatingActionButton(
onPressed: () => _onItemTapped(0), // Dashboard / Monitoring di tengah
backgroundColor:
_selectedIndex == 0 ? Colors.green[700] : Colors.green[400],
elevation: _selectedIndex == 0 ? 8 : 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(35),
),
child: const Icon(
Icons.analytics_outlined, // ikon monitoring yang keren
size: 35,
color: Colors.white,
),
),
),
bottomNavigationBar: SafeArea(
child: BottomAppBar(
shape: const CircularNotchedRectangle(),
notchMargin: 8,
elevation: 8,
color: Colors.white,
child: SizedBox(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
buildIconButton(Icons.settings_remote_outlined, 'Control', 1),
const SizedBox(width: 56), // space untuk FAB
buildIconButton(Icons.settings, 'Setting', 2),
],
),
),
),
),
body: _screens[_selectedIndex],
);
}
}

View File

@ -0,0 +1,84 @@
import 'package:flutter/material.dart';
class SettingScreen extends StatelessWidget {
const SettingScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
body: ListView(
padding: const EdgeInsets.all(16),
children: [
const Text(
'Pengaturan',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
const SizedBox(height: 20),
// Contoh opsi 1: Ganti mode manual/otomatis
ListTile(
leading: const Icon(Icons.toggle_on),
title: const Text('Mode Manual/Otomatis'),
trailing: Switch(
value: true, // sementara default ON, nanti bisa dihubungkan state nyata
onChanged: (val) {
// TODO: handle perubahan mode
},
),
),
const Divider(),
// Contoh opsi 2: Notifikasi aktif/nonaktif
ListTile(
leading: const Icon(Icons.notifications),
title: const Text('Notifikasi'),
trailing: Switch(
value: true,
onChanged: (val) {
// TODO: handle toggle notifikasi
},
),
),
const Divider(),
// Contoh opsi 3: Reset data (tombol)
ListTile(
leading: const Icon(Icons.refresh),
title: const Text('Reset Data'),
onTap: () {
// TODO: implement reset data
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Data direset')),
);
},
),
const Divider(),
// Contoh opsi 4: Tentang aplikasi
ListTile(
leading: const Icon(Icons.info_outline),
title: const Text('Tentang'),
subtitle: const Text('Versi 1.0.0\nDibuat oleh Tim HamaGuard'),
isThreeLine: true,
onTap: () {
// Bisa tampilkan dialog info lebih lengkap
showAboutDialog(
context: context,
applicationName: 'HamaGuard',
applicationVersion: '1.0.0',
applicationIcon: const Icon(Icons.bug_report, size: 40),
children: const [
Text('Aplikasi pendeteksi dan pengusir hama otomatis.'),
],
);
},
),
],
),
);
}
}

View File

@ -0,0 +1,53 @@
// lib/screens/splash/splash_screen.dart
import 'dart:async';
import 'package:flutter/material.dart';
import '../main_screen.dart';
class SplashScreen extends StatefulWidget {
const SplashScreen({super.key});
@override
State<SplashScreen> createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
super.initState();
// delay 2 detik lalu ke halaman utama
Timer(const Duration(seconds: 2), () {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => const MainScreen()),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.green[700],
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.bug_report, size: 80, color: Colors.white),
const SizedBox(height: 20),
const Text(
'HamaGuard',
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
),
],
),
),
);
}
}

View File

@ -0,0 +1,42 @@
import 'package:flutter/material.dart';
class ThermalGrid extends StatelessWidget {
final List<double> temperatures;
const ThermalGrid({super.key, required this.temperatures});
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1,
child: GridView.builder(
physics: const NeverScrollableScrollPhysics(),
itemCount: 64,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 8,
),
itemBuilder: (context, index) {
final temp = temperatures[index];
final color = getColorForTemperature(temp);
return Container(
margin: const EdgeInsets.all(1),
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(2),
),
);
},
),
);
}
Color getColorForTemperature(double temp) {
if (temp < 26) return Colors.blue[200]!;
if (temp < 28) return Colors.lightBlue;
if (temp < 30) return Colors.green;
if (temp < 32) return Colors.yellow;
if (temp < 34) return Colors.orange;
return Colors.red;
}
}

View File

@ -1,30 +0,0 @@
// This is a basic Flutter widget test.
//
// To perform an interaction with a widget in your test, use the WidgetTester
// utility in the flutter_test package. For example, you can send tap and scroll
// gestures. You can also use WidgetTester to find child widgets in the widget
// tree, read text, and verify that the values of widget properties are correct.
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:hamaguard/main.dart';
void main() {
testWidgets('Counter increments smoke test', (WidgetTester tester) async {
// Build our app and trigger a frame.
await tester.pumpWidget(const MyApp());
// Verify that our counter starts at 0.
expect(find.text('0'), findsOneWidget);
expect(find.text('1'), findsNothing);
// Tap the '+' icon and trigger a frame.
await tester.tap(find.byIcon(Icons.add));
await tester.pump();
// Verify that our counter has incremented.
expect(find.text('0'), findsNothing);
expect(find.text('1'), findsOneWidget);
});
}