feat: Refactor home screen layout to improve button visibility and RX/TX indicators

This commit is contained in:
Janez T
2025-10-16 14:29:15 +02:00
parent c05ae8de89
commit 95333a13b8

View File

@@ -641,12 +641,63 @@ class _HomeScreenState extends State<HomeScreen>
],
),
),
if (!isConnected)
Row(
mainAxisSize: MainAxisSize.min,
children: [
// Advertise button (broadcast location) - always visible
ElevatedButton.icon(
onPressed: provider.isReconnecting
? null // Disable button during reconnection
: () => _showConnectionDialog(context),
icon: provider.isReconnecting
? const SizedBox(
width: 14,
height: 14,
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(
Colors.black54,
),
),
)
: const Icon(Icons.bluetooth, size: 18),
label: Text(
provider.isReconnecting
? 'Reconnecting (${provider.reconnectionAttempt}/${provider.maxReconnectionAttempts})'
: 'Connect',
),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
foregroundColor: Colors.black87,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
),
// Cancel button during reconnection
if (provider.isReconnecting) ...[
const SizedBox(width: 8),
IconButton(
onPressed: () => provider.cancelReconnection(),
icon: const Icon(Icons.close, size: 20),
tooltip: 'Cancel reconnection',
style: IconButton.styleFrom(
backgroundColor: Colors.red.shade700,
foregroundColor: Colors.white,
padding: const EdgeInsets.all(8),
),
),
],
],
)
else
Row(
mainAxisSize: MainAxisSize.min,
children: [
// Advertise button (broadcast location)
FilledButton(
onPressed: isConnected ? () => _advertiseDevice(context) : null,
onPressed: () => _advertiseDevice(context),
style: FilledButton.styleFrom(
backgroundColor: Colors.blue.shade700,
foregroundColor: Colors.white,
@@ -656,34 +707,7 @@ class _HomeScreenState extends State<HomeScreen>
),
child: const Icon(Icons.campaign, size: 20),
),
const SizedBox(width: 8),
// Device config button - always visible
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const DeviceConfigScreen(),
),
);
},
onLongPress: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
PacketLogScreen(bleService: provider.bleService),
),
);
},
child: Container(
width: 36,
height: 36,
alignment: Alignment.center,
child: const Icon(Icons.settings, size: 20),
),
),
if (isConnected && _showRxTxIndicators) ...[
if (_showRxTxIndicators) ...[
const SizedBox(width: 8),
// RX/TX indicators with long press to open packet log
GestureDetector(
@@ -752,54 +776,37 @@ class _HomeScreenState extends State<HomeScreen>
],
),
),
const SizedBox(width: 12),
],
const SizedBox(width: 8),
// Connect/Disconnect button on the right
if (!isConnected)
ElevatedButton.icon(
onPressed: provider.isReconnecting
? null
: () => _showConnectionDialog(context),
icon: provider.isReconnecting
? const SizedBox(
width: 14,
height: 14,
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(
Colors.black54,
// Settings button (tap for device settings, long press for packet logs)
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const DeviceConfigScreen(),
),
);
},
onLongPress: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
PacketLogScreen(bleService: provider.bleService),
),
);
},
child: Container(
width: 36,
height: 36,
alignment: Alignment.center,
child: const Icon(Icons.settings, size: 20),
),
),
)
: const Icon(Icons.bluetooth, size: 18),
label: Text(
provider.isReconnecting
? 'Reconnecting (${provider.reconnectionAttempt}/${provider.maxReconnectionAttempts})'
: 'Connect',
),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
foregroundColor: Colors.black87,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
),
// Cancel button during reconnection
if (provider.isReconnecting) ...[
const SizedBox(width: 8),
IconButton(
onPressed: () => provider.cancelReconnection(),
icon: const Icon(Icons.close, size: 20),
tooltip: 'Cancel reconnection',
style: IconButton.styleFrom(
backgroundColor: Colors.red.shade700,
foregroundColor: Colors.white,
padding: const EdgeInsets.all(8),
),
),
],
const SizedBox(width: 16),
// Disconnect button (prominent, icon only) - pushed to far right edge
],
),
],