Hasan/eatvio_app
1
0
Fork 0
forked from eatvio/eatvio_app
Code Pull Requests Activity

feat(post_creation): added multiple image posts creation and validation

Browse Source
This commit is contained in:
misha
2026-08-04 17:47:43 +03:00
parent 3210f38d4a
commit 04de956769
21 changed files with 2791 additions and 982 deletions
Download Patch File Download Diff File Expand all files Collapse all files

695
lib/features/blog_post_create/presentation/pages/blog_post_create_screen.dart
View File

@@ -1,7 +1,7 @@
import 'dart:async';
import 'dart:io';
import 'package:eatvio_app/app_keys.dart';
import 'package:eatvio_app/core/app_config.dart';
import 'package:eatvio_app/core/app_router.dart';
import 'package:eatvio_app/core/permission_handler/permission_handler.dart';
import 'package:eatvio_app/core/theme/app_decoration.dart';
@@ -12,8 +12,13 @@ import 'package:eatvio_app/features/blog_post_create/bloc/blog_post_create_cubit
import 'package:eatvio_app/core/locator_service.dart';
import 'package:eatvio_app/core/theme/theme_helper.dart';
import 'package:eatvio_app/core/widgets/custom_text_form_field.dart';
import 'package:eatvio_app/features/blog_post_create/repositories/blog_post_repository.dart';
import 'package:eatvio_app/features/create_diet/presentation/widgets/error_widget.dart';
import 'package:eatvio_app/features/feed/models/feed_blog_post_model.dart';
import 'package:eatvio_app/features/feed/models/post_feed_mapper.dart';
import 'package:eatvio_app/features/feed/models/post_feed_pagination_model.dart';
import 'package:eatvio_app/features/feed/presentation/bloc/feed_cubit/feed_cubit.dart';
import 'package:eatvio_app/features/profile/presentation/bloc/profile_cubit/profile_cubit.dart';
import 'package:eatvio_app/generated/l10n.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
@@ -36,20 +41,31 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
final blogPostCubit = sl<BlogPostCreateCubit>();
bool shrinkImage = false;
late StreamSubscription<bool> keyboardSubscription;
XFile? image;
final List<FeedGalleryImage> savedImages = [];
final List<XFile> pendingImages = [];
final List<int> mediaIdsToDelete = [];
final titleController = TextEditingController();
final descriptionController = TextEditingController();
final videoUrlController = TextEditingController();
bool isLoading = false;
bool enableMdPanel = false;
bool isPreviewMode = false;
final FocusNode descriptionFocusNode = FocusNode();
bool get _isEditMode => widget.feedBlogPostModel != null;
int get _galleryCount => savedImages.length + pendingImages.length;
int get _remainingSlots =>
BlogPostRepository.maxGalleryImages - _galleryCount;
@override
void initState() {
super.initState();
blogPostCubit.resetFormErrors();
var keyboardVisibilityController = KeyboardVisibilityController();
keyboardSubscription = keyboardVisibilityController.onChange.listen((bool visible) {
keyboardSubscription = keyboardVisibilityController.onChange.listen((
bool visible,
) {
setState(() {
shrinkImage = visible;
enableMdPanel = visible;
@@ -59,6 +75,9 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
titleController.text = widget.feedBlogPostModel!.title;
descriptionController.text = widget.feedBlogPostModel!.description;
videoUrlController.text = widget.feedBlogPostModel!.videoUrl;
savedImages.addAll(
widget.feedBlogPostModel!.images.where((image) => image.id != null),
);
}
}
@@ -66,6 +85,9 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
void dispose() {
keyboardSubscription.cancel();
descriptionFocusNode.dispose();
titleController.dispose();
descriptionController.dispose();
videoUrlController.dispose();
super.dispose();
}
@@ -78,9 +100,16 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
return selectedText.startsWith(prefix) && selectedText.endsWith(suffix);
} else {
final cursorPosition = selection.baseOffset;
if (cursorPosition >= prefix.length && text.length >= cursorPosition + suffix.length) {
final beforeCursor = text.substring(cursorPosition - prefix.length, cursorPosition);
final afterCursor = text.substring(cursorPosition, cursorPosition + suffix.length);
if (cursorPosition >= prefix.length &&
text.length >= cursorPosition + suffix.length) {
final beforeCursor = text.substring(
cursorPosition - prefix.length,
cursorPosition,
);
final afterCursor = text.substring(
cursorPosition,
cursorPosition + suffix.length,
);
return beforeCursor == prefix && afterCursor == suffix;
}
}
@@ -93,23 +122,36 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
if (selection.isValid && !selection.isCollapsed) {
final selectedText = text.substring(selection.start, selection.end);
final unformattedText = selectedText.substring(prefix.length, selectedText.length - suffix.length);
final unformattedText = selectedText.substring(
prefix.length,
selectedText.length - suffix.length,
);
final newText = text.replaceRange(selection.start, selection.end, unformattedText);
final newText = text.replaceRange(
selection.start,
selection.end,
unformattedText,
);
descriptionController.text = newText;
final newSelection = TextSelection(baseOffset: selection.start, extentOffset: selection.start + unformattedText.length);
final newSelection = TextSelection(
baseOffset: selection.start,
extentOffset: selection.start + unformattedText.length,
);
descriptionController.selection = newSelection;
} else {
final cursorPosition = selection.baseOffset;
if (cursorPosition >= prefix.length && text.length >= cursorPosition + suffix.length) {
if (cursorPosition >= prefix.length &&
text.length >= cursorPosition + suffix.length) {
final beforeCursor = text.substring(0, cursorPosition - prefix.length);
final afterCursor = text.substring(cursorPosition + suffix.length);
final newText = beforeCursor + afterCursor;
descriptionController.text = newText;
final newCursorPosition = cursorPosition - prefix.length;
descriptionController.selection = TextSelection.collapsed(offset: newCursorPosition);
descriptionController.selection = TextSelection.collapsed(
offset: newCursorPosition,
);
}
}
}
@@ -122,18 +164,28 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
final selectedText = text.substring(selection.start, selection.end);
final formattedText = '$prefix$selectedText$suffix';
final newText = text.replaceRange(selection.start, selection.end, formattedText);
final newText = text.replaceRange(
selection.start,
selection.end,
formattedText,
);
descriptionController.text = newText;
final newSelection = TextSelection(baseOffset: selection.start, extentOffset: selection.start + formattedText.length);
final newSelection = TextSelection(
baseOffset: selection.start,
extentOffset: selection.start + formattedText.length,
);
descriptionController.selection = newSelection;
} else {
final cursorPosition = selection.baseOffset;
final newText = '${text.substring(0, cursorPosition)}$prefix$suffix${text.substring(cursorPosition)}';
final newText =
'${text.substring(0, cursorPosition)}$prefix$suffix${text.substring(cursorPosition)}';
descriptionController.text = newText;
final newCursorPosition = cursorPosition + prefix.length;
descriptionController.selection = TextSelection.collapsed(offset: newCursorPosition);
descriptionController.selection = TextSelection.collapsed(
offset: newCursorPosition,
);
}
}
@@ -188,17 +240,31 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
if (linkRegex.hasMatch(selectedText)) {
final match = linkRegex.firstMatch(selectedText);
final linkText = match?.group(1) ?? selectedText;
final newText = text.replaceRange(selection.start, selection.end, linkText);
final newText = text.replaceRange(
selection.start,
selection.end,
linkText,
);
descriptionController.text = newText;
final newSelection = TextSelection(baseOffset: selection.start, extentOffset: selection.start + linkText.length);
final newSelection = TextSelection(
baseOffset: selection.start,
extentOffset: selection.start + linkText.length,
);
descriptionController.selection = newSelection;
} else {
final formattedText = '[$selectedText](url)';
final newText = text.replaceRange(selection.start, selection.end, formattedText);
final newText = text.replaceRange(
selection.start,
selection.end,
formattedText,
);
descriptionController.text = newText;
final newSelection = TextSelection(baseOffset: selection.start + selectedText.length + 2, extentOffset: selection.start + selectedText.length + 5);
final newSelection = TextSelection(
baseOffset: selection.start + selectedText.length + 2,
extentOffset: selection.start + selectedText.length + 5,
);
descriptionController.selection = newSelection;
}
} else {
@@ -209,11 +275,14 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
void _applyHorizontalRule() {
final cursorPosition = descriptionController.selection.baseOffset;
final text = descriptionController.text;
final newText = '${text.substring(0, cursorPosition)}\n---\n${text.substring(cursorPosition)}';
final newText =
'${text.substring(0, cursorPosition)}\n---\n${text.substring(cursorPosition)}';
descriptionController.text = newText;
final newCursorPosition = cursorPosition + 5;
descriptionController.selection = TextSelection.collapsed(offset: newCursorPosition);
descriptionController.selection = TextSelection.collapsed(
offset: newCursorPosition,
);
}
void _togglePreview() {
@@ -240,7 +309,9 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
borderRadius: BorderRadius.circular(20),
border: Border.all(color: const Color(0xFFE0E0E0)),
),
child: SingleChildScrollView(child: _parseMarkdown(descriptionController.text)),
child: SingleChildScrollView(
child: _parseMarkdown(descriptionController.text),
),
);
}
@@ -248,7 +319,11 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
if (text.isEmpty) {
return const Text(
'Описание',
style: TextStyle(fontSize: 16, color: Color(0xFF323F4B), fontWeight: FontWeight.w500),
style: TextStyle(
fontSize: 16,
color: Color(0xFF323F4B),
fontWeight: FontWeight.w500,
),
);
}
@@ -267,21 +342,33 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
widgets.add(
Text(
line.substring(2),
style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.black),
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
);
} else if (line.startsWith('## ')) {
widgets.add(
Text(
line.substring(3),
style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.black),
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
);
} else if (line.startsWith('### ')) {
widgets.add(
Text(
line.substring(4),
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.black),
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
);
} else if (line.startsWith('- ') || line.startsWith('* ')) {
@@ -307,7 +394,11 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('$number. ', style: const TextStyle(fontSize: 16)),
Expanded(child: _parseInlineMarkdown(line.substring(number.length + 2))),
Expanded(
child: _parseInlineMarkdown(
line.substring(number.length + 2),
),
),
],
),
),
@@ -323,7 +414,10 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
}
}
return Column(crossAxisAlignment: CrossAxisAlignment.start, children: widgets);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: widgets,
);
}
Widget _parseInlineMarkdown(String text) {
@@ -347,14 +441,22 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
spans.add(
TextSpan(
text: matchedText.substring(2, matchedText.length - 2),
style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.black),
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
);
} else if (matchedText.startsWith('*') && matchedText.endsWith('*')) {
spans.add(
TextSpan(
text: matchedText.substring(1, matchedText.length - 1),
style: const TextStyle(fontSize: 16, fontStyle: FontStyle.italic, color: Colors.black),
style: const TextStyle(
fontSize: 16,
fontStyle: FontStyle.italic,
color: Colors.black,
),
),
);
} else if (matchedText.startsWith('[') && matchedText.contains('](')) {
@@ -364,7 +466,11 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
spans.add(
TextSpan(
text: linkText,
style: const TextStyle(fontSize: 16, color: Colors.blue, decoration: TextDecoration.underline),
style: const TextStyle(
fontSize: 16,
color: Colors.blue,
decoration: TextDecoration.underline,
),
),
);
}
@@ -390,9 +496,11 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
return BlocProvider<BlogPostCreateCubit>(
create: (BuildContext context) => blogPostCubit,
child: BlocListener<BlogPostCreateCubit, BlogPostCreateState>(
bloc: blogPostCubit,
listener: (BuildContext context, BlogPostCreateState state) {
if (state is BlogPostCreateStateLoaded) {
if (state.isSuccess) {
context.read<FeedCubit>().loadFeedBlogPostList();
ProfileCubit.myProfileCubit?.reloadBlogPosts();
}
},
child: _buildBlogPostCreate(context),
@@ -401,6 +509,10 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
}
void _showImagePicker() {
if (_remainingSlots <= 0) {
return;
}
showCupertinoModalPopup<void>(
context: context,
builder: (context) {
@@ -415,14 +527,27 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
description: s.allowAccessToCameraDescription,
onGranted: () async {
final picker = ImagePicker();
image = await picker.pickImage(source: ImageSource.camera);
setState(() {});
final image = await picker.pickImage(
source: ImageSource.camera,
);
if (image != null && _remainingSlots > 0) {
setState(() {
pendingImages.add(image);
});
blogPostCubit.clearImagesError();
}
AppRouter.navigatorKey.currentContext?.pop();
},
context: context,
);
},
child: const Row(children: [Icon(Icons.photo_camera), SizedBox(width: 8), Text('Фото')]),
child: const Row(
children: [
Icon(Icons.photo_camera),
SizedBox(width: 8),
Text('Фото'),
],
),
),
CupertinoActionSheetAction(
onPressed: () async {
@@ -432,30 +557,88 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
description: s.allowAcessToGaleryDescription,
onGranted: () async {
final picker = ImagePicker();
image = await picker.pickImage(source: ImageSource.gallery);
setState(() {});
final images = await picker.pickMultiImage(
limit: _remainingSlots,
);
if (images.isNotEmpty) {
setState(() {
pendingImages.addAll(images.take(_remainingSlots));
});
blogPostCubit.clearImagesError();
}
if (!context.mounted) return;
AppRouter.navigatorKey.currentContext?.pop();
},
context: context,
);
},
child: const Row(children: [Icon(Icons.photo), SizedBox(width: 8), Text('Галерея')]),
child: const Row(
children: [
Icon(Icons.photo),
SizedBox(width: 8),
Text('Галерея'),
],
),
),
],
cancelButton: CupertinoActionSheetAction(onPressed: () => Navigator.of(context).pop(), isDestructiveAction: true, child: const Text('Отмена')),
cancelButton: CupertinoActionSheetAction(
onPressed: () => Navigator.of(context).pop(),
isDestructiveAction: true,
child: const Text('Отмена'),
),
);
},
);
}
void _removeSavedImage(int index) {
final image = savedImages[index];
final mediaId = image.id;
setState(() {
savedImages.removeAt(index);
if (mediaId != null) {
mediaIdsToDelete.add(mediaId);
}
});
}
void _removePendingImage(int index) {
setState(() {
pendingImages.removeAt(index);
});
}
void _onReorderGallery(int oldIndex, int newIndex) {
setState(() {
if (newIndex > oldIndex) {
newIndex -= 1;
}
if (oldIndex < savedImages.length && newIndex < savedImages.length) {
final item = savedImages.removeAt(oldIndex);
savedImages.insert(newIndex, item);
return;
}
final pendingOld = oldIndex - savedImages.length;
final pendingNew = newIndex - savedImages.length;
if (pendingOld >= 0 && pendingNew >= 0) {
final item = pendingImages.removeAt(pendingOld);
pendingImages.insert(pendingNew, item);
}
});
}
Widget _mdButton(IconData icon, Function() onTap) {
return Expanded(
child: GestureDetector(
onTap: onTap,
child: Container(
height: 36,
decoration: BoxDecoration(color: const Color(0xFFF1F2F6), borderRadius: BorderRadius.circular(10)),
decoration: BoxDecoration(
color: const Color(0xFFF1F2F6),
borderRadius: BorderRadius.circular(10),
),
child: Icon(icon),
),
),
@@ -468,11 +651,18 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
onTap: onTap,
child: Container(
height: 36,
decoration: BoxDecoration(color: const Color(0xFFF1F2F6), borderRadius: BorderRadius.circular(10)),
decoration: BoxDecoration(
color: const Color(0xFFF1F2F6),
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text(
text,
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w900, color: Colors.black87),
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.w900,
color: Colors.black87,
),
),
),
),
@@ -496,7 +686,12 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(color: const Color(0x00000000).withValues(alpha: 0.2), spreadRadius: 0, blurRadius: 32, offset: const Offset(0, 0)),
BoxShadow(
color: const Color(0x00000000).withValues(alpha: 0.2),
spreadRadius: 0,
blurRadius: 32,
offset: const Offset(0, 0),
),
],
),
child: Row(
@@ -508,9 +703,15 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
const SizedBox(width: 8),
_mdButton(Icons.format_italic, _applyItalic),
const SizedBox(width: 8),
_mdButton(Icons.format_list_numbered, _applyNumberedList),
_mdButton(
Icons.format_list_numbered,
_applyNumberedList,
),
const SizedBox(width: 8),
_mdButton(Icons.format_list_bulleted, _applyBulletedList),
_mdButton(
Icons.format_list_bulleted,
_applyBulletedList,
),
const SizedBox(width: 8),
_mdButton(Icons.link, _applyLink),
const SizedBox(width: 8),
@@ -528,157 +729,297 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [BoxShadow(color: const Color(0x00000000).withValues(alpha: 0.2), spreadRadius: 0, blurRadius: 32, offset: const Offset(0, 0))],
boxShadow: [
BoxShadow(
color: const Color(0x00000000).withValues(alpha: 0.2),
spreadRadius: 0,
blurRadius: 32,
offset: const Offset(0, 0),
),
],
),
child: Row(
children: [
_mdButton(
isPreviewMode ? Icons.edit : Icons.visibility,
_togglePreview,
),
],
),
child: Row(children: [_mdButton(isPreviewMode ? Icons.edit : Icons.visibility, _togglePreview)]),
),
],
)
: null,
appBar: AppBar(),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
body: BlocBuilder<BlogPostCreateCubit, BlogPostCreateState>(
bloc: blogPostCubit,
builder: (context, state) {
return SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 16),
const Text('Заголовок'),
const SizedBox(height: 8),
CustomTextFormField(
key: AppKeys.blogPostCreateScreenTitleTextField,
controller: titleController,
hasError: state.titleError != null,
onChanged: (_) => blogPostCubit.clearTitleError(),
),
if (state.titleError != null) ...[
const SizedBox(height: 4),
ValidationErrorWidget(error: state.titleError!),
],
const SizedBox(height: 16),
const Text('Описание'),
const SizedBox(height: 8),
isPreviewMode
? _buildMarkdownPreview()
: CustomTextFormField(
key: AppKeys.blogPostCreateScreenContentTextField,
controller: descriptionController,
focusNode: descriptionFocusNode,
maxLines: 6,
minLines: 4,
hasError: state.descriptionError != null,
onChanged: (_) => blogPostCubit.clearDescriptionError(),
),
if (state.descriptionError != null) ...[
const SizedBox(height: 4),
ValidationErrorWidget(error: state.descriptionError!),
],
const SizedBox(height: 16),
Text(
'Изображения ($_galleryCount/${BlogPostRepository.maxGalleryImages})',
),
const SizedBox(height: 8),
_buildGallery(),
if (state.imagesError != null) ...[
const SizedBox(height: 4),
ValidationErrorWidget(error: state.imagesError!),
],
const SizedBox(height: 16),
const Text('Ссылка на видео'),
const SizedBox(height: 4),
Text(
'Rutube, VK или OK',
style: TextStyle(fontSize: 13, color: appTheme.blueGray300),
),
const SizedBox(height: 8),
CustomTextFormField(
key: AppKeys.blogPostCreateScreenVideoLinkTextField,
controller: videoUrlController,
hasError: state.videoUrlError != null,
keyboardType: TextInputType.url,
onChanged: (_) => blogPostCubit.clearVideoUrlError(),
),
if (state.videoUrlError != null) ...[
const SizedBox(height: 4),
ValidationErrorWidget(error: state.videoUrlError!),
],
if (state.formError != null) ...[
const SizedBox(height: 16),
ValidationErrorWidget(error: state.formError!),
],
const SizedBox(height: 80),
_createBlogPostButton(isSubmitting: state.isLoading),
const SizedBox(height: 80),
],
),
);
},
),
);
}
Future<void> _submitBlogPost() async {
if (blogPostCubit.state.isLoading) {
return;
}
final title = titleController.text.trim();
final description = descriptionController.text.trim();
final videoUrl = videoUrlController.text.trim();
final existingMediaIds = savedImages.map((image) => image.id!).toList();
final bool result;
if (_isEditMode) {
result = await blogPostCubit.updateBlogPost(
id: widget.feedBlogPostModel!.id,
title: title,
description: description,
videoUrl: videoUrl,
existingMediaIds: existingMediaIds,
newImages: pendingImages,
mediaIdsToDelete: List<int>.from(mediaIdsToDelete),
);
} else {
result = await blogPostCubit.createBlogPost(
title: title,
description: description,
videoUrl: videoUrl,
images: pendingImages,
);
}
if (!result) {
if (!mounted) return;
if (blogPostCubit.state.hasValidationErrors) {
return;
}
showErrorDialog(
context,
title: _isEditMode
? S.current.could_not_update_blog_post
: S.current.could_not_publish_blog_post,
);
} else {
if (!mounted) return;
if (context.canPop()) {
context.pop();
}
}
}
Widget _createBlogPostButton({required bool isSubmitting}) {
return InkWell(
key: AppKeys.blogPostCreateScreenCreateButton,
onTap: isSubmitting ? null : _submitBlogPost,
borderRadius: BorderRadius.circular(16),
child: isSubmitting
? const Center(child: Loader())
: Ink(
width: MediaQuery.of(context).size.width - 32,
height: 52,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: appTheme.blueA400,
),
child: Center(
child: Text(
_isEditMode ? 'Сохранить' : 'Создать',
style: const TextStyle(color: Colors.white),
),
),
),
);
}
Widget _buildGallery() {
final itemHeight = shrinkImage ? 72.0 : 112.0;
return SizedBox(
height: itemHeight,
child: ReorderableListView.builder(
scrollDirection: Axis.horizontal,
buildDefaultDragHandles: false,
onReorder: _onReorderGallery,
itemCount: _galleryCount + (_remainingSlots > 0 ? 1 : 0),
itemBuilder: (context, index) {
if (index == _galleryCount) {
return KeyedSubtree(
key: const ValueKey('add-photo'),
child: _buildAddPhotoTile(itemHeight),
);
}
if (index < savedImages.length) {
final image = savedImages[index];
final url = PostFeedMapper.resolveMediaUrl(image.url);
return KeyedSubtree(
key: ValueKey('saved-${image.id}'),
child: _buildGalleryTile(
index: index,
height: itemHeight,
imageProvider: NetworkImage(url),
onRemove: () => _removeSavedImage(index),
),
);
}
final pendingIndex = index - savedImages.length;
final pending = pendingImages[pendingIndex];
return KeyedSubtree(
key: ValueKey('pending-${pending.path}'),
child: _buildGalleryTile(
index: index,
height: itemHeight,
imageProvider: FileImage(File(pending.path)),
onRemove: () => _removePendingImage(pendingIndex),
),
);
},
),
);
}
Widget _buildAddPhotoTile(double height) {
return GestureDetector(
onTap: _showImagePicker,
child: Container(
width: height,
height: height,
margin: const EdgeInsets.only(right: 8),
decoration: AppDecoration.fillGray.copyWith(
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 16),
const Text('Заголовок'),
const SizedBox(height: 8),
CustomTextFormField(key: AppKeys.blogPostCreateScreenTitleTextField, controller: titleController),
const SizedBox(height: 16),
const Text('Описание'),
const SizedBox(height: 8),
isPreviewMode
? _buildMarkdownPreview()
: CustomTextFormField(
key: AppKeys.blogPostCreateScreenContentTextField,
controller: descriptionController,
focusNode: descriptionFocusNode,
maxLines: 6,
minLines: 4,
),
const SizedBox(height: 16),
if (videoUrlController.text.isEmpty) const Text('Изображение поста'),
if (videoUrlController.text.isEmpty) const SizedBox(height: 8),
if (videoUrlController.text.isEmpty) _buildAddPhoto(),
const SizedBox(height: 16),
if (image == null && widget.feedBlogPostModel?.image == null) const Text('Ссылка на видео'),
if (image == null && widget.feedBlogPostModel?.image == null) const SizedBox(height: 8),
if (image == null && widget.feedBlogPostModel?.image == null)
CustomTextFormField(key: AppKeys.blogPostCreateScreenVideoLinkTextField, controller: videoUrlController),
const SizedBox(height: 80),
_createBlogPostButton(),
const SizedBox(height: 80),
Icon(Icons.photo_library, color: appTheme.blueGray300),
const SizedBox(height: 4),
Text(
'Добавить',
style: TextStyle(fontSize: 12, color: appTheme.blueGray300),
),
],
),
),
);
}
Widget _createBlogPostButton() {
return InkWell(
onTap: isLoading
? null
: () async {
setState(() {
isLoading = true;
});
if (widget.feedBlogPostModel != null) {
final result = await blogPostCubit.updateBlogPost(
id: widget.feedBlogPostModel!.id,
title: titleController.text,
description: descriptionController.text,
videoUrl: videoUrlController.text,
image: image,
oldImageUrl: widget.feedBlogPostModel!.image,
);
setState(() {
isLoading = false;
});
if (!result) {
if (!mounted) return;
showErrorDialog(context, title: S.current.could_not_update_blog_post);
} else {
if (!mounted) return;
if (context.canPop()) {
context.pop();
}
}
} else {
final result = await blogPostCubit.createBlogPost(
title: titleController.text,
description: descriptionController.text,
videoUrl: videoUrlController.text,
image: image,
);
setState(() {
isLoading = false;
});
if (!result) {
if (!mounted) return;
showErrorDialog(context, title: S.current.could_not_publish_blog_post);
} else {
if (!mounted) return;
if (context.canPop()) {
context.pop();
}
}
}
},
borderRadius: BorderRadius.circular(16),
child: isLoading
? const Center(child: Loader())
: Ink(
width: MediaQuery.of(context).size.width - 32,
height: 52,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(16), color: appTheme.blueA400),
child: const Center(
child: Text('Создать', style: TextStyle(color: Colors.white)),
),
),
);
}
GestureDetector _buildAddPhoto() {
return GestureDetector(
onTap: () {
_showImagePicker();
},
child: Stack(
children: [
if (image == null && widget.feedBlogPostModel?.image == null)
AnimatedContainer(
height: shrinkImage ? 52 : 128,
curve: Curves.easeIn,
duration: const Duration(milliseconds: 150),
decoration: AppDecoration.fillGray.copyWith(borderRadius: BorderRadius.circular(16)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.photo_library, color: appTheme.blueGray300),
const SizedBox(width: 8),
Text("Добавить фото", selectionColor: appTheme.blueA400),
],
),
),
if (image != null)
SizedBox(
width: shrinkImage ? 52 : MediaQuery.of(context).size.width - 32,
Widget _buildGalleryTile({
required int index,
required double height,
required ImageProvider imageProvider,
required VoidCallback onRemove,
}) {
return ReorderableDelayedDragStartListener(
index: index,
child: Container(
width: height,
height: height,
margin: const EdgeInsets.only(right: 8),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned.fill(
child: ClipRRect(
borderRadius: BorderRadius.circular(16),
child: Image(image: FileImage(File(image!.path))),
child: Image(image: imageProvider, fit: BoxFit.cover),
),
),
if (widget.feedBlogPostModel?.image != null && image == null)
SizedBox(
width: shrinkImage ? 52 : MediaQuery.of(context).size.width - 32,
child: ClipRRect(
borderRadius: BorderRadius.circular(16),
child: Image(image: NetworkImage('${sl<AppConfig>().baseUrl}/storage/${widget.feedBlogPostModel!.image}')),
Positioned(
top: -6,
right: -6,
child: Material(
color: Colors.white,
shape: const CircleBorder(),
elevation: 1,
child: InkWell(
customBorder: const CircleBorder(),
onTap: onRemove,
child: const Padding(
padding: EdgeInsets.all(4),
child: Icon(Icons.close, size: 16),
),
),
),
),
],
],
),
),
);
}