flutter/universal_ble
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor ScannedItemWidget to StatefulWidget and enhance advertisement timestamp display

Browse Source 
- Converted ScannedItemWidget from StatelessWidget to StatefulWidget to manage state and update the UI dynamically.
- Added a timer to refresh the display of the last advertisement timestamp.
- Improved the formatting of the last seen advertisement message for better clarity.
This commit is contained in:
Foti Dim
2026-02-09 12:43:45 +01:00
parent fc6ae39a53
commit d90a727991
1 changed files with 226 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/lib/home/widgets/scanned_item_widget.dart
+226 -55
View File
@@ -1,3 +1,5 @@
import 'dart:async';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'package:universal_ble/universal_ble.dart'; import 'package:universal_ble/universal_ble.dart';
@@ -6,7 +8,7 @@ import 'package:universal_ble_example/home/widgets/rssi_signal_indicator.dart';
import 'package:universal_ble_example/widgets/company_info_widget.dart'; import 'package:universal_ble_example/widgets/company_info_widget.dart';
import 'package:universal_ble_example/widgets/flash_on_update_widget.dart'; import 'package:universal_ble_example/widgets/flash_on_update_widget.dart';
class ScannedItemWidget extends StatelessWidget { class ScannedItemWidget extends StatefulWidget {
final BleDevice bleDevice; final BleDevice bleDevice;
final int adFlashTrigger; final int adFlashTrigger;
final VoidCallback? onTap; final VoidCallback? onTap;
@@ -21,23 +23,38 @@ class ScannedItemWidget extends StatelessWidget {
required this.onExpand, required this.onExpand,
}); });
static String _formatAdTime(DateTime dt) { @override
return '${dt.hour.toString().padLeft(2, '0')}:' State<ScannedItemWidget> createState() => _ScannedItemWidgetState();
'${dt.minute.toString().padLeft(2, '0')}:' }
'${dt.second.toString().padLeft(2, '0')}';
class _ScannedItemWidgetState extends State<ScannedItemWidget> {
Timer? _timer;
static String _formatLastAppeared(DateTime? timestamp) {
if (timestamp == null) return '—';
final elapsed = DateTime.now().difference(timestamp);
if (elapsed.inSeconds < 2) return 'Actively advertising';
if (elapsed.inSeconds < 60) {
return '${elapsed.inSeconds} second${elapsed.inSeconds == 1 ? '' : 's'} ago';
}
if (elapsed.inMinutes < 60) {
return '${elapsed.inMinutes} minute${elapsed.inMinutes == 1 ? '' : 's'} ago';
}
return '${elapsed.inHours} hour${elapsed.inHours == 1 ? '' : 's'} ago';
} }
static String _advertisementPayload(BleDevice device) { @override
if (device.manufacturerDataList.isNotEmpty) { void initState() {
final hex = device.manufacturerDataList.first.payloadRadix16; super.initState();
return hex.length > 24 ? '${hex.substring(0, 24)}…' : hex; _timer = Timer.periodic(const Duration(seconds: 1), (_) {
} if (mounted) setState(() {});
if (device.serviceData.isNotEmpty) { });
final entry = device.serviceData.entries.first; }
final hex = '0x${entry.value.map((b) => b.toRadixString(16).padLeft(2, '0')).join('').toUpperCase()}';
return hex.length > 24 ? '${hex.substring(0, 24)}…' : hex; @override
} void dispose() {
return '—'; _timer?.cancel();
super.dispose();
} }
@override @override
@@ -45,25 +62,24 @@ class ScannedItemWidget extends StatelessWidget {
final theme = Theme.of(context); final theme = Theme.of(context);
final colorScheme = theme.colorScheme; final colorScheme = theme.colorScheme;
String? name = bleDevice.name; String? name = widget.bleDevice.name;
List<ManufacturerData> rawManufacturerData = bleDevice.manufacturerDataList; List<ManufacturerData> rawManufacturerData =
widget.bleDevice.manufacturerDataList;
if (name == null || name.isEmpty) name = 'Unknown Device'; if (name == null || name.isEmpty) name = 'Unknown Device';
final adTimeStr = bleDevice.timestampDateTime != null final lastAppearedStr =
? _formatAdTime(bleDevice.timestampDateTime!) _formatLastAppeared(widget.bleDevice.timestampDateTime);
: '—';
final payloadStr = _advertisementPayload(bleDevice);
return FlashOnUpdateWidget( return FlashOnUpdateWidget(
trigger: adFlashTrigger, trigger: widget.adFlashTrigger,
child: Card( child: Card(
elevation: 2, elevation: 2,
margin: EdgeInsets.zero, margin: EdgeInsets.zero,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
), ),
child: InkWell( child: InkWell(
onTap: onTap, onTap: widget.onTap,
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
child: Padding( child: Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
@@ -81,7 +97,8 @@ class ScannedItemWidget extends StatelessWidget {
colorScheme.primaryContainer.withValues(alpha: 0.5), colorScheme.primaryContainer.withValues(alpha: 0.5),
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
), ),
child: RssiSignalIndicator(rssi: bleDevice.rssi ?? 0), child: RssiSignalIndicator(
rssi: widget.bleDevice.rssi ?? 0),
), ),
const SizedBox(width: 16), const SizedBox(width: 16),
// Device info // Device info
@@ -106,7 +123,8 @@ class ScannedItemWidget extends StatelessWidget {
const SizedBox(width: 8), const SizedBox(width: 8),
// Expand/Collapse button // Expand/Collapse button
if (rawManufacturerData.isNotEmpty || if (rawManufacturerData.isNotEmpty ||
bleDevice.services.isNotEmpty) widget.bleDevice.services.isNotEmpty ||
widget.bleDevice.serviceData.isNotEmpty)
Container( Container(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 4, horizontal: 4,
@@ -119,16 +137,18 @@ class ScannedItemWidget extends StatelessWidget {
), ),
child: IconButton( child: IconButton(
icon: Icon( icon: Icon(
isExpanded widget.isExpanded
? Icons.expand_less ? Icons.expand_less
: Icons.expand_more, : Icons.expand_more,
color: colorScheme.primary, color: colorScheme.primary,
size: 18, size: 18,
), ),
onPressed: () { onPressed: () {
onExpand(!isExpanded); widget.onExpand(!widget.isExpanded);
}, },
tooltip: isExpanded ? 'Collapse' : 'Expand', tooltip: widget.isExpanded
? 'Collapse'
: 'Expand',
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
constraints: const BoxConstraints( constraints: const BoxConstraints(
minWidth: 20, minWidth: 20,
@@ -150,7 +170,7 @@ class ScannedItemWidget extends StatelessWidget {
const SizedBox(width: 4), const SizedBox(width: 4),
Expanded( Expanded(
child: Text( child: Text(
bleDevice.deviceId, widget.bleDevice.deviceId,
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 12,
color: colorScheme.onSurface color: colorScheme.onSurface
@@ -163,7 +183,7 @@ class ScannedItemWidget extends StatelessWidget {
], ],
), ),
const SizedBox(height: 6), const SizedBox(height: 6),
// Last advertisement (timestamp + payload only) // Last seen
Row( Row(
children: [ children: [
Icon( Icon(
@@ -175,7 +195,9 @@ class ScannedItemWidget extends StatelessWidget {
const SizedBox(width: 6), const SizedBox(width: 6),
Expanded( Expanded(
child: Text( child: Text(
'Last ad: $adTimeStr · $payloadStr', lastAppearedStr == 'Actively advertising'
? lastAppearedStr
: 'Last seen: $lastAppearedStr',
style: TextStyle( style: TextStyle(
fontSize: 11, fontSize: 11,
fontFamily: 'monospace', fontFamily: 'monospace',
@@ -199,26 +221,26 @@ class ScannedItemWidget extends StatelessWidget {
vertical: 4, vertical: 4,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: bleDevice.paired == true color: widget.bleDevice.paired == true
? Colors.green.withValues(alpha: 0.2) ? Colors.green.withValues(alpha: 0.2)
: Colors.orange.withValues(alpha: 0.2), : Colors.orange.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
), ),
child: Text( child: Text(
bleDevice.paired == true widget.bleDevice.paired == true
? 'Paired' ? 'Paired'
: 'Unpaired', : 'Unpaired',
style: TextStyle( style: TextStyle(
fontSize: 10, fontSize: 10,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
color: bleDevice.paired == true color: widget.bleDevice.paired == true
? Colors.green.shade700 ? Colors.green.shade700
: Colors.orange.shade700, : Colors.orange.shade700,
), ),
), ),
), ),
// Manufacturer data (only in collapsed mode) // Manufacturer data (only in collapsed mode)
if (!isExpanded) ...[ if (!widget.isExpanded) ...[
...rawManufacturerData.take(2).map((data) { ...rawManufacturerData.take(2).map((data) {
final companyName = CompanyIdentifierService final companyName = CompanyIdentifierService
.instance .instance
@@ -268,8 +290,8 @@ class ScannedItemWidget extends StatelessWidget {
}), }),
], ],
// Services (only in collapsed mode) // Services (only in collapsed mode)
if (!isExpanded) ...[ if (!widget.isExpanded) ...[
...bleDevice.services.take(3).map((service) { ...widget.bleDevice.services.take(3).map((service) {
return Container( return Container(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 8, horizontal: 8,
@@ -291,9 +313,9 @@ class ScannedItemWidget extends StatelessWidget {
), ),
); );
}), }),
if (bleDevice.services.length > 3) if (widget.bleDevice.services.length > 3)
Text( Text(
'+${bleDevice.services.length - 3} more', '+${widget.bleDevice.services.length - 3} more',
style: TextStyle( style: TextStyle(
fontSize: 10, fontSize: 10,
color: colorScheme.onSurface color: colorScheme.onSurface
@@ -309,20 +331,38 @@ class ScannedItemWidget extends StatelessWidget {
], ],
), ),
// Expanded details // Expanded details
if (isExpanded) ...[ if (widget.isExpanded) ...[
const SizedBox(height: 16), const SizedBox(height: 16),
const Divider(), const Divider(),
const SizedBox(height: 12), const SizedBox(height: 12),
if (rawManufacturerData.isNotEmpty) ...[ // Manufacturer Data (always shown)
Text( Text(
'Manufacturer Data', 'Manufacturer Data',
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 12,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: colorScheme.onSurface, color: colorScheme.onSurface,
),
), ),
const SizedBox(height: 8), ),
const SizedBox(height: 8),
if (rawManufacturerData.isEmpty)
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: colorScheme.secondaryContainer,
borderRadius: BorderRadius.circular(8),
),
child: Text(
'No manufacturer data',
style: TextStyle(
fontSize: 11,
color: colorScheme.onSecondaryContainer
.withValues(alpha: 0.7),
fontStyle: FontStyle.italic,
),
),
)
else
...rawManufacturerData.map((data) { ...rawManufacturerData.map((data) {
return Padding( return Padding(
padding: const EdgeInsets.only(bottom: 8), padding: const EdgeInsets.only(bottom: 8),
@@ -447,9 +487,8 @@ class ScannedItemWidget extends StatelessWidget {
), ),
); );
}), }),
const SizedBox(height: 12), const SizedBox(height: 12),
], if (widget.bleDevice.services.isNotEmpty) ...[
if (bleDevice.services.isNotEmpty) ...[
Text( Text(
'Advertised Services', 'Advertised Services',
style: TextStyle( style: TextStyle(
@@ -462,7 +501,7 @@ class ScannedItemWidget extends StatelessWidget {
Wrap( Wrap(
spacing: 4, spacing: 4,
runSpacing: 4, runSpacing: 4,
children: bleDevice.services.map((service) { children: widget.bleDevice.services.map((service) {
return Container( return Container(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 8, horizontal: 8,
@@ -509,6 +548,138 @@ class ScannedItemWidget extends StatelessWidget {
}).toList(), }).toList(),
), ),
], ],
// Service Data (always shown, last)
Text(
'Service Data',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
),
const SizedBox(height: 8),
if (widget.bleDevice.serviceData.isEmpty)
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: colorScheme.tertiaryContainer,
borderRadius: BorderRadius.circular(8),
),
child: Text(
'No service data',
style: TextStyle(
fontSize: 11,
color: colorScheme.onTertiaryContainer
.withValues(alpha: 0.7),
fontStyle: FontStyle.italic,
),
),
)
else
...widget.bleDevice.serviceData.entries.map((entry) {
final uuid = entry.key;
final bytes = entry.value;
final hex = bytes.isEmpty
? ''
: '0x${bytes.map((b) => b.toRadixString(16).padLeft(2, '0')).join('').toUpperCase()}';
return Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: colorScheme.tertiaryContainer,
borderRadius: BorderRadius.circular(8),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
'Service UUID: ',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: colorScheme
.onTertiaryContainer,
),
),
Expanded(
child: SelectableText(
uuid,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: colorScheme
.onTertiaryContainer,
fontFamily: 'monospace',
),
),
),
],
),
if (hex.isNotEmpty) ...[
const SizedBox(height: 4),
SelectableText(
hex,
style: TextStyle(
fontSize: 10,
color: colorScheme
.onTertiaryContainer
.withValues(alpha: 0.8),
fontFamily: 'monospace',
),
),
],
],
),
),
const SizedBox(width: 8),
IconButton(
icon: Icon(
Icons.copy,
size: 16,
color: colorScheme.onTertiaryContainer,
),
onPressed: () {
final textToCopy = hex.isNotEmpty
? 'Service UUID: $uuid\nData: $hex'
: 'Service UUID: $uuid';
Clipboard.setData(
ClipboardData(text: textToCopy),
);
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content:
const Text('Copied to clipboard'),
duration: const Duration(seconds: 1),
behavior: SnackBarBehavior.floating,
),
);
},
tooltip: 'Copy',
padding: EdgeInsets.zero,
constraints: const BoxConstraints(
minWidth: 24,
minHeight: 24,
),
visualDensity: VisualDensity.compact,
),
],
),
],
),
),
);
}),
], ],
], ],
), ),