feat: add TimelinePaddingOptions for all the paddings

CHANGELOG.md

@@ -11,6 +11,7 @@
 - Use the adaptive variants of the material elements in the timeline
 - Change the default blue color to the primary color of the Theme.of(context) in the timeline
 - Change the TimelineTranslations constructor to require all translations or use the TimelineTranslations.empty constructor if you don't want to specify all translations
+- Add a TimelinePaddingOptions class to store the padding options for the timeline
 
 ## 3.0.1
 

packages/flutter_timeline/example/lib/config/config.dart

@@ -12,7 +12,9 @@ TimelineUserStoryConfiguration getConfig(TimelineService service) {
 
 var options = TimelineOptions(
   textInputBuilder: null,
-  padding: const EdgeInsets.all(20).copyWith(top: 28),
+  paddings: TimelinePaddingOptions(
+    mainPadding: const EdgeInsets.all(20).copyWith(top: 28),
+  ),
   allowAllDeletion: true,
   categoriesOptions: CategoriesOptions(
     categoriesBuilder: (context) => [

packages/flutter_timeline_view/lib/flutter_timeline_view.dart

@@ -5,6 +5,7 @@
 library flutter_timeline_view;
 
 export 'src/config/timeline_options.dart';
+export 'src/config/timeline_paddings.dart';
 export 'src/config/timeline_styles.dart';
 export 'src/config/timeline_theme.dart';
 export 'src/config/timeline_translations.dart';

packages/flutter_timeline_view/lib/src/config/timeline_options.dart

@@ -5,6 +5,7 @@ import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_image_picker/flutter_image_picker.dart';
 import 'package:flutter_timeline_interface/flutter_timeline_interface.dart';
+import 'package:flutter_timeline_view/src/config/timeline_paddings.dart';
 import 'package:flutter_timeline_view/src/config/timeline_theme.dart';
 import 'package:flutter_timeline_view/src/config/timeline_translations.dart';
 import 'package:intl/intl.dart';
@@ -13,6 +14,7 @@ class TimelineOptions {
   const TimelineOptions({
     this.theme = const TimelineTheme(),
     this.translations = const TimelineTranslations.empty(),
+    this.paddings = const TimelinePaddingOptions(),
     this.imagePickerConfig = const ImagePickerConfig(),
     this.imagePickerTheme = const ImagePickerTheme(),
     this.timelinePostHeight,
@@ -37,12 +39,8 @@ class TimelineOptions {
     this.userAvatarBuilder,
     this.anonymousAvatarBuilder,
     this.nameBuilder,
-    this.padding =
-        const EdgeInsets.only(left: 12.0, top: 24.0, right: 12.0, bottom: 12.0),
     this.iconSize = 26,
     this.postWidgetHeight,
-    this.postPadding =
-        const EdgeInsets.symmetric(vertical: 12.0, horizontal: 12.0),
     this.filterOptions = const FilterOptions(),
     this.categoriesOptions = const CategoriesOptions(),
     this.requireImageForPost = false,
@@ -79,8 +77,12 @@ class TimelineOptions {
   /// The height of a post in the timeline
   final double? timelinePostHeight;
 
+  /// Class that contains all the translations used in the timeline
   final TimelineTranslations translations;
 
+  /// Class that contains all the paddings used in the timeline
+  final TimelinePaddingOptions paddings;
+
   final ButtonBuilder? buttonBuilder;
 
   final TextInputBuilder? textInputBuilder;
@@ -116,18 +118,12 @@ class TimelineOptions {
   /// The builder for the divider
   final Widget Function()? dividerBuilder;
 
-  /// The padding between posts in the timeline
-  final EdgeInsets padding;
-
   /// Size of icons like the comment and like icons. Dafualts to 26
   final double iconSize;
 
   /// Sets a predefined height for the postWidget.
   final double? postWidgetHeight;
 
-  /// Padding of each post
-  final EdgeInsets postPadding;
-
   /// Options for filtering
   final FilterOptions filterOptions;
 

packages/flutter_timeline_view/lib/src/config/timeline_paddings.dart

@@ -0,0 +1,21 @@
+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.postPadding =
+        const EdgeInsets.symmetric(vertical: 12.0, horizontal: 12.0),
+    this.postOverviewButtonBottomPadding = 30.0,
+  });
+
+  /// The padding between posts in the timeline
+  final EdgeInsets mainPadding;
+
+  /// The padding of each post
+  final EdgeInsets postPadding;
+
+  /// The bottom padding of the button on the post overview screen
+  final double postOverviewButtonBottomPadding;
+}

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

@@ -121,7 +121,7 @@ class _TimelinePostCreationScreenState
     return GestureDetector(
       onTap: () => FocusScope.of(context).unfocus(),
       child: Padding(
-        padding: widget.options.padding,
+        padding: widget.options.paddings.mainPadding,
         child: SingleChildScrollView(
           child: Column(
             mainAxisSize: MainAxisSize.max,

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

@@ -19,9 +19,11 @@ class TimelinePostOverviewScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    var buttonText = '${options.translations.postIn} ${timelinePost.category}';
     return Column(
+      mainAxisSize: MainAxisSize.max,
       children: [
-        Flexible(
+        Expanded(
           child: TimelinePostScreen(
             userId: timelinePost.creatorId,
             options: options,
@@ -36,31 +38,37 @@ class TimelinePostOverviewScreen extends StatelessWidget {
               () {
                 onPostSubmit(timelinePost);
               },
-              '${options.translations.postIn} ${timelinePost.category}',
+              buttonText,
             ) ??
-            Padding(
+            options.buttonBuilder?.call(
-              padding: const EdgeInsets.only(bottom: 30.0),
+              context,
-              child: ElevatedButton(
+              () {
-                style: ButtonStyle(
+                onPostSubmit(timelinePost);
-                  backgroundColor:
+              },
-                      MaterialStatePropertyAll(Theme.of(context).primaryColor),
+              buttonText,
-                ),
+              enabled: true,
-                onPressed: () {
+            ) ??
-                  onPostSubmit(timelinePost);
+            ElevatedButton(
-                },
+              style: ButtonStyle(
-                child: Padding(
+                backgroundColor:
-                  padding: const EdgeInsets.all(12.0),
+                    MaterialStatePropertyAll(Theme.of(context).primaryColor),
-                  child: Text(
+              ),
-                    '${options.translations.postIn} ${timelinePost.category}',
+              onPressed: () {
-                    style: const TextStyle(
+                onPostSubmit(timelinePost);
-                      color: Colors.white,
+              },
-                      fontSize: 20,
+              child: Padding(
-                      fontWeight: FontWeight.w800,
+                padding: const EdgeInsets.all(12.0),
-                    ),
+                child: Text(
+                  buttonText,
+                  style: const TextStyle(
+                    color: Colors.white,
+                    fontSize: 20,
+                    fontWeight: FontWeight.w800,
                   ),
                 ),
               ),
             ),
+        SizedBox(height: options.paddings.postOverviewButtonBottomPadding),
       ],
     );
   }

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

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

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

@@ -147,14 +147,14 @@ class _TimelineScreenState extends State<TimelineScreen> {
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             SizedBox(
-              height: widget.options.padding.top,
+              height: widget.options.paddings.mainPadding.top,
             ),
             if (widget.filterEnabled) ...[
               Padding(
                 padding: EdgeInsets.symmetric(
                   // left: widget.options.padding.left,
                   // right: widget.options.padding.right,
-                  horizontal: widget.options.padding.horizontal,
+                  horizontal: widget.options.paddings.mainPadding.horizontal,
                 ),
                 child: Row(
                   crossAxisAlignment: CrossAxisAlignment.end,
@@ -240,7 +240,7 @@ class _TimelineScreenState extends State<TimelineScreen> {
                           const SizedBox.shrink(),
                       ...posts.map(
                         (post) => Padding(
-                          padding: widget.options.postPadding,
+                          padding: widget.options.paddings.postPadding,
                           child: widget.postWidgetBuilder?.call(post) ??
                               TimelinePostWidget(
                                 service: service,
@@ -303,7 +303,7 @@ class _TimelineScreenState extends State<TimelineScreen> {
               ),
             ),
             SizedBox(
-              height: widget.options.padding.bottom,
+              height: widget.options.paddings.mainPadding.bottom,
             ),
           ],
         );

packages/flutter_timeline_view/lib/src/widgets/category_selector.dart

@@ -37,7 +37,7 @@ class _CategorySelectorState extends State<CategorySelector> {
           SizedBox(
             width: widget.options.categoriesOptions
                     .categorySelectorHorizontalPadding ??
-                max(widget.options.padding.left - 20, 0),
+                max(widget.options.paddings.mainPadding.left - 20, 0),
           ),
           for (var category in categories) ...[
             widget.options.categoriesOptions.categoryButtonBuilder?.call(
@@ -61,7 +61,7 @@ class _CategorySelectorState extends State<CategorySelector> {
           SizedBox(
             width: widget.options.categoriesOptions
                     .categorySelectorHorizontalPadding ??
-                max(widget.options.padding.right - 4, 0),
+                max(widget.options.paddings.mainPadding.right - 4, 0),
           ),
         ],
       ),