refactoring and checkpoint
This commit is contained in:
DahoudG
194
lib/presentation/widgets/story_section.dart
Normal file
194
lib/presentation/widgets/story_section.dart
Normal file
@@ -0,0 +1,194 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:logger/logger.dart';
|
||||
import '../../core/constants/colors.dart';
|
||||
import '../../core/utils/calculate_time_ago.dart';
|
||||
import 'story_detail.dart';
|
||||
import 'create_story.dart';
|
||||
|
||||
/// La classe StorySection représente la section des stories dans l'interface.
|
||||
/// Elle affiche une liste horizontale de stories et permet à l'utilisateur d'ajouter une nouvelle story.
|
||||
/// Les logs sont utilisés pour tracer chaque action réalisée dans l'interface.
|
||||
class StorySection extends StatelessWidget {
|
||||
final Size size;
|
||||
final Logger logger = Logger(); // Logger pour tracer les événements et actions
|
||||
|
||||
StorySection({required this.size, super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
logger.i('Construction de la section des stories');
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||||
child: SizedBox(
|
||||
height: size.height / 4.5, // Hauteur ajustée pour éviter le débordement
|
||||
child: ListView.separated(
|
||||
scrollDirection: Axis.horizontal,
|
||||
itemCount: 6, // Nombre de stories à afficher
|
||||
separatorBuilder: (context, index) => const SizedBox(width: 8),
|
||||
itemBuilder: (context, index) {
|
||||
if (index == 0) return _buildAddStoryCard(context);
|
||||
|
||||
DateTime publicationDate = DateTime.now().subtract(Duration(hours: (index - 1) * 6));
|
||||
logger.i('Affichage de la story $index avec la date $publicationDate');
|
||||
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
logger.i('Clic sur la story $index, affichage du détail');
|
||||
Navigator.push(
|
||||
context,
|
||||
PageRouteBuilder(
|
||||
pageBuilder: (context, animation, secondaryAnimation) => FadeTransition(
|
||||
opacity: animation,
|
||||
child: StoryDetail(
|
||||
username: 'Utilisateur ${index - 1}',
|
||||
publicationDate: publicationDate,
|
||||
mediaUrl: 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4',
|
||||
userImage: 'lib/assets/images/user_placeholder.png',
|
||||
isVideo: true,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
child: _buildStoryCard(index, publicationDate),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Construit une carte de story à partir de l'index et de la date de publication.
|
||||
Widget _buildStoryCard(int index, DateTime publicationDate) {
|
||||
return Column( // Utilisation de Column sans Expanded pour éviter les erreurs
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Container(
|
||||
width: size.width / 4.5,
|
||||
height: size.height / 5.5, // Hauteur ajustée pour éviter le dépassement
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.cardColor, // Utilisation des couleurs automatiques pour le fond des cartes
|
||||
borderRadius: BorderRadius.circular(20), // Bords arrondis à 20 pixels
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.1),
|
||||
blurRadius: 6,
|
||||
offset: const Offset(0, 3),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
Positioned.fill(child: _buildGradientOverlay()),
|
||||
Positioned(top: 6, right: 6, child: _buildAvatar(index)),
|
||||
Positioned(bottom: 10, left: 10, child: _buildUsername(index)),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4), // Espace entre la carte et la date
|
||||
_buildPublicationDate(publicationDate),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// Construit un overlay en dégradé pour la story.
|
||||
Widget _buildGradientOverlay() {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [Colors.black.withOpacity(0.4), Colors.transparent],
|
||||
begin: Alignment.bottomCenter,
|
||||
end: Alignment.topCenter,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(20), // Assure que l'overlay suit les bords arrondis
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Construit l'avatar de l'utilisateur pour la story.
|
||||
Widget _buildAvatar(int index) {
|
||||
return Hero(
|
||||
tag: 'avatar-$index',
|
||||
child: CircleAvatar(
|
||||
radius: 16,
|
||||
backgroundColor: Colors.grey.withOpacity(0.2),
|
||||
child: const CircleAvatar(
|
||||
radius: 14,
|
||||
backgroundImage: AssetImage('lib/assets/images/user_placeholder.png'),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Construit le nom d'utilisateur affiché sous la story.
|
||||
Widget _buildUsername(int index) {
|
||||
return Text(
|
||||
'Utilisateur ${index - 1}',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Montserrat',
|
||||
color: AppColors.textPrimary, // Texte principal avec couleur dynamique
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Affiche la date de publication sous forme relative ("il y a X heures").
|
||||
Widget _buildPublicationDate(DateTime publicationDate) {
|
||||
return Text(
|
||||
'Il y a ${calculateTimeAgo(publicationDate)}',
|
||||
style: TextStyle(
|
||||
color: AppColors.textSecondary, // Texte secondaire avec couleur dynamique
|
||||
fontSize: 11,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Construit une carte spéciale pour ajouter une nouvelle story.
|
||||
Widget _buildAddStoryCard(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
logger.i('Clic sur l\'ajout d\'une nouvelle story');
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(builder: (context) => const CreateStoryPage()),
|
||||
);
|
||||
},
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Container(
|
||||
width: size.width / 4.5,
|
||||
height: size.height / 5.5, // Hauteur ajustée pour éviter le dépassement
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.cardColor, // Utilisation des couleurs automatiques pour le fond des cartes
|
||||
borderRadius: BorderRadius.circular(20), // Bords arrondis à 20 pixels
|
||||
border: Border.all(color: AppColors.accentColor.withOpacity(0.3), width: 2),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.1),
|
||||
blurRadius: 6,
|
||||
offset: const Offset(0, 3),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Center(
|
||||
child: Icon(
|
||||
Icons.add_circle_outline,
|
||||
color: AppColors.accentColor, // Utilisation des couleurs automatiques pour les icônes
|
||||
size: 40,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'Créer une story',
|
||||
style: TextStyle(color: AppColors.textSecondary, fontSize: 13), // Texte secondaire avec couleur dynamique
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user