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( Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ 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( FilledButton(
onPressed: isConnected ? () => _advertiseDevice(context) : null, onPressed: () => _advertiseDevice(context),
style: FilledButton.styleFrom( style: FilledButton.styleFrom(
backgroundColor: Colors.blue.shade700, backgroundColor: Colors.blue.shade700,
foregroundColor: Colors.white, foregroundColor: Colors.white,
@@ -656,34 +707,7 @@ class _HomeScreenState extends State<HomeScreen>
), ),
child: const Icon(Icons.campaign, size: 20), child: const Icon(Icons.campaign, size: 20),
), ),
const SizedBox(width: 8), if (_showRxTxIndicators) ...[
// 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) ...[
const SizedBox(width: 8), const SizedBox(width: 8),
// RX/TX indicators with long press to open packet log // RX/TX indicators with long press to open packet log
GestureDetector( GestureDetector(
@@ -752,54 +776,37 @@ class _HomeScreenState extends State<HomeScreen>
], ],
), ),
), ),
const SizedBox(width: 12),
], ],
const SizedBox(width: 8), // Settings button (tap for device settings, long press for packet logs)
// Connect/Disconnect button on the right GestureDetector(
if (!isConnected) onTap: () {
ElevatedButton.icon( Navigator.push(
onPressed: provider.isReconnecting context,
? null MaterialPageRoute(
: () => _showConnectionDialog(context), builder: (context) => const DeviceConfigScreen(),
icon: provider.isReconnecting ),
? const SizedBox( );
width: 14, },
height: 14, onLongPress: () {
child: CircularProgressIndicator( Navigator.push(
strokeWidth: 2, context,
valueColor: AlwaysStoppedAnimation<Color>( MaterialPageRoute(
Colors.black54, builder: (context) =>
PacketLogScreen(bleService: provider.bleService),
),
);
},
child: Container(
width: 36,
height: 36,
alignment: Alignment.center,
child: const Icon(Icons.settings, size: 20),
), ),
), ),
) const SizedBox(width: 16),
: const Icon(Icons.bluetooth, size: 18),
label: Text( // Disconnect button (prominent, icon only) - pushed to far right edge
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),
),
),
],
], ],
), ),
], ],