Compare commits

..

2 Commits

Author SHA1 Message Date
Yaël Perret
434dad4ef8 feat : Replace tab system 2025-09-02 20:38:21 +02:00
Yaël Perret
1dfb5bd121 feat : replace ReadMore by custom readmoretext 2025-09-02 19:16:40 +02:00
7 changed files with 335 additions and 257 deletions

View File

@@ -445,12 +445,6 @@
"packageUri": "lib/", "packageUri": "lib/",
"languageVersion": "3.0" "languageVersion": "3.0"
}, },
{
"name": "readmore",
"rootUri": "file:///C:/Users/Yael/AppData/Local/Pub/Cache/hosted/pub.dev/readmore-3.0.0",
"packageUri": "lib/",
"languageVersion": "3.0"
},
{ {
"name": "recase", "name": "recase",
"rootUri": "file:///C:/Users/Yael/AppData/Local/Pub/Cache/hosted/pub.dev/recase-4.1.0", "rootUri": "file:///C:/Users/Yael/AppData/Local/Pub/Cache/hosted/pub.dev/recase-4.1.0",

View File

@@ -278,10 +278,6 @@ pubspec_parse
3.0 3.0
file:///C:/Users/Yael/AppData/Local/Pub/Cache/hosted/pub.dev/pubspec_parse-1.3.0/ file:///C:/Users/Yael/AppData/Local/Pub/Cache/hosted/pub.dev/pubspec_parse-1.3.0/
file:///C:/Users/Yael/AppData/Local/Pub/Cache/hosted/pub.dev/pubspec_parse-1.3.0/lib/ file:///C:/Users/Yael/AppData/Local/Pub/Cache/hosted/pub.dev/pubspec_parse-1.3.0/lib/
readmore
3.0
file:///C:/Users/Yael/AppData/Local/Pub/Cache/hosted/pub.dev/readmore-3.0.0/
file:///C:/Users/Yael/AppData/Local/Pub/Cache/hosted/pub.dev/readmore-3.0.0/lib/
recase recase
2.12 2.12
file:///C:/Users/Yael/AppData/Local/Pub/Cache/hosted/pub.dev/recase-4.1.0/ file:///C:/Users/Yael/AppData/Local/Pub/Cache/hosted/pub.dev/recase-4.1.0/

View File

@@ -0,0 +1,100 @@
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
class ReadMoreText extends StatefulWidget {
const ReadMoreText(
this.text, {
Key? key,
this.trimLines = 2,
this.collapsedText = '... read more',
this.expandedText = ' read less',
this.textStyle,
}) : assert(text != null),
super(key: key);
final String text;
final int trimLines;
final String collapsedText;
final String expandedText;
final TextStyle? textStyle;
@override
ReadMoreTextState createState() => ReadMoreTextState();
}
class ReadMoreTextState extends State<ReadMoreText> {
bool _readMore = true;
void _onTapLink() {
setState(() => _readMore = !_readMore);
}
@override
Widget build(BuildContext context) {
final DefaultTextStyle defaultTextStyle = DefaultTextStyle.of(context);
final colorClickableText = Colors.blue;
final widgetColor = Colors.black;
TextSpan link = TextSpan(
text: _readMore ? widget.collapsedText : widget.expandedText,
style: TextStyle(
color: colorClickableText,
),
recognizer: TapGestureRecognizer()..onTap = _onTapLink
);
Widget result = LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
assert(constraints.hasBoundedWidth);
final double maxWidth = constraints.maxWidth;
// Create a TextSpan with data
final text = TextSpan(
text: widget.text,
);
// Layout and measure link
TextPainter textPainter = TextPainter(
text: link,
textDirection: TextDirection.rtl,//better to pass this from master widget if ltr and rtl both supported
maxLines: widget.trimLines,
ellipsis: '...',
);
textPainter.layout(minWidth: constraints.minWidth, maxWidth: maxWidth);
final linkSize = textPainter.size;
// Layout and measure text
textPainter.text = text;
textPainter.layout(minWidth: constraints.minWidth, maxWidth: maxWidth);
final textSize = textPainter.size;
// Get the endIndex of data
int? endIndex;
final pos = textPainter.getPositionForOffset(Offset(
textSize.width - linkSize.width,
textSize.height,
));
endIndex = textPainter.getOffsetBefore(pos.offset);
var textSpan;
if (textPainter.didExceedMaxLines) {
textSpan = TextSpan(
text: _readMore
? widget.text.substring(0, endIndex)
: widget.text,
style: widget.textStyle ?? TextStyle(
color: widgetColor,
),
children: <TextSpan>[link],
);
} else {
textSpan = TextSpan(
text: widget.text,
style: widget.textStyle ?? TextStyle(
color: widgetColor,
),
);
}
return RichText(
softWrap: true,
overflow: TextOverflow.clip,
text: textSpan,
);
},
);
return result;
}
}

View File

@@ -1,6 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'dart:async'; import 'dart:async';
import 'package:readmore/readmore.dart'; import 'ReadMoreText.dart';
class PostCardWidget extends StatefulWidget { class PostCardWidget extends StatefulWidget {
final String title; final String title;
@@ -105,15 +105,11 @@ class _PostCardWidgetState extends State<PostCardWidget> {
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// Contenu ReadMoreText(widget.content,
ReadMoreText(
widget.content,
trimMode: TrimMode.Line,
trimLines: 2, trimLines: 2,
colorClickableText: Theme.of(context).colorScheme.primary, collapsedText: '... Voir plus',
trimCollapsedText: 'Voir plus', expandedText: ' Voir moins',
trimExpandedText: 'Voir moins', textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(
moreStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.white, color: Colors.white,
height: 1.4, height: 1.4,
), ),

View File

@@ -25,247 +25,248 @@ class EventDetailsView extends StackedView<EventDetailsViewModel> {
length: 2, length: 2,
child: Scaffold( child: Scaffold(
backgroundColor: Colors.white, backgroundColor: Colors.white,
body: SingleChildScrollView( body: NestedScrollView(
child: Column( headerSliverBuilder: (context, innerBoxIsScrolled) => [
children: [ SliverToBoxAdapter(
Container( child: Column(
width: double.infinity, children: [
height: MediaQuery.of(context).size.width * 9 / 16, Container(
child: const Image( width: double.infinity,
image: AssetImage('assets/images/Affiche.jpg'), height: MediaQuery.of(context).size.width * 9 / 16,
fit: BoxFit.cover, child: const Image(
alignment: Alignment.center, image: AssetImage('assets/images/Affiche.jpg'),
fit: BoxFit.cover,
alignment: Alignment.center,
),
),
Container(
color: Colors.white,
padding: const EdgeInsets.only(left: 16.0, right: 16.0, top: 16.0, bottom: 0.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Titre de l'événement
Text(
'Disc\'Octonelle 2',
style: Theme.of(context).textTheme.headlineLarge?.copyWith(
color: Colors.black,
),
),
const SizedBox(height: 16),
Center(
child: Container(
width: MediaQuery.of(context).size.width * 0.8,
child: Table(
columnWidths: const {
0: FixedColumnWidth(80.0),
1: FlexColumnWidth(),
},
children: [
// Date
TableRow(
children: [
TableCell(
verticalAlignment: TableCellVerticalAlignment.middle,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Align(
alignment: Alignment.centerLeft,
child: Icon(
Icons.calendar_today,
size: 30,
color: Theme.of(context).colorScheme.tertiary,
),
),
),
),
TableCell(
verticalAlignment: TableCellVerticalAlignment.middle,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Text(
'29.04.2023',
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: Colors.black,
),
),
),
),
],
),
// Lieu
TableRow(
children: [
TableCell(
verticalAlignment: TableCellVerticalAlignment.middle,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Align(
alignment: Alignment.centerLeft,
child: Icon(
Icons.location_on,
size: 30,
color: Theme.of(context).colorScheme.tertiary,
),
),
),
),
TableCell(
verticalAlignment: TableCellVerticalAlignment.middle,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Anim-Halle',
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: Colors.black,
fontWeight: FontWeight.w500,
),
),
Text(
'En Bas-les-Barres 6',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.grey[800],
),
),
Text(
'2316 Les Ponts-de-martel',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.grey[800],
),
),
],
),
),
),
],
),
// Organisation
TableRow(
children: [
TableCell(
verticalAlignment: TableCellVerticalAlignment.middle,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: 40,
height: 40,
child: Image.asset(
'images/OCTONELLE.jpg',
fit: BoxFit.cover,
),
),
),
),
),
TableCell(
verticalAlignment: TableCellVerticalAlignment.middle,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Text(
'L\'Octonelle',
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: Colors.black,
),
),
),
),
],
),
],
),
),
),
const SizedBox(height: 16),
// TabBar
TabBar(
tabs: const [
Tab(text: 'Publications'),
Tab(text: 'À propos'),
],
labelColor: Theme.of(context).colorScheme.primary,
unselectedLabelColor: Colors.black,
indicatorColor: Theme.of(context).colorScheme.primary,
tabAlignment: TabAlignment.start,
isScrollable: true,
labelStyle: Theme.of(context).textTheme.titleLarge,
dividerColor: Colors.transparent,
onTap: (index) {
viewModel.setSelectedTab(index);
},
),
],
),
),
],
), ),
), ),
Container( ],
color: Colors.white, body: TabBarView(
padding: const EdgeInsets.all(16.0), children: [
child: Column( // Tab 1: Publications
crossAxisAlignment: CrossAxisAlignment.center, Container(
children: [ color: const Color(0xFFEFF0FF),
// Titre de l'événement child: ListView.builder(
Text( padding: const EdgeInsets.all(16.0),
'Disc\'Octonelle 2', itemCount: 10,
style: Theme.of(context).textTheme.headlineLarge?.copyWith( itemBuilder: (context, index) {
color: Colors.black return PostCardWidget(
title: 'Publication ${index + 1}',
content: 'Voici le contenu de la publication ${index + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
authorName: 'L\'Octonelle',
authorImageUrl: '',
publishDate: DateTime.now().subtract(Duration(days: index)),
imageUrls: index % 3 == 0 ? ['assets/images/Affiche.jpg'] : null,
likesCount: (index + 1) * 5,
commentsCount: (index + 1) * 2,
aspectRatio: 4/5,
onLike: () {
print('Like publication ${index + 1}');
},
onComment: () {
print('Comment publication ${index + 1}');
},
onShare: () {
print('Share publication ${index + 1}');
},
);
},
), ),
), ),
const SizedBox(height: 16), // Tab 2: À propos
Container(
Center( color: const Color(0xFFEFF0FF),
child: Container( child: ListView(
width: MediaQuery.of(context).size.width * 0.8, padding: const EdgeInsets.all(16.0),
child: Table( children: [
columnWidths: const { Text(
0: FixedColumnWidth(80.0), // Largeur fixe pour les icônes 'À propos de L\'Octonelle',
1: FlexColumnWidth(), // Prend l'espace restant style: Theme.of(context).textTheme.headlineSmall?.copyWith(
}, color: Colors.black,
children: [ fontWeight: FontWeight.bold,
// Date
TableRow(
children: [
TableCell(
verticalAlignment: TableCellVerticalAlignment.middle,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Align(
alignment: Alignment.centerLeft,
child: Icon(
Icons.calendar_today,
size: 30,
color: Theme.of(context).colorScheme.tertiary,
),
),
),
), ),
TableCell( ),
verticalAlignment: TableCellVerticalAlignment.middle, const SizedBox(height: 16),
child: Padding( const Text(
padding: const EdgeInsets.symmetric(vertical: 4.0), 'Description détaillée de l\'organisation L\'Octonelle et de ses activités...',
child: Text( style: TextStyle(color: Colors.black87),
'29.04.2023', ),
style: Theme.of(context).textTheme.bodyLarge?.copyWith( ...List.generate(20, (index) => Padding(
color: Colors.black, padding: const EdgeInsets.symmetric(vertical: 8.0),
), child: Text('Ligne de contenu ${index + 1}'),
), )),
), ],
),
],
),
// Lieu
TableRow(
children: [
TableCell(
verticalAlignment: TableCellVerticalAlignment.middle,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Align(
alignment: Alignment.centerLeft,
child: Icon(
Icons.location_on,
size: 30,
color: Theme.of(context).colorScheme.tertiary,
),
),
),
),
TableCell(
verticalAlignment: TableCellVerticalAlignment.middle,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Anim-Halle',
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: Colors.black,
fontWeight: FontWeight.w500,
),
),
Text(
'En Bas-les-Barres 6',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.grey[800],
),
),
Text(
'2316 Les Ponts-de-martel',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.grey[800],
),
),
],
),
),
),
],
),
// Organisation
TableRow(
children: [
TableCell(
verticalAlignment: TableCellVerticalAlignment.middle,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: 40,
height: 40,
child: Image.asset(
'images/OCTONELLE.jpg',
fit: BoxFit.cover,
),
),
),
),
),
TableCell(
verticalAlignment: TableCellVerticalAlignment.middle,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Text(
'L\'Octonelle',
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: Colors.black,
),
),
),
),
],
),
],
),
), ),
), ),
const SizedBox(height: 16),
// TabBar
TabBar(
tabs: const [
Tab(text: 'Publications'),
Tab(text: 'À propos'),
],
labelColor: Theme.of(context).colorScheme.primary,
unselectedLabelColor: Colors.black,
indicatorColor: Theme.of(context).colorScheme.primary,
tabAlignment: TabAlignment.start,
isScrollable: true,
labelStyle: Theme.of(context).textTheme.titleLarge,
dividerColor: Colors.transparent,
onTap: (index) {
viewModel.setSelectedTab(index);
},
),
], ],
), ),
), ),
// Contenu des onglets basé sur l'index sélectionné
Container(
color: const Color(0xFFEFF0FF),
padding: const EdgeInsets.all(16.0),
child: viewModel.selectedTabIndex == 0
? Column(
mainAxisSize: MainAxisSize.min,
children: List.generate(10, (index) {
return PostCardWidget(
title: 'Publication ${index + 1}',
content: 'Voici le contenu de la publication ${index + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
authorName: 'L\'Octonelle',
authorImageUrl: '', // URL vide pour utiliser l'icône par défaut
publishDate: DateTime.now().subtract(Duration(days: index)),
imageUrls: index % 3 == 0 ? ['assets/images/Affiche.jpg'] : null,
likesCount: (index + 1) * 5,
commentsCount: (index + 1) * 2,
aspectRatio: 4/5,
onLike: () {
// Action lors du clic sur "J'aime"
print('Like publication ${index + 1}');
},
onComment: () {
// Action lors du clic sur "Commenter"
print('Comment publication ${index + 1}');
},
onShare: () {
// Action lors du clic sur "Partager"
print('Share publication ${index + 1}');
},
);
}),
)
: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'À propos de L\'Octonelle',
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 16),
const Text(
'Description détaillée de l\'organisation L\'Octonelle et de ses activités...',
style: TextStyle(color: Colors.black87),
),
// Contenu supplémentaire pour tester le scroll
...List.generate(20, (index) => Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text('Ligne de contenu ${index + 1}'),
)),
],
),
), ),
],
),
),
), ),
),
Positioned( Positioned(
top: 20, top: 20,
left: 20, left: 20,

View File

@@ -581,14 +581,6 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "1.3.0" version: "1.3.0"
readmore:
dependency: "direct main"
description:
name: readmore
sha256: e8fca2bd397b86342483b409e2ec26f06560a5963aceaa39b27f30722b506187
url: "https://pub.dev"
source: hosted
version: "3.0.0"
recase: recase:
dependency: transitive dependency: transitive
description: description:

View File

@@ -15,7 +15,6 @@ dependencies:
google_fonts: ^6.2.1 google_fonts: ^6.2.1
http: ^1.2.2 http: ^1.2.2
intl: any intl: any
readmore: ^3.0.0
stacked: ^3.4.0 stacked: ^3.4.0
stacked_services: ^1.1.0 stacked_services: ^1.1.0