fix: post_creation_screen

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 =
+    this.mainPadding = const EdgeInsets.only(left: 32, top: 20, right: 32),
-        const EdgeInsets.only(left: 12.0, top: 24.0, right: 12.0, bottom: 12.0),
     this.postPadding =
         const EdgeInsets.only(left: 12.0, top: 6, right: 12.0, bottom: 8),
     this.postOverviewButtonBottomPadding = 30.0,

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(
+                style: theme.textTheme.titleMedium,
-                  fontWeight: FontWeight.w800,
-                  fontSize: 20,
               ),
+              const SizedBox(
+                height: 4,
               ),
               widget.options.textInputBuilder?.call(
                     titleController,
                     null,
                     '',
                   ) ??
-                  TextField(
+                  PostCreationTextfield(
-                    maxLength: widget.options.maxTitleLength,
                     controller: titleController,
-                    decoration: widget.options.contentInputDecoration ??
-                        InputDecoration(
                     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(
+                style: theme.textTheme.titleMedium,
-                  fontWeight: FontWeight.w800,
-                  fontSize: 20,
               ),
-              ),
-              const SizedBox(height: 4),
               Text(
                 widget.options.translations.contentDescription,
-                style: theme.textTheme.bodyMedium,
+                style: theme.textTheme.bodySmall,
               ),
-              // input field for the content
+              const SizedBox(
-              TextField(
+                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 ??
+                maxLines: null,
-                    InputDecoration(
-                      hintText: widget.options.translations.contentHintText,
-                    ),
               ),
               const SizedBox(
                 height: 16,
@@ -179,14 +180,11 @@ class _TimelinePostCreationScreenState
               // input field for the content
               Text(
                 widget.options.translations.uploadImage,
-                style: const TextStyle(
+                style: theme.textTheme.titleMedium,
-                  fontWeight: FontWeight.w800,
-                  fontSize: 20,
-                ),
               ),
               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(
+                style: theme.textTheme.titleMedium,
-                  fontWeight: FontWeight.w800,
-                  fontSize: 20,
-                ),
               ),
               Text(
                 widget.options.translations.allowCommentsDescription,
-                style: theme.textTheme.bodyMedium,
+                style: theme.textTheme.bodySmall,
+              ),
+              const SizedBox(
+                height: 8,
               ),
               Row(
                 mainAxisAlignment: MainAxisAlignment.start,
                 children: <Widget>[
                   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,12 +314,17 @@ class _TimelinePostCreationScreenState
                       });
                     },
                   ),
-                  Text(widget.options.translations.no),
+                  Text(
+                    widget.options.translations.no,
+                    style: theme.textTheme.bodyMedium,
+                  ),
                 ],
               ),
               const SizedBox(height: 120),
 
-              Align(
+              SafeArea(
+                bottom: true,
+                child: Align(
                   alignment: Alignment.bottomCenter,
                   child: (widget.options.buttonBuilder != null)
                       ? widget.options.buttonBuilder!(
@@ -318,7 +333,7 @@ class _TimelinePostCreationScreenState
                           widget.options.translations.checkPost,
                           enabled: editingDone,
                         )
-                    : ElevatedButton(
+                      : FilledButton(
                           style: ButtonStyle(
                             backgroundColor: WidgetStatePropertyAll(
                               theme.colorScheme.primary,
@@ -332,15 +347,12 @@ class _TimelinePostCreationScreenState
                                 }
                               : null,
                           child: Padding(
-                          padding: const EdgeInsets.all(12.0),
+                            padding: const EdgeInsets.all(8),
                             child: Text(
                               widget.enablePostOverviewScreen
                                   ? widget.options.translations.checkPost
                                   : widget.options.translations.postCreation,
-                            style: const TextStyle(
+                              style: theme.textTheme.displayLarge,
-                              color: Colors.white,
-                              fontSize: 20,
-                              fontWeight: FontWeight.w800,
                             ),
                           ),
                         ),

packages/flutter_timeline_view/lib/src/screens/timeline_post_screen.dart

@@ -169,7 +169,7 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
           },
           child: SingleChildScrollView(
             child: Padding(
-              padding: widget.options.paddings.mainPadding,
+              padding: widget.options.paddings.postPadding,
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [

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,
+    );
+  }
+}