feat: add TimelinePaddingOptions for all the paddings

2025-05-18 18:13:46 +02:00 · 2024-05-22 13:51:33 +02:00 · 2024-05-22 13:51:33 +02:00 · 5f6bb26404
commit 5f6bb26404
parent ab0f96121e
10 changed files with 69 additions and 40 deletions
--- a/CHANGELOG.md
+++ b/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

--- a/packages/flutter_timeline/example/lib/config/config.dart
+++ b/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) => [
--- a/packages/flutter_timeline_view/lib/flutter_timeline_view.dart
+++ b/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';
--- a/packages/flutter_timeline_view/lib/src/config/timeline_options.dart
+++ b/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;

--- a/packages/flutter_timeline_view/lib/src/config/timeline_paddings.dart
+++ b/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;
+}
--- 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
@ -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,
--- a/packages/flutter_timeline_view/lib/src/screens/timeline_post_overview_screen.dart
+++ b/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(
-              padding: const EdgeInsets.only(bottom: 30.0),
-              child: ElevatedButton(
-                style: ButtonStyle(
-                  backgroundColor:
-                      MaterialStatePropertyAll(Theme.of(context).primaryColor),
-                ),
-                onPressed: () {
-                  onPostSubmit(timelinePost);
-                },
-                child: Padding(
-                  padding: const EdgeInsets.all(12.0),
-                  child: Text(
-                    '${options.translations.postIn} ${timelinePost.category}',
-                    style: const TextStyle(
-                      color: Colors.white,
-                      fontSize: 20,
-                      fontWeight: FontWeight.w800,
-                    ),
+            options.buttonBuilder?.call(
+              context,
+              () {
+                onPostSubmit(timelinePost);
+              },
+              buttonText,
+              enabled: true,
+            ) ??
+            ElevatedButton(
+              style: ButtonStyle(
+                backgroundColor:
+                    MaterialStatePropertyAll(Theme.of(context).primaryColor),
+              ),
+              onPressed: () {
+                onPostSubmit(timelinePost);
+              },
+              child: Padding(
+                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),
      ],
    );
  }
--- a/packages/flutter_timeline_view/lib/src/screens/timeline_post_screen.dart
+++ b/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: [
--- a/packages/flutter_timeline_view/lib/src/screens/timeline_screen.dart
+++ b/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,
            ),
          ],
        );
--- a/packages/flutter_timeline_view/lib/src/widgets/category_selector.dart
+++ b/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),
          ),
        ],
      ),