tuanta/sfm_app_final
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): update DetailDevice screen layout

Browse Source
This commit is contained in:
anhtunz
2024-12-26 11:31:21 +07:00
parent 77afc09d19
commit a69429b05f
26 changed files with 1231 additions and 671 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
lib/product/extention/context_extention.dart
View File

@@ -71,9 +71,8 @@ extension PageExtension on BuildContext {
extension DurationExtension on BuildContext {
Duration get lowDuration => const Duration(milliseconds: 150);
Duration get normalDuration => const Duration(milliseconds: 500);
Duration dynamicSecondDuration(int seconds) => Duration(seconds: seconds);
Duration dynamicMilliSecondDuration(int milliseconds) => Duration(milliseconds: milliseconds);
Duration dynamicMinutesDuration(int minutes) => Duration(minutes: minutes);
}
// RADIUS
@@ -81,6 +80,7 @@ extension RadiusExtension on BuildContext {
Radius get lowRadius => Radius.circular(width * 0.02);
Radius get normalRadius => Radius.circular(width * 0.05);
Radius get highRadius => Radius.circular(width * 0.1);
Radius dynamicRadius(double radius) => Radius.circular(radius);
}
extension TextStyleExtention on BuildContext {
@@ -100,4 +100,3 @@ extension TextStyleExtention on BuildContext {
TextStyle get headlineLargeTextStyle =>
Theme.of(this).textTheme.headlineLarge!;
}

1
lib/product/lang/l10n/app_en.arb
View File

@@ -178,6 +178,7 @@
"device_update_ward": "Ward/Commune",
"description_NOTUSE10": "This is english language in DetailDevicePage",
"detail_device_dont_has_location_message": "No location information available yet",
"detail_device_volt_message": "Measured voltage (V)",
"no_data_message": "No data yet",
"normal_message": "Normal",
"warning_status_message": "Warning",

1
lib/product/lang/l10n/app_vi.arb
View File

@@ -178,6 +178,7 @@
"device_update_ward": "Phường/Xã",
"description_NOTUSE10": "This is vietnamese language in DetailDevicePage",
"detail_device_dont_has_location_message": "Chưa có thông tin về vị trí",
"detail_device_volt_message": "Nguồn điện đo được (V)",
"no_data_message": "Chưa có",
"normal_message": "Bình thường",
"warning_status_message": "Cảnh báo",

30
lib/product/shared/shared_curve.dart Normal file
View File

@@ -0,0 +1,30 @@
import 'package:flutter/material.dart';
class CuveEdgesCustom extends CustomClipper<Path> {
@override
getClip(Size size) {
Path path = Path();
path.lineTo(0, size.height);
final firstCurve = Offset(0, size.height - 30);
final lastCurve = Offset(30, size.height - 30);
path.quadraticBezierTo(
firstCurve.dx, firstCurve.dy, lastCurve.dx, lastCurve.dy);
final secondFirstCurve = Offset(0, size.height - 30);
final secondLastCurve = Offset(size.width - 30, size.height - 30);
path.quadraticBezierTo(secondFirstCurve.dx, secondFirstCurve.dy,
secondLastCurve.dx, secondLastCurve.dy);
final thirdFirstCurve = Offset(size.width, size.height - 30);
final thirdLastCurve = Offset(size.width, size.height);
path.quadraticBezierTo(thirdFirstCurve.dx, thirdFirstCurve.dy,
thirdLastCurve.dx, thirdLastCurve.dy);
path.lineTo(size.width, 0);
path.close();
return path;
}
@override
bool shouldReclip(covariant CustomClipper oldClipper) {
return true;
}
}

127
lib/product/shared/shared_language_switch.dart Normal file
View File

@@ -0,0 +1,127 @@
import 'package:flutter/material.dart';
import 'package:sfm_app/product/constant/icon/icon_constants.dart';
const int _kDuration = 300;
const double _kWidth = 60;
const double _kheight = 30;
class LanguageSwitch extends StatefulWidget {
const LanguageSwitch({
super.key,
required this.value,
this.onChanged,
});
/// Whether this switch is on or off.
///
/// This property must not be null.
final bool value;
/// Called when the user toggles the switch on or off.
///
/// The switch passes the new value to the callback but does not actually
/// change state until the parent widget rebuilds the switch with the new
/// value.
///
/// If null, the switch will be displayed as disabled.
///
/// The callback provided to [onChanged] should update the state of the parent
/// [StatefulWidget] using the [State.setState] method, so that the parent
/// gets rebuilt; for example:
///
/// ```dart
/// LanguageSwitch(
/// value: _giveVerse,
/// onChanged: (bool newValue) {
/// setState(() {
/// _giveVerse = newValue;
/// });
/// },
/// )
/// ```
final ValueChanged<bool>? onChanged;
@override
State<LanguageSwitch> createState() => _LanguageSwitchState();
}
class _LanguageSwitchState extends State<LanguageSwitch> {
@override
Widget build(BuildContext context) {
bool toggleState = widget.value;
const dayColor = Colors.blue;
const nightColor = Colors.grey;
return InkWell(
onTap: () => setState(() {
toggleState = !toggleState;
widget.onChanged?.call(toggleState);
}),
customBorder: const StadiumBorder(),
child: AnimatedContainer(
duration: const Duration(milliseconds: _kDuration),
width: _kWidth,
height: _kheight,
decoration: ShapeDecoration(
color: toggleState ? dayColor : nightColor,
shape: const StadiumBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Stack(
alignment: Alignment.center,
children: [
//day icon
AnimatedOpacity(
opacity: toggleState ? 1 : 0,
duration: const Duration(milliseconds: _kDuration),
child: AnimatedAlign(
alignment: toggleState
? Alignment.centerLeft
: Alignment.centerRight,
duration: const Duration(milliseconds: _kDuration),
// child: const Icon(
// Icons.circle,
// size: 30,
// // color: Colors.white,
// ),
child: Image.asset(
IconConstants.instance.getIcon('vi_icon'),
width: 30,
height: 30,
),
),
),
//night Icon
AnimatedOpacity(
opacity: toggleState ? 0 : 1,
duration: const Duration(milliseconds: _kDuration),
child: AnimatedAlign(
alignment: toggleState
? Alignment.centerLeft
: Alignment.centerRight,
duration: const Duration(milliseconds: _kDuration),
child: AnimatedRotation(
turns: toggleState ? 0.0 : 0.5,
duration: const Duration(milliseconds: _kDuration),
// child: const Icon(
// Icons.nightlight,
// size: 30,
// // color: Colors.white,
// ),
child: Image.asset(
IconConstants.instance.getIcon('en_icon'),
width: 30,
height: 30,
),
),
),
),
],
),
),
),
);
}
}

212
lib/product/shared/shared_light_dark_switch.dart Normal file
View File

@@ -0,0 +1,212 @@
import 'package:flutter/material.dart';
const int _kDuration = 300;
const double _kWidth = 60;
const double _kheight = 30;
class LightDarkSwitch extends StatefulWidget {
const LightDarkSwitch({
super.key,
required this.value,
this.onChanged,
});
/// Whether this switch is on or off.
///
/// This property must not be null.
final bool value;
/// Called when the user toggles the switch on or off.
///
/// The switch passes the new value to the callback but does not actually
/// change state until the parent widget rebuilds the switch with the new
/// value.
///
/// If null, the switch will be displayed as disabled.
///
/// The callback provided to [onChanged] should update the state of the parent
/// [StatefulWidget] using the [State.setState] method, so that the parent
/// gets rebuilt; for example:
///
/// ```dart
/// LightDarkSwitch(
/// value: _giveVerse,
/// onChanged: (bool newValue) {
/// setState(() {
/// _giveVerse = newValue;
/// });
/// },
/// )
/// ```
final ValueChanged<bool>? onChanged;
@override
State<LightDarkSwitch> createState() => _LightDarkSwitchState();
}
class _LightDarkSwitchState extends State<LightDarkSwitch> {
@override
Widget build(BuildContext context) {
bool toggleState = widget.value;
const activeColor = Colors.blue;
const inactiveColor = Colors.black;
return Row(
mainAxisSize: MainAxisSize.min,
children: [
InkWell(
onTap: () => setState(() {
toggleState = !toggleState;
widget.onChanged?.call(toggleState);
}),
customBorder: const StadiumBorder(),
child: AnimatedContainer(
duration: const Duration(milliseconds: _kDuration),
width: _kWidth,
height: _kheight,
decoration: ShapeDecoration(
color: toggleState ? activeColor : inactiveColor,
shape: const StadiumBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Stack(
alignment: Alignment.center,
children: [
//Light icon
AnimatedOpacity(
opacity: toggleState ? 1 : 0,
duration: const Duration(milliseconds: _kDuration),
child: AnimatedAlign(
alignment: toggleState
? Alignment.centerLeft
: Alignment.centerRight,
duration: const Duration(milliseconds: _kDuration),
child: const Icon(
Icons.sunny,
size: 25,
color: Colors.white,
),
),
),
AnimatedPositioned(
top: 2,
right: toggleState ? 6 : 40,
duration: const Duration(milliseconds: _kDuration),
child: AnimatedOpacity(
opacity: toggleState ? 1 : 0,
duration: const Duration(milliseconds: _kDuration),
child: const Icon(
Icons.circle,
size: 8,
color: Colors.white,
),
),
),
AnimatedPositioned(
top: 16,
right: toggleState ? 14 : 40,
duration: const Duration(milliseconds: _kDuration),
child: const Icon(
Icons.circle,
size: 3,
color: Colors.white,
),
),
//Dark Icon
AnimatedOpacity(
opacity: toggleState ? 0 : 1,
duration: const Duration(milliseconds: _kDuration),
child: AnimatedAlign(
alignment: toggleState
? Alignment.centerLeft
: Alignment.centerRight,
duration: const Duration(milliseconds: _kDuration),
child: const Icon(
Icons.mode_night_sharp,
size: 25,
color: Colors.white,
),
),
),
AnimatedPositioned(
bottom: 3,
left: toggleState ? 40 : 14,
duration: const Duration(milliseconds: _kDuration),
child: AnimatedOpacity(
opacity: toggleState ? 0 : 1,
duration: const Duration(milliseconds: _kDuration),
child: const Icon(
Icons.star,
size: 8,
color: Colors.white,
),
),
),
AnimatedPositioned(
top: 2,
left: toggleState ? 40 : 4,
duration: const Duration(milliseconds: _kDuration),
child: AnimatedOpacity(
opacity: toggleState ? 0 : 1,
duration: const Duration(milliseconds: _kDuration),
child: const Icon(
Icons.star,
size: 10,
color: Colors.white,
),
),
),
AnimatedPositioned(
top: 10,
left: toggleState ? 40 : 16,
duration: const Duration(milliseconds: _kDuration),
child: AnimatedOpacity(
opacity: toggleState ? 0 : 1,
duration: const Duration(milliseconds: _kDuration),
child: const Icon(
Icons.circle,
size: 3,
color: Colors.white,
),
),
),
AnimatedPositioned(
top: 4,
left: toggleState ? 40 : 22,
duration: const Duration(milliseconds: _kDuration),
child: AnimatedOpacity(
opacity: toggleState ? 0 : 1,
duration: const Duration(milliseconds: _kDuration),
child: const Icon(
Icons.circle,
size: 3,
color: Colors.white,
),
),
),
],
),
),
),
),
// const SizedBox(
// width: 8.0,
// ),
// Text(
// "Dark",
// style: TextStyle(
// color: toggleState ? Colors.grey : inactiveColor,
// fontWeight: FontWeight.bold,
// ),
// ),
],
);
}
}

75
lib/product/shared/shared_line_chart.dart
View File

@@ -3,50 +3,40 @@ import 'package:flutter/material.dart';
import 'package:sfm_app/feature/device_log/device_logs_model.dart';
import 'package:sfm_app/product/utils/date_time_utils.dart';
Widget sharedLineChart(
String chartName, List<SensorLogs> sensors, double maxValue) {
double max = sensors
.map((sensor) => sensor.value!) // Lấy giá trị của từng sensor
.reduce((a, b) => a > b ? a : b)
.toDouble();
double averageValue = (0 + maxValue) / 2;
Widget sharedLineChart(String chartName, List<SensorLogs> sensors) {
return LineChart(
LineChartData(
minX: 0,
minY: 0,
maxY: max + 20,
maxY: 4000,
titlesData: FlTitlesData(
show: true,
topTitles: const AxisTitles(
sideTitles: SideTitles(
showTitles: false,
show: true,
topTitles: const AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
rightTitles: const AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
bottomTitles: AxisTitles(
axisNameSize: 20,
axisNameWidget: Text(
chartName,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
rightTitles: const AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
leftTitles: const AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
bottomTitles: AxisTitles(
axisNameSize: 20,
axisNameWidget: Text(chartName),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 40,
getTitlesWidget: (value, meta) {
if (value == 0) {
return const Text("0");
} else if (value == averageValue) {
return Text(averageValue.toInt().toString());
} else if (value == maxValue) {
return Text(maxValue.toInt().toString());
} else {
return Container();
}
},
))),
),
),
lineTouchData: LineTouchData(
touchTooltipData: LineTouchTooltipData(
tooltipBgColor: Colors.grey.withOpacity(0.3),
@@ -55,7 +45,7 @@ Widget sharedLineChart(
final index = spot.x.toInt();
final sensorData = sensors[index];
return LineTooltipItem(
'Time: ${DateTimeUtils.instance.convertCurrentMillisToDateTimeString(sensorData.time!)}\nValue: ${sensorData.value}',
'Time: ${DateTimeUtils.instance.convertCurrentMillisToDateTimeString(sensorData.time!)}\nValue: ${(sensorData.value! / 1000).toDouble()}V',
const TextStyle(),
);
}).toList();
@@ -91,10 +81,13 @@ Widget sharedLineChart(
gridData: const FlGridData(show: false),
borderData: FlBorderData(
border: Border(
top: BorderSide.none,
right: BorderSide.none,
left: BorderSide(color: Colors.black.withOpacity(0.7)),
bottom: BorderSide(color: Colors.black.withOpacity(0.7))),
top: BorderSide.none,
right: BorderSide.none,
left: BorderSide.none,
bottom: BorderSide(
color: Colors.black.withOpacity(0.7),
),
),
),
),
);

14
lib/product/shared/shared_pie_chart.dart
View File

@@ -47,40 +47,40 @@ class SharedPieChart extends StatelessWidget {
color: Colors.grey,
value: offlineCount.toDouble(),
title: offlineCount.toString(),
radius: context.dynamicWidth(0.3),
radius: context.dynamicWidth(0.2),
titleStyle: titleStyle,
),
PieChartSectionData(
color: Colors.green,
value: normalCount.toDouble(),
title: normalCount.toString(),
radius: context.dynamicWidth(0.3),
radius: context.dynamicWidth(0.2),
titleStyle: titleStyle,
),
PieChartSectionData(
color: Colors.red,
value: warningCount.toDouble(),
title: warningCount.toString(),
radius: context.dynamicWidth(0.3),
radius: context.dynamicWidth(0.2),
titleStyle: titleStyle,
),
PieChartSectionData(
color: Colors.yellow,
value: inProgressCount.toDouble(),
title: inProgressCount.toString(),
radius: context.dynamicWidth(0.3),
radius: context.dynamicWidth(0.2),
titleStyle: titleStyle,
),
PieChartSectionData(
color: Colors.black, // Có thể thêm màu cho trạng thái lỗi
value: errorCount.toDouble(),
title: errorCount.toString(),
radius: context.dynamicWidth(0.3),
radius: context.dynamicWidth(0.2),
titleStyle: titleStyle,
),
],
centerSpaceRadius: 0,
sectionsSpace: 1,
centerSpaceRadius: context.dynamicWidth(0.1),
sectionsSpace: 2,
),
),
),

11
lib/product/theme/theme_notifier.dart
View File

@@ -82,6 +82,17 @@ class ThemeNotifier extends ChangeNotifier {
AppThemes _currenThemeEnum = AppThemes.LIGHT;
AppThemes get currenThemeEnum => _currenThemeEnum;
Future<void> loadThemeFromPreferences() async {
// String themeKey =
// LocaleManager.instance.getStringValue(PreferencesKeys.THEME);
// if (themeKey == AppThemes.LIGHT.name) {
// _currentTheme = AppThemeLight.instance.theme;
// } else {
// _currentTheme = AppThemeDark.instance.theme;
// }
// notifyListeners();
}
void changeValue(AppThemes theme) {
if (theme == AppThemes.LIGHT) {
_currentTheme = AppThemeLight.instance.theme;

56
lib/product/utils/device_utils.dart
View File

@@ -8,6 +8,7 @@ import 'package:sfm_app/product/shared/model/district_model.dart';
import 'package:sfm_app/product/shared/model/province_model.dart';
import '../../feature/devices/device_model.dart';
import '../constant/icon/icon_constants.dart';
import '../shared/model/ward_model.dart';
class DeviceUtils {
@@ -63,13 +64,13 @@ class DeviceUtils {
}
}
if (sensor.name == "7") {
map['sensorVolt'] = "${(sensor.value!) / 1000} V";
map['sensorVolt'] = "${(sensor.value!) / 1000}";
}
if (sensor.name == "8") {
map['sensorTemp'] = "${sensor.value}°C";
map['sensorTemp'] = "${sensor.value}";
}
if (sensor.name == "9") {
map['sensorHum'] = "${sensor.value} %";
map['sensorHum'] = "${sensor.value}";
}
if (sensor.name == "10") {
map['sensorBattery'] = "${sensor.value}";
@@ -270,4 +271,53 @@ class DeviceUtils {
return Colors.green;
}
}
List<String> deviceBatteryImg = [
IconConstants.instance.getIcon("full-battery"),
IconConstants.instance.getIcon("half-battery"),
IconConstants.instance.getIcon("low-battery"),
IconConstants.instance.getIcon("empty-battery"),
];
String getDeviceBatteryImg(int battery) {
if (battery <= 5) {
return deviceBatteryImg[3];
} else if (battery <= 20) {
return deviceBatteryImg[2];
} else if (battery <= 90) {
return deviceBatteryImg[1];
} else {
return deviceBatteryImg[0];
}
}
Color getDeviceTempColor(int temp) {
if (temp < 30) {
return Colors.green;
} else if (temp < 50) {
return Colors.orange;
} else {
return Colors.red;
}
}
Color getDeviceBatteryColor(int battery) {
if (battery < 20) {
return Colors.red;
} else if (battery < 80) {
return Colors.orange;
} else {
return Colors.green;
}
}
Color getSignalIconColor(BuildContext context, String signal) {
if (signal == appLocalization(context).gf_weak_signal_message) {
return Colors.red;
} else if (signal == appLocalization(context).gf_moderate_signal_message) {
return Colors.yellow;
} else {
return Colors.green;
}
}
}