From 5f6bb26404ab825fb4003a3ddad19e13734d1899 Mon Sep 17 00:00:00 2001 From: Freek van de Ven Date: Wed, 22 May 2024 13:51:33 +0200 Subject: [PATCH] feat: add TimelinePaddingOptions for all the paddings --- CHANGELOG.md | 1 + .../example/lib/config/config.dart | 4 +- .../lib/flutter_timeline_view.dart | 1 + .../lib/src/config/timeline_options.dart | 16 +++--- .../lib/src/config/timeline_paddings.dart | 21 ++++++++ .../timeline_post_creation_screen.dart | 2 +- .../timeline_post_overview_screen.dart | 50 +++++++++++-------- .../lib/src/screens/timeline_post_screen.dart | 2 +- .../lib/src/screens/timeline_screen.dart | 8 +-- .../lib/src/widgets/category_selector.dart | 4 +- 10 files changed, 69 insertions(+), 40 deletions(-) create mode 100644 packages/flutter_timeline_view/lib/src/config/timeline_paddings.dart diff --git a/CHANGELOG.md b/CHANGELOG.md index 8494fed..bdfc69c 100644 --- 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 diff --git a/packages/flutter_timeline/example/lib/config/config.dart b/packages/flutter_timeline/example/lib/config/config.dart index 5eede94..ff46d66 100644 --- 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) => [ diff --git a/packages/flutter_timeline_view/lib/flutter_timeline_view.dart b/packages/flutter_timeline_view/lib/flutter_timeline_view.dart index 1a63bf4..89264d4 100644 --- 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'; diff --git a/packages/flutter_timeline_view/lib/src/config/timeline_options.dart b/packages/flutter_timeline_view/lib/src/config/timeline_options.dart index dc20e32..592bf65 100644 --- 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; diff --git a/packages/flutter_timeline_view/lib/src/config/timeline_paddings.dart b/packages/flutter_timeline_view/lib/src/config/timeline_paddings.dart new file mode 100644 index 0000000..193a0a9 --- /dev/null +++ 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; +} 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 ff08b94..cd36ae3 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 @@ -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, diff --git 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 index 8f8d0dc..e810fe1 100644 --- 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), ], ); } 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 970949e..0cd94a1 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 @@ -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: [ diff --git a/packages/flutter_timeline_view/lib/src/screens/timeline_screen.dart b/packages/flutter_timeline_view/lib/src/screens/timeline_screen.dart index bb0855f..1b75303 100644 --- 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 { 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 { 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 { ), ), SizedBox( - height: widget.options.padding.bottom, + height: widget.options.paddings.mainPadding.bottom, ), ], ); diff --git a/packages/flutter_timeline_view/lib/src/widgets/category_selector.dart b/packages/flutter_timeline_view/lib/src/widgets/category_selector.dart index f62c482..2e69922 100644 --- 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 { 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 { SizedBox( width: widget.options.categoriesOptions .categorySelectorHorizontalPadding ?? - max(widget.options.padding.right - 4, 0), + max(widget.options.paddings.mainPadding.right - 4, 0), ), ], ),