feat: Improve UI responsiveness with dynamic text and icon colors based on theme
This commit is contained in:
@@ -78,7 +78,7 @@ class _HomeContentState extends State<HomeContent> {
|
||||
children: [
|
||||
// Header de bienvenue
|
||||
Text(
|
||||
'Bonjour ${user.prenom ?? 'Voyageur'} !',
|
||||
'Bonjour ${user.prenom} !',
|
||||
style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
@@ -182,6 +182,12 @@ class _HomeContentState extends State<HomeContent> {
|
||||
final colors = [Colors.blue, Colors.orange, Colors.green, Colors.purple, Colors.red];
|
||||
final color = colors[trip.title.hashCode.abs() % colors.length];
|
||||
|
||||
// Détecter le thème actuel
|
||||
final isDarkMode = Theme.of(context).brightness == Brightness.dark;
|
||||
final textColor = isDarkMode ? Colors.white : Colors.black;
|
||||
final secondaryTextColor = isDarkMode ? Colors.white70 : Colors.grey[700];
|
||||
final iconColor = isDarkMode ? Colors.white70 : Colors.grey[600];
|
||||
|
||||
return Card(
|
||||
elevation: 4,
|
||||
margin: const EdgeInsets.only(bottom: 16),
|
||||
@@ -249,9 +255,9 @@ class _HomeContentState extends State<HomeContent> {
|
||||
Expanded(
|
||||
child: Text(
|
||||
trip.location,
|
||||
style: const TextStyle(
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.white,
|
||||
color: textColor,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
@@ -277,7 +283,7 @@ class _HomeContentState extends State<HomeContent> {
|
||||
trip.description,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.grey[700],
|
||||
color: secondaryTextColor,
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
@@ -291,14 +297,14 @@ class _HomeContentState extends State<HomeContent> {
|
||||
Icon(
|
||||
Icons.calendar_today,
|
||||
size: 16,
|
||||
color: Colors.grey[600],
|
||||
color: iconColor,
|
||||
),
|
||||
SizedBox(width: 8),
|
||||
Text(
|
||||
'${trip.startDate.day}/${trip.startDate.month}/${trip.startDate.year} - ${trip.endDate.day}/${trip.endDate.month}/${trip.endDate.year}',
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.grey[600],
|
||||
color: iconColor,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
@@ -310,13 +316,13 @@ class _HomeContentState extends State<HomeContent> {
|
||||
// Participants
|
||||
Row(
|
||||
children: [
|
||||
Icon(Icons.group, size: 16, color: Colors.grey[600]),
|
||||
Icon(Icons.group, size: 16, color: iconColor),
|
||||
SizedBox(width: 8),
|
||||
Text(
|
||||
'${trip.participants.length} participant${trip.participants.length > 1 ? 's' : ''}',
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.grey[600],
|
||||
color: iconColor,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
@@ -332,13 +338,13 @@ class _HomeContentState extends State<HomeContent> {
|
||||
if (trip.budget! > 0)
|
||||
Row(
|
||||
children: [
|
||||
Icon(Icons.euro, size: 16, color: Colors.grey[600]),
|
||||
Icon(Icons.euro, size: 16, color: iconColor),
|
||||
SizedBox(width: 8),
|
||||
Text(
|
||||
'Budget: ${trip.budget?.toStringAsFixed(2)}€',
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.grey[600],
|
||||
color: iconColor,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
|
||||
@@ -10,13 +10,13 @@ class ShowTripDetailsContent extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _ShowTripDetailsContentState extends State<ShowTripDetailsContent> {
|
||||
|
||||
|
||||
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// You can access the trip via widget.trip
|
||||
// Détecter le thème actuel
|
||||
final isDarkMode = Theme.of(context).brightness == Brightness.dark;
|
||||
final textColor = isDarkMode ? Colors.white : Colors.black;
|
||||
final secondaryTextColor = isDarkMode ? Colors.white70 : Colors.grey[600];
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(widget.trip.title),
|
||||
@@ -28,53 +28,85 @@ class _ShowTripDetailsContentState extends State<ShowTripDetailsContent> {
|
||||
children: [
|
||||
Text(
|
||||
widget.trip.title,
|
||||
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
|
||||
style: TextStyle(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: textColor,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Text(widget.trip.description),
|
||||
Text(
|
||||
widget.trip.description,
|
||||
style: TextStyle(color: textColor),
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
Row(
|
||||
children: [
|
||||
Icon(Icons.location_on, size: 16, color: Colors.grey[600]),
|
||||
Icon(Icons.location_on, size: 16, color: secondaryTextColor),
|
||||
SizedBox(width: 8),
|
||||
Text(
|
||||
widget.trip.location,
|
||||
style: TextStyle(fontSize: 14, color: Colors.grey[600]),
|
||||
style: TextStyle(fontSize: 14, color: secondaryTextColor),
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Row(
|
||||
children: [
|
||||
Icon(Icons.calendar_today, size: 16, color: Colors.grey[600]),
|
||||
Icon(Icons.calendar_today, size: 16, color: secondaryTextColor),
|
||||
SizedBox(width: 8),
|
||||
Text(
|
||||
'${widget.trip.startDate.toLocal()} - ${widget.trip.endDate.toLocal()}',
|
||||
style: TextStyle(fontSize: 14, color: Colors.grey[600]),
|
||||
'${widget.trip.startDate.day}/${widget.trip.startDate.month}/${widget.trip.startDate.year} - ${widget.trip.endDate.day}/${widget.trip.endDate.month}/${widget.trip.endDate.year}',
|
||||
style: TextStyle(fontSize: 14, color: secondaryTextColor),
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Row(
|
||||
children: [
|
||||
Icon(Icons.group, size: 16, color: Colors.grey[600]),
|
||||
Icon(Icons.group, size: 16, color: secondaryTextColor),
|
||||
SizedBox(width: 8),
|
||||
Text(
|
||||
'${widget.trip.participants.length} participant${widget.trip.participants.length > 1 ? 's' : ''}',
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.grey[600],
|
||||
color: secondaryTextColor,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
Text('Budget: ${widget.trip.budget ?? 'N/A'}€'),
|
||||
Text(
|
||||
'Budget: ${widget.trip.budget ?? 'N/A'}€',
|
||||
style: TextStyle(color: textColor),
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
// Add more trip details as needed
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 50,
|
||||
child: ElevatedButton(
|
||||
onPressed: () {
|
||||
// Handle button press
|
||||
},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: Color.fromARGB(255, 0, 123, 255),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
'Modifier les informations du voyage',
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user