diff --git a/assets/images/poisson2.webp b/assets/images/poisson2.webp new file mode 100644 index 0000000..323b50d Binary files /dev/null and b/assets/images/poisson2.webp differ diff --git a/assets/images/poisson3.webp b/assets/images/poisson3.webp new file mode 100644 index 0000000..0ff6d64 Binary files /dev/null and b/assets/images/poisson3.webp differ diff --git a/assets/images/poisson4.webp b/assets/images/poisson4.webp new file mode 100644 index 0000000..641459d Binary files /dev/null and b/assets/images/poisson4.webp differ diff --git a/assets/images/poisson5.webp b/assets/images/poisson5.webp new file mode 100644 index 0000000..dd8e987 Binary files /dev/null and b/assets/images/poisson5.webp differ diff --git a/lib/main.dart b/lib/main.dart index ff788f1..c5e37e9 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'widgets/header_widget.dart'; import 'widgets/hero_section_widget.dart'; import 'widgets/search_bar_widget.dart'; +import 'widgets/popular_places_widget.dart'; import 'theme/app_theme.dart'; void main() { @@ -37,6 +38,10 @@ class TravelHomePage extends StatelessWidget { ), const SizedBox(height: 20), + + const PopularPlacesWidget(), + + const SizedBox(height: 20), ], ), ), diff --git a/lib/widgets/popular_places_widget.dart b/lib/widgets/popular_places_widget.dart new file mode 100644 index 0000000..f5830f2 --- /dev/null +++ b/lib/widgets/popular_places_widget.dart @@ -0,0 +1,176 @@ +import 'package:flutter/material.dart'; +import '../theme/app_theme.dart'; + +class PopularPlacesWidget extends StatelessWidget { + const PopularPlacesWidget({super.key}); + + @override + Widget build(BuildContext context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 8), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + 'Popular Place', + style: Theme.of(context).textTheme.titleLarge?.copyWith( + fontWeight: FontWeight.bold, + ), + ), + Text( + 'View all', + style: Theme.of(context).textTheme.bodyMedium?.copyWith( + color: AppTheme.textSecondary, + ), + ), + ], + ), + ), + + const SizedBox(height: 16), + + SizedBox( + height: 200, + child: ListView.builder( + scrollDirection: Axis.horizontal, + padding: const EdgeInsets.symmetric(horizontal: 8), + itemCount: 5, + itemBuilder: (context, index) { + return _buildPlaceCard(context, index); + }, + ), + ), + ], + ); + } + + Widget _buildPlaceCard(BuildContext context, int index) { + final places = [ + { + 'name': 'Poisson Rouge', + 'location': 'Aquarium, France', + 'imagePath': 'assets/images/fond1.webp', + }, + { + 'name': 'Poisson Clown', + 'location': 'Récif, Océan', + 'imagePath': 'assets/images/poisson2.webp', + }, + { + 'name': 'Poisson Angelfish', + 'location': 'Caraïbes, Mer', + 'imagePath': 'assets/images/poisson3.webp', + }, + { + 'name': 'Poisson Tang', + 'location': 'Pacifique, Océan', + 'imagePath': 'assets/images/poisson4.webp', + }, + { + 'name': 'Poisson Betta', + 'location': 'Asie, Rivière', + 'imagePath': 'assets/images/poisson5.webp', + }, + ]; + + final place = places[index]; + + return Container( + width: 160, + margin: const EdgeInsets.only(right: 16), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.2), + blurRadius: 10, + offset: const Offset(0, 5), + ), + ], + ), + child: ClipRRect( + borderRadius: BorderRadius.circular(20), + child: Stack( + children: [ + Positioned.fill( + child: Image.asset( + place['imagePath'] as String, + fit: BoxFit.cover, + errorBuilder: (context, error, stackTrace) { + return Container( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + colors: [ + Color(0xFF1E3A8A), + Color(0xFF7C2D12), + Color(0xFFDC2626), + Color(0xFFF59E0B), + ], + ), + ), + ); + }, + ), + ), + Positioned.fill( + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20), + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [ + Colors.transparent, + Colors.black.withOpacity(0.6), + ], + ), + ), + ), + ), + Positioned( + bottom: 16, + left: 16, + right: 16, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + place['name'] as String, + style: Theme.of(context).textTheme.titleLarge?.copyWith( + color: Colors.white, + fontWeight: FontWeight.bold, + ), + ), + const SizedBox(height: 4), + Row( + children: [ + const Icon( + Icons.location_on, + color: Colors.white, + size: 14, + ), + const SizedBox(width: 4), + Expanded( + child: Text( + place['location'] as String, + style: Theme.of(context).textTheme.bodySmall?.copyWith( + color: Colors.white.withOpacity(0.9), + ), + ), + ), + ], + ), + ], + ), + ), + ], + ), + ), + ); + } +}