internal/flutter_timeline
5
0
Fork 0
mirror of https://github.com/Iconica-Development/flutter_timeline.git synced 2025-05-19 02:23:46 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: timeline_post_detail_screen

Browse source
This commit is contained in:
mike doornenbal 2024-07-30 10:43:40 +02:00
parent 38dd43ab39
commit 13ae371191
4 changed files with 166 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/flutter_timeline/lib/src/flutter_timeline_navigator_userstory.dart
View file

@ -158,7 +158,9 @@ Widget _postDetailScreenRoute({
leading: backButton, leading: backButton,
backgroundColor: const Color(0xff212121), backgroundColor: const Color(0xff212121),
title: Text( title: Text(
category?.title ?? post.category ?? 'Category', category?.title.toLowerCase() ??
post.category?.toLowerCase() ??
'category',
style: TextStyle( style: TextStyle(
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
fontSize: 24, fontSize: 24,

5
packages/flutter_timeline_view/lib/src/config/timeline_translations.dart
View file

@ -28,7 +28,6 @@ class TimelineTranslations {
required this.allowCommentsDescription, required this.allowCommentsDescription,
required this.commentsTitleOnPost, required this.commentsTitleOnPost,
required this.checkPost, required this.checkPost,
required this.postAt,
required this.deletePost, required this.deletePost,
required this.deleteReaction, required this.deleteReaction,
required this.deleteConfirmationMessage, required this.deleteConfirmationMessage,
@ -80,7 +79,6 @@ class TimelineTranslations {
this.commentsTitle = 'Are people allowed to comment?', this.commentsTitle = 'Are people allowed to comment?',
this.firstComment = 'Be the first to comment', this.firstComment = 'Be the first to comment',
this.writeComment = 'Write your comment here...', this.writeComment = 'Write your comment here...',
this.postAt = 'at',
this.postLoadingError = 'Something went wrong while loading the post', this.postLoadingError = 'Something went wrong while loading the post',
this.timelineSelectionDescription = 'Choose a category', this.timelineSelectionDescription = 'Choose a category',
this.searchHint = 'Search...', this.searchHint = 'Search...',
@ -104,7 +102,6 @@ class TimelineTranslations {
final String allowComments; final String allowComments;
final String allowCommentsDescription; final String allowCommentsDescription;
final String checkPost; final String checkPost;
final String postAt;
final String titleHintText; final String titleHintText;
final String contentHintText; final String contentHintText;
@ -150,7 +147,6 @@ class TimelineTranslations {
String? allowCommentsDescription, String? allowCommentsDescription,
String? commentsTitleOnPost, String? commentsTitleOnPost,
String? checkPost, String? checkPost,
String? postAt,
String? deletePost, String? deletePost,
String? deleteConfirmationTitle, String? deleteConfirmationTitle,
String? deleteConfirmationMessage, String? deleteConfirmationMessage,
@ -189,7 +185,6 @@ class TimelineTranslations {
allowCommentsDescription ?? this.allowCommentsDescription, allowCommentsDescription ?? this.allowCommentsDescription,
commentsTitleOnPost: commentsTitleOnPost ?? this.commentsTitleOnPost, commentsTitleOnPost: commentsTitleOnPost ?? this.commentsTitleOnPost,
checkPost: checkPost ?? this.checkPost, checkPost: checkPost ?? this.checkPost,
postAt: postAt ?? this.postAt,
deletePost: deletePost ?? this.deletePost, deletePost: deletePost ?? this.deletePost,
deleteConfirmationTitle: deleteConfirmationTitle:
deleteConfirmationTitle ?? this.deleteConfirmationTitle, deleteConfirmationTitle ?? this.deleteConfirmationTitle,

259
packages/flutter_timeline_view/lib/src/screens/timeline_post_screen.dart
View file

@ -3,12 +3,10 @@
// SPDX-License-Identifier: BSD-3-Clause // SPDX-License-Identifier: BSD-3-Clause
import 'dart:async'; import 'dart:async';
import 'dart:typed_data';
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart'; import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_image_picker/flutter_image_picker.dart';
import 'package:flutter_timeline_interface/flutter_timeline_interface.dart'; import 'package:flutter_timeline_interface/flutter_timeline_interface.dart';
import 'package:flutter_timeline_view/src/config/timeline_options.dart'; import 'package:flutter_timeline_view/src/config/timeline_options.dart';
import 'package:flutter_timeline_view/src/widgets/reaction_bottom.dart'; import 'package:flutter_timeline_view/src/widgets/reaction_bottom.dart';
@ -60,20 +58,6 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
TimelinePost? post; TimelinePost? post;
bool isLoading = true; bool isLoading = true;
late var textInputBuilder = widget.options.textInputBuilder ??
(controller, suffixIcon, hintText) => TextField(
textCapitalization: TextCapitalization.sentences,
controller: controller,
decoration: InputDecoration(
hintText: hintText,
suffixIcon: suffixIcon,
border: OutlineInputBorder(
borderRadius:
BorderRadius.circular(20.0), // Adjust the value as needed
),
),
);
@override @override
void initState() { void initState() {
super.initState(); super.initState();
@ -108,9 +92,10 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
var theme = Theme.of(context); var theme = Theme.of(context);
var dateFormat = widget.options.dateFormat ?? var dateFormat = widget.options.dateFormat ??
DateFormat('dd/MM/yyyy', Localizations.localeOf(context).languageCode); DateFormat(
var timeFormat = widget.options.timeFormat ?? DateFormat('HH:mm'); "dd/MM/yyyy 'at' HH:mm",
Localizations.localeOf(context).languageCode,
);
if (isLoading) { if (isLoading) {
return const Center( return const Center(
child: CircularProgressIndicator.adaptive(), child: CircularProgressIndicator.adaptive(),
@ -130,6 +115,45 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
? a.createdAt.compareTo(b.createdAt) ? a.createdAt.compareTo(b.createdAt)
: b.createdAt.compareTo(a.createdAt), : b.createdAt.compareTo(a.createdAt),
); );
var isLikedByUser = post.likedBy?.contains(widget.userId) ?? false;
var textInputBuilder = widget.options.textInputBuilder ??
(controller, suffixIcon, hintText) => TextField(
style: theme.textTheme.bodyMedium,
textCapitalization: TextCapitalization.sentences,
controller: controller,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: const BorderSide(
color: Colors.black,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: const BorderSide(
color: Colors.black,
),
),
contentPadding: const EdgeInsets.symmetric(
vertical: 0,
horizontal: 16,
),
hintText: widget.options.translations.writeComment,
hintStyle: theme.textTheme.bodyMedium!.copyWith(
color: theme.textTheme.bodyMedium!.color!.withOpacity(0.5),
),
fillColor: Colors.white,
filled: true,
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(25),
),
borderSide: BorderSide.none,
),
suffixIcon: suffixIcon,
),
);
return Stack( return Stack(
children: [ children: [
@ -191,7 +215,9 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
widget.options.translations.anonymousUser, widget.options.translations.anonymousUser,
style: widget.options.theme.textStyles style: widget.options.theme.textStyles
.postCreatorTitleStyle ?? .postCreatorTitleStyle ??
theme.textTheme.titleMedium, theme.textTheme.titleSmall!.copyWith(
color: Colors.black,
),
), ),
], ],
), ),
@ -199,7 +225,7 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
const Spacer(), const Spacer(),
if (!(widget.isOverviewScreen ?? false) && if (!(widget.isOverviewScreen ?? false) &&
(widget.allowAllDeletion || (widget.allowAllDeletion ||
post.creator?.userId == widget.userId)) post.creator?.userId == widget.userId)) ...[
PopupMenuButton( PopupMenuButton(
onSelected: (value) async { onSelected: (value) async {
if (value == 'delete') { if (value == 'delete') {
@ -238,6 +264,7 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
color: widget.options.theme.iconColor, color: widget.options.theme.iconColor,
), ),
), ),
],
], ],
), ),
// image of the posts // image of the posts
@ -295,53 +322,37 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
// post information // post information
Row( Row(
children: [ children: [
if (post.likedBy?.contains(widget.userId) ?? false) ...[ IconButton(
InkWell( padding: EdgeInsets.zero,
onTap: () async { constraints: const BoxConstraints(),
onPressed: () async {
if (widget.isOverviewScreen ?? false) return;
if (isLikedByUser) {
updatePost( updatePost(
await widget.service.postService.unlikePost( await widget.service.postService.unlikePost(
widget.userId, widget.userId,
post, post,
), ),
); );
}, setState(() {});
child: Container( } else {
color: Colors.transparent,
child: widget.options.theme.likedIcon ??
Icon(
widget.post.likedBy
?.contains(widget.userId) ??
false
? Icons.favorite_rounded
: Icons.favorite_outline_outlined,
),
),
),
] else ...[
InkWell(
onTap: () async {
if (widget.isOverviewScreen ?? false) return;
updatePost( updatePost(
await widget.service.postService.likePost( await widget.service.postService.likePost(
widget.userId, widget.userId,
post, post,
), ),
); );
}, setState(() {});
child: Container( }
color: Colors.transparent, },
child: widget.options.theme.likeIcon ?? icon: Icon(
Icon( isLikedByUser
widget.post.likedBy ? Icons.favorite_rounded
?.contains(widget.userId) ?? : Icons.favorite_outline_outlined,
false color: widget.options.theme.iconColor,
? Icons.favorite_rounded size: widget.options.iconSize,
: Icons.favorite_outline_outlined,
size: widget.options.iconSize,
),
),
), ),
], ),
const SizedBox(width: 8), const SizedBox(width: 8),
if (post.reactionEnabled) if (post.reactionEnabled)
widget.options.theme.commentIcon ?? widget.options.theme.commentIcon ??
@ -360,7 +371,6 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
theme.textTheme.titleSmall theme.textTheme.titleSmall
?.copyWith(color: Colors.black), ?.copyWith(color: Colors.black),
), ),
const SizedBox(height: 4),
Text.rich( Text.rich(
TextSpan( TextSpan(
text: widget.options.nameBuilder?.call(post.creator) ?? text: widget.options.nameBuilder?.call(post.creator) ??
@ -368,14 +378,17 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
widget.options.translations.anonymousUser, widget.options.translations.anonymousUser,
style: widget style: widget
.options.theme.textStyles.postCreatorNameStyle ?? .options.theme.textStyles.postCreatorNameStyle ??
theme.textTheme.titleSmall, theme.textTheme.titleSmall!
.copyWith(color: Colors.black),
children: [ children: [
const TextSpan(text: ' '),
TextSpan( TextSpan(
text: post.title, text: post.title,
style: style:
widget.options.theme.textStyles.postTitleStyle ?? widget.options.theme.textStyles.postTitleStyle ??
theme.textTheme.bodyMedium, theme.textTheme.titleSmall!.copyWith(
color: Colors.black,
fontWeight: FontWeight.w500,
),
), ),
], ],
), ),
@ -387,6 +400,7 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
'body': Style( 'body': Style(
padding: HtmlPaddings.zero, padding: HtmlPaddings.zero,
margin: Margins.zero, margin: Margins.zero,
fontFamily: theme.textTheme.titleSmall?.fontFamily,
), ),
'#': Style( '#': Style(
maxLines: 3, maxLines: 3,
@ -410,20 +424,19 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
), ),
const SizedBox(height: 4), const SizedBox(height: 4),
Text( Text(
'${dateFormat.format(post.createdAt)} ' '${dateFormat.format(post.createdAt)} ',
'${widget.options.translations.postAt} ' style: theme.textTheme.labelSmall,
'${timeFormat.format(post.createdAt)}',
style: theme.textTheme.bodySmall,
), ),
const SizedBox(height: 20), const SizedBox(height: 16),
if (post.reactionEnabled) ...[ if (post.reactionEnabled) ...[
Text( Text(
widget.options.translations.commentsTitleOnPost, widget.options.translations.commentsTitleOnPost,
style: theme.textTheme.titleMedium, style: theme.textTheme.titleSmall!
.copyWith(color: Colors.black),
), ),
for (var reaction for (var reaction
in post.reactions ?? <TimelinePostReaction>[]) ...[ in post.reactions ?? <TimelinePostReaction>[]) ...[
const SizedBox(height: 16), const SizedBox(height: 4),
GestureDetector( GestureDetector(
onLongPressStart: (details) async { onLongPressStart: (details) async {
if (reaction.creatorId == widget.userId || if (reaction.creatorId == widget.userId ||
@ -469,7 +482,7 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
reaction.creator!.imageUrl!.isNotEmpty) ...[ reaction.creator!.imageUrl!.isNotEmpty) ...[
widget.options.userAvatarBuilder?.call( widget.options.userAvatarBuilder?.call(
reaction.creator!, reaction.creator!,
28, 14,
) ?? ) ??
CircleAvatar( CircleAvatar(
radius: 14, radius: 14,
@ -480,7 +493,7 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
] else ...[ ] else ...[
widget.options.anonymousAvatarBuilder?.call( widget.options.anonymousAvatarBuilder?.call(
reaction.creator!, reaction.creator!,
28, 14,
) ?? ) ??
const CircleAvatar( const CircleAvatar(
radius: 14, radius: 14,
@ -501,7 +514,8 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
reaction.creator?.fullName ?? reaction.creator?.fullName ??
widget.options.translations widget.options.translations
.anonymousUser, .anonymousUser,
style: theme.textTheme.titleSmall, style: theme.textTheme.titleSmall!
.copyWith(color: Colors.black),
), ),
Padding( Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
@ -522,12 +536,13 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
reaction.creator?.fullName ?? reaction.creator?.fullName ??
widget widget
.options.translations.anonymousUser, .options.translations.anonymousUser,
style: theme.textTheme.titleSmall, style: theme.textTheme.titleSmall!
.copyWith(color: Colors.black),
children: [ children: [
const TextSpan(text: ' '), const TextSpan(text: ' '),
TextSpan( TextSpan(
text: reaction.reaction ?? '', text: reaction.reaction ?? '',
style: theme.textTheme.bodyMedium, style: theme.textTheme.bodySmall,
), ),
// text should go to new line // text should go to new line
], ],
@ -538,11 +553,12 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
], ],
), ),
), ),
const SizedBox(height: 4),
], ],
if (post.reactions?.isEmpty ?? true) ...[ if (post.reactions?.isEmpty ?? true) ...[
const SizedBox(height: 16),
Text( Text(
widget.options.translations.firstComment, widget.options.translations.firstComment,
style: theme.textTheme.bodySmall,
), ),
], ],
const SizedBox(height: 120), const SizedBox(height: 120),
@ -553,52 +569,67 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
), ),
), ),
if (post.reactionEnabled && !(widget.isOverviewScreen ?? false)) if (post.reactionEnabled && !(widget.isOverviewScreen ?? false))
Align( SafeArea(
alignment: Alignment.bottomCenter, bottom: true,
child: ReactionBottom( child: Align(
messageInputBuilder: textInputBuilder, alignment: Alignment.bottomCenter,
onPressSelectImage: () async { child: Container(
// open the image picker constraints: BoxConstraints(
var result = await showModalBottomSheet<Uint8List?>( maxWidth: MediaQuery.of(context).size.width,
context: context, ),
builder: (context) => Container( child: Row(
padding: const EdgeInsets.all(8.0), crossAxisAlignment: CrossAxisAlignment.center,
color: theme.colorScheme.surface, mainAxisSize: MainAxisSize.min,
child: ImagePicker( children: [
imagePickerConfig: widget.options.imagePickerConfig, Padding(
imagePickerTheme: widget.options.imagePickerTheme, padding: const EdgeInsets.only(left: 8),
child: post.creator!.imageUrl != null
? widget.options.userAvatarBuilder?.call(
post.creator!,
28,
) ??
CircleAvatar(
radius: 14,
backgroundImage: CachedNetworkImageProvider(
post.creator!.imageUrl!,
),
)
: widget.options.anonymousAvatarBuilder?.call(
post.creator!,
28,
) ??
const CircleAvatar(
radius: 14,
child: Icon(
Icons.person,
),
),
), ),
), Flexible(
); child: Padding(
if (result != null) { padding: const EdgeInsets.only(left: 8, right: 16),
updatePost( child: ReactionBottom(
await widget.service.postService.reactToPost( messageInputBuilder: textInputBuilder,
post, onReactionSubmit: (reaction) async => updatePost(
TimelinePostReaction( await widget.service.postService.reactToPost(
id: '', post,
postId: post.id, TimelinePostReaction(
creatorId: widget.userId, id: '',
createdAt: DateTime.now(), postId: post.id,
reaction: reaction,
creatorId: widget.userId,
createdAt: DateTime.now(),
),
),
),
translations: widget.options.translations,
iconColor: widget.options.theme.iconColor,
),
), ),
image: result,
), ),
); ],
}
},
onReactionSubmit: (reaction) async => updatePost(
await widget.service.postService.reactToPost(
post,
TimelinePostReaction(
id: '',
postId: post.id,
reaction: reaction,
creatorId: widget.userId,
createdAt: DateTime.now(),
),
), ),
), ),
translations: widget.options.translations,
iconColor: widget.options.theme.iconColor,
), ),
), ),
], ],

68
packages/flutter_timeline_view/lib/src/widgets/reaction_bottom.dart
View file

@ -11,14 +11,12 @@ class ReactionBottom extends StatefulWidget {
required this.onReactionSubmit, required this.onReactionSubmit,
required this.messageInputBuilder, required this.messageInputBuilder,
required this.translations, required this.translations,
this.onPressSelectImage,
this.iconColor, this.iconColor,
super.key, super.key,
}); });
final Future<void> Function(String text) onReactionSubmit; final Future<void> Function(String text) onReactionSubmit;
final TextInputBuilder messageInputBuilder; final TextInputBuilder messageInputBuilder;
final VoidCallback? onPressSelectImage;
final TimelineTranslations translations; final TimelineTranslations translations;
final Color? iconColor; final Color? iconColor;
@ -30,56 +28,26 @@ class _ReactionBottomState extends State<ReactionBottom> {
final TextEditingController _textEditingController = TextEditingController(); final TextEditingController _textEditingController = TextEditingController();
@override @override
Widget build(BuildContext context) => SafeArea( Widget build(BuildContext context) => widget.messageInputBuilder(
bottom: true, _textEditingController,
child: Container( Padding(
color: Theme.of(context).colorScheme.surface, padding: const EdgeInsets.symmetric(
child: Container( horizontal: 8,
margin: const EdgeInsets.symmetric( ),
horizontal: 12, child: IconButton(
vertical: 8, onPressed: () async {
), var value = _textEditingController.text;
height: 48, if (value.isNotEmpty) {
child: widget.messageInputBuilder( await widget.onReactionSubmit(value);
_textEditingController, _textEditingController.clear();
Padding( }
padding: const EdgeInsets.symmetric( },
horizontal: 4, icon: Icon(
), Icons.send,
child: Row( color: widget.iconColor,
mainAxisSize: MainAxisSize.min,
children: [
if (widget.onPressSelectImage != null) ...[
IconButton(
onPressed: () async {
_textEditingController.clear();
widget.onPressSelectImage?.call();
},
icon: Icon(
Icons.image,
color: widget.iconColor,
),
),
],
IconButton(
onPressed: () async {
var value = _textEditingController.text;
if (value.isNotEmpty) {
await widget.onReactionSubmit(value);
_textEditingController.clear();
}
},
icon: Icon(
Icons.send,
color: widget.iconColor,
),
),
],
),
),
widget.translations.writeComment,
), ),
), ),
), ),
widget.translations.writeComment,
); );
} }