From 32fe08a7af234f7dccc98ac8bd6ea50988aa8642 Mon Sep 17 00:00:00 2001 From: mike doornenbal Date: Tue, 30 Jul 2024 14:35:29 +0200 Subject: [PATCH] fix: post_creation_screen --- .../lib/src/config/timeline_paddings.dart | 3 +- .../timeline_post_creation_screen.dart | 146 ++++++++++-------- .../lib/src/screens/timeline_post_screen.dart | 2 +- .../src/widgets/post_creation_textfield.dart | 63 ++++++++ 4 files changed, 144 insertions(+), 70 deletions(-) create mode 100644 packages/flutter_timeline_view/lib/src/widgets/post_creation_textfield.dart diff --git a/packages/flutter_timeline_view/lib/src/config/timeline_paddings.dart b/packages/flutter_timeline_view/lib/src/config/timeline_paddings.dart index d42a2a4..b3dc27f 100644 --- a/packages/flutter_timeline_view/lib/src/config/timeline_paddings.dart +++ b/packages/flutter_timeline_view/lib/src/config/timeline_paddings.dart @@ -3,8 +3,7 @@ import 'package:flutter/material.dart'; /// This class contains the paddings used in the timeline options class TimelinePaddingOptions { const TimelinePaddingOptions({ - this.mainPadding = - const EdgeInsets.only(left: 12.0, top: 24.0, right: 12.0, bottom: 12.0), + this.mainPadding = const EdgeInsets.only(left: 32, top: 20, right: 32), this.postPadding = const EdgeInsets.only(left: 12.0, top: 6, right: 12.0, bottom: 8), this.postOverviewButtonBottomPadding = 30.0, diff --git a/packages/flutter_timeline_view/lib/src/screens/timeline_post_creation_screen.dart b/packages/flutter_timeline_view/lib/src/screens/timeline_post_creation_screen.dart index 64b45b9..df3c1df 100644 --- a/packages/flutter_timeline_view/lib/src/screens/timeline_post_creation_screen.dart +++ b/packages/flutter_timeline_view/lib/src/screens/timeline_post_creation_screen.dart @@ -11,6 +11,7 @@ import 'package:flutter_image_picker/flutter_image_picker.dart'; import 'package:flutter_timeline_interface/flutter_timeline_interface.dart'; import 'package:flutter_timeline_view/flutter_timeline_view.dart'; import 'package:flutter_timeline_view/src/config/timeline_options.dart'; +import 'package:flutter_timeline_view/src/widgets/post_creation_textfield.dart'; class TimelinePostCreationScreen extends StatefulWidget { const TimelinePostCreationScreen({ @@ -119,6 +120,7 @@ class _TimelinePostCreationScreenState } var theme = Theme.of(context); + return GestureDetector( onTap: () => FocusScope.of(context).unfocus(), child: Padding( @@ -130,48 +132,47 @@ class _TimelinePostCreationScreenState children: [ Text( widget.options.translations.title, - style: const TextStyle( - fontWeight: FontWeight.w800, - fontSize: 20, - ), + style: theme.textTheme.titleMedium, + ), + const SizedBox( + height: 4, ), widget.options.textInputBuilder?.call( titleController, null, '', ) ?? - TextField( - maxLength: widget.options.maxTitleLength, + PostCreationTextfield( controller: titleController, - decoration: widget.options.contentInputDecoration ?? - InputDecoration( - hintText: widget.options.translations.titleHintText, - ), + hintText: widget.options.translations.titleHintText, + textMaxLength: widget.options.maxTitleLength, + decoration: widget.options.titleInputDecoration, + textCapitalization: null, + expands: null, + minLines: null, + maxLines: 1, ), const SizedBox(height: 16), Text( widget.options.translations.content, - style: const TextStyle( - fontWeight: FontWeight.w800, - fontSize: 20, - ), + style: theme.textTheme.titleMedium, ), - const SizedBox(height: 4), Text( widget.options.translations.contentDescription, - style: theme.textTheme.bodyMedium, + style: theme.textTheme.bodySmall, ), - // input field for the content - TextField( + const SizedBox( + height: 4, + ), + PostCreationTextfield( controller: contentController, + hintText: widget.options.translations.contentHintText, + textMaxLength: null, + decoration: widget.options.contentInputDecoration, textCapitalization: TextCapitalization.sentences, expands: false, - maxLines: null, minLines: null, - decoration: widget.options.contentInputDecoration ?? - InputDecoration( - hintText: widget.options.translations.contentHintText, - ), + maxLines: null, ), const SizedBox( height: 16, @@ -179,14 +180,11 @@ class _TimelinePostCreationScreenState // input field for the content Text( widget.options.translations.uploadImage, - style: const TextStyle( - fontWeight: FontWeight.w800, - fontSize: 20, - ), + style: theme.textTheme.titleMedium, ), Text( widget.options.translations.uploadImageDescription, - style: theme.textTheme.bodyMedium, + style: theme.textTheme.bodySmall, ), // image picker field const SizedBox( @@ -273,19 +271,22 @@ class _TimelinePostCreationScreenState Text( widget.options.translations.commentsTitle, - style: const TextStyle( - fontWeight: FontWeight.w800, - fontSize: 20, - ), + style: theme.textTheme.titleMedium, ), Text( widget.options.translations.allowCommentsDescription, - style: theme.textTheme.bodyMedium, + style: theme.textTheme.bodySmall, + ), + const SizedBox( + height: 8, ), Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Checkbox( + materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, + visualDensity: + const VisualDensity(horizontal: -4, vertical: -4), activeColor: theme.colorScheme.primary, value: allowComments, onChanged: (value) { @@ -294,8 +295,17 @@ class _TimelinePostCreationScreenState }); }, ), - Text(widget.options.translations.yes), + Text( + widget.options.translations.yes, + style: theme.textTheme.bodyMedium, + ), + const SizedBox( + width: 32, + ), Checkbox( + materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, + visualDensity: + const VisualDensity(horizontal: -4, vertical: -4), activeColor: theme.colorScheme.primary, value: !allowComments, onChanged: (value) { @@ -304,47 +314,49 @@ class _TimelinePostCreationScreenState }); }, ), - Text(widget.options.translations.no), + Text( + widget.options.translations.no, + style: theme.textTheme.bodyMedium, + ), ], ), const SizedBox(height: 120), - Align( - alignment: Alignment.bottomCenter, - child: (widget.options.buttonBuilder != null) - ? widget.options.buttonBuilder!( - context, - onPostCreated, - widget.options.translations.checkPost, - enabled: editingDone, - ) - : ElevatedButton( - style: ButtonStyle( - backgroundColor: WidgetStatePropertyAll( - theme.colorScheme.primary, + SafeArea( + bottom: true, + child: Align( + alignment: Alignment.bottomCenter, + child: (widget.options.buttonBuilder != null) + ? widget.options.buttonBuilder!( + context, + onPostCreated, + widget.options.translations.checkPost, + enabled: editingDone, + ) + : FilledButton( + style: ButtonStyle( + backgroundColor: WidgetStatePropertyAll( + theme.colorScheme.primary, + ), ), - ), - onPressed: editingDone - ? () async { - await onPostCreated(); - await widget.service.postService - .fetchPosts(null); - } - : null, - child: Padding( - padding: const EdgeInsets.all(12.0), - child: Text( - widget.enablePostOverviewScreen - ? widget.options.translations.checkPost - : widget.options.translations.postCreation, - style: const TextStyle( - color: Colors.white, - fontSize: 20, - fontWeight: FontWeight.w800, + onPressed: editingDone + ? () async { + await onPostCreated(); + await widget.service.postService + .fetchPosts(null); + } + : null, + child: Padding( + padding: const EdgeInsets.all(8), + child: Text( + widget.enablePostOverviewScreen + ? widget.options.translations.checkPost + : widget.options.translations.postCreation, + style: theme.textTheme.displayLarge, ), ), ), - ), + ), ), ], ), diff --git a/packages/flutter_timeline_view/lib/src/screens/timeline_post_screen.dart b/packages/flutter_timeline_view/lib/src/screens/timeline_post_screen.dart index 2f3e80a..3fbc855 100644 --- a/packages/flutter_timeline_view/lib/src/screens/timeline_post_screen.dart +++ b/packages/flutter_timeline_view/lib/src/screens/timeline_post_screen.dart @@ -169,7 +169,7 @@ class _TimelinePostScreenState extends State { }, child: SingleChildScrollView( child: Padding( - padding: widget.options.paddings.mainPadding, + padding: widget.options.paddings.postPadding, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ diff --git a/packages/flutter_timeline_view/lib/src/widgets/post_creation_textfield.dart b/packages/flutter_timeline_view/lib/src/widgets/post_creation_textfield.dart new file mode 100644 index 0000000..96a3263 --- /dev/null +++ b/packages/flutter_timeline_view/lib/src/widgets/post_creation_textfield.dart @@ -0,0 +1,63 @@ +import 'package:flutter/material.dart'; + +class PostCreationTextfield extends StatelessWidget { + const PostCreationTextfield({ + required this.controller, + required this.hintText, + super.key, + this.textMaxLength, + this.decoration, + this.textCapitalization, + this.expands, + this.minLines, + this.maxLines, + }); + + final TextEditingController controller; + final String hintText; + final int? textMaxLength; + final InputDecoration? decoration; + final TextCapitalization? textCapitalization; + // ignore: avoid_positional_boolean_parameters + final bool? expands; + final int? minLines; + final int? maxLines; + @override + Widget build(BuildContext context) { + var theme = Theme.of(context); + return TextField( + style: theme.textTheme.bodySmall, + controller: controller, + maxLength: textMaxLength, + decoration: decoration ?? + InputDecoration( + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: BorderSide.none, + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: BorderSide.none, + ), + contentPadding: const EdgeInsets.symmetric( + vertical: 0, + horizontal: 16, + ), + hintText: hintText, + hintStyle: theme.textTheme.bodySmall!.copyWith( + color: theme.textTheme.bodySmall!.color!.withOpacity(0.5), + ), + fillColor: Colors.white, + filled: true, + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: BorderSide.none, + ), + ), + textCapitalization: textCapitalization ?? TextCapitalization.none, + expands: expands ?? false, + minLines: minLines, + maxLines: maxLines, + ); + } +}