.fvmrc

@@ -1,3 +0,0 @@
-{
-  "flutter": "3.22.2"
-}

.gitignore

@@ -50,7 +50,4 @@ pubspec_overrides.yaml
 **/example/macos
 **/example/windows
 **/example/web
-**/example/README.md
-
-# FVM Version Cache
-.fvm/
+**/example/README.md

CHANGELOG.md

@@ -1,66 +1,3 @@
-## 5.1.1
-
-- Be honest about which Dart and Flutter versions we support
-- Relax our Firebase version constraint, we also support the current newest versions
-
-## 5.1.0
-
-* Added `routeToPostDetail` to the `TimelineUserStory` to allow for navigation to the post detail screen.
-* Fixed design issues.
-
-## 4.1.0
-- Migrate to flutter 3.22 which deprecates the background and onBackground properties in the ThemeData and also removes MaterialStatePropertyAll
-- Add categorySelectionButtonSelectedTextColor and categorySelectionButtonUnselectedTextColor to the timeline theme to allow for the customization of the text color of the category selection buttons
-- Show loading indicator when loading a post in the post screen
-
-## 4.0.0
-
-- Add a serviceBuilder to the userstory configuration
-- Add a listHeaderBuilder for showing a header at the top of the list of posts in the timeline
-- Add a getUserId function to retrieve the userId when needed in the userstory configuration
-- Fix the timelinecategory selection by removing the categories with key null
-- Set an optional max length on the default post title input field
-- Add a postCreationFloatingActionButtonColor to the timeline theme to set the color of the floating action button
-- Add a post and a category to the postViewOpenPageBuilder function
-- Add a refresh functionality to the timeline with a pull to refresh callback to allow additional functionality when refreshing the timeline
-- 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
-- fix the avatar size to match the new design
-- Add the iconbutton for image uploading back to the ReactionBottom
-- Fix category key is correctly used for saving timeline posts and category title is shown everywhere
-- Fix when clicking on post delete in the post screen of the userstory it will now navigate back to the timeline and delete the post
-- Fix like icon being used for both like and unliked posts
-- Fix post creator can only like the post once and after it is actually created
-- Change the CategorySelectorButton to use more styling options and allow for an icon to be shown
-- Fix incorrect timeline reaction name
-- Add a dialog for post deletion confirmation
-- Add a callback method to determine if a user can delete posts that gets called when needed
-
-## 3.0.1
-
-- Fixed postOverviewScreen not displaying the creators name.
-
-## 3.0.0
-- Add default styling and default flow
-
-## 2.3.1
-
-- Updated readme.
-- fixed bug in `localTimelinePostService` where it was not possible to make a post.
-
-## 2.3.0
-
-- Added separate open page builders for timeline screens
-- Fixed afterPostCreationGoHome routing in gorouter and navigater user stories
-
-## 2.2.0
-
-- Add all routes to gorouter and navigator user stories
-- Added enablePostOverviewScreen to config
-- Update flutter_image_picker to 1.0.5
-
 ## 2.1.0
 
 - Fixed multiline textfield not being dismissible.

README.md

@@ -1,6 +1,6 @@
 # Flutter Timeline
 
-Flutter Timeline is a package which shows a list posts by a user. This package also has additional features like liking a post and leaving comments. Default this package adds support for a Firebase back-end.
+Flutter Timeline is a package which shows a list posts by a user. This package also has additional features like liking a post and leaving comments. Default this package adds support for a Firebase back-end. You can add your custom back-end (like a Websocket-API) by extending the `CommunityChatInterface` interface from the `flutter_community_chat_interface` package.
 
 ![Flutter Timeline GIF](example.gif)
 
@@ -8,10 +8,10 @@ Flutter Timeline is a package which shows a list posts by a user. This package a
 To use this package, add flutter_timeline as a dependency in your pubspec.yaml file:
 
 ```
-  flutter_timeline:
+  flutter_timeline
     git: 
-      url: https://github.com/Iconica-Development/flutter_timeline.git
-      path: packages/flutter_timeline
+        url: https://github.com/Iconica-Development/flutter_timeline.git
+        path: packages/flutter_timeline
 ```
 
 If you are going to use Firebase as the back-end of the Timeline, you should also add the following package as a dependency to your pubspec.yaml file:
@@ -19,23 +19,52 @@ If you are going to use Firebase as the back-end of the Timeline, you should als
 ```
   flutter_timeline_firebase:
     git: 
-      url: https://github.com/Iconica-Development/flutter_timeline.git
-      path: packages/flutter_timeline_firebase
+        url: https://github.com/Iconica-Development/flutter_timeline.git
+        path: packages/flutter_timeline_firebase
 ```
 
-In firebase add firestore and storage to your project.
-In firestore add a collection named `timeline` and a collection named `users`.
-In the `timeline` collection all posts will be stored. In the `users` collection all users will be stored.
-In the `users` collection you should add your users data.
-
 Add the following code in your `main` function, before the runApp().
-And import this package:   import 'package:intl/date_symbol_data_local.dart';
 ```
   initializeDateFormatting();
 ```
 
 ## How to use
-To use the userstory add the following code somewhere in your widget tree:
+To use the module within your Flutter-application with predefined `Go_router` routes you should add the following:
+
+Add go_router as dependency to your project.
+Add the following configuration to your flutter_application:
+
+```
+List<GoRoute> getTimelineStoryRoutes() => getTimelineStoryRoutes(
+      TimelineUserStoryConfiguration(
+        service: FirebaseTimelineService(),
+        userService: FirebaseUserService(),
+        userId: currentUserId,
+        optionsBuilder: (context) => FirebaseOptions(),
+      ),
+    );
+```
+
+Add the `getTimelineStoryRoutes()` to your go_router routes like so:
+
+```
+final GoRouter _router = GoRouter(
+  routes: <RouteBase>[
+    GoRoute(
+      path: '/',
+      builder: (BuildContext context, GoRouterState state) {
+        return const MyHomePage(
+          title: "home",
+        );
+      },
+    ),
+    ...getTimelineStoryRoutes(timelineUserStoryConfiguration)
+  ],
+);
+```
+
+The user story can also be used without go router:
+Add the following code somewhere in your widget tree:
 
 ````
 timeLineNavigatorUserStory(TimelineUserStoryConfiguration, context),
@@ -97,9 +126,6 @@ TimelinePostCreationScreen(
 ),
 ```
 
-You can choose to show an overview of the post before actually posting it using the `enablePostOverviewScreen` config setting.
-
-
 The `TimelineOptions` has its own parameters, as specified below:
 
 | Parameter | Explanation |
@@ -110,17 +136,11 @@ The `TimelineOptions` has its own parameters, as specified below:
 | imagePickerTheme | Theme for the image picker in the post creation screen. |
 | timelinePostHeight | Sets the height for each post widget in the list of post. If null, the size depends on the size of the image. |
 | allowAllDeletion | Determines of users are allowed to delete thier own posts. |
-| afterPostCreationGoHome | Boolean to enable redirect to home after post creation. If false, it will redirect to created post screen. |
-| enablePostOverviewScreen | Boolean to enable timeline post overview screen before submitting. |
 | sortCommentsAscending | Determines if the comments are sorted from old to new or new to old. |
 | sortPostsAscending | Determines if the posts are sorted from old to new or new to old. |
 | doubleTapToLike | Enables the abilty to double tap the image to like the post. |
 | iconsWithValues | Ability to provide desired text and tanslations. |
 | likeAndDislikeIconsForDoubleTap | Ability to override the standard icon which appears on double tap. |
-| homeOpenPageBuilder | Open page builder function for the home page. |
-| postCreationOpenPageBuilder | Open page builder function for the post creation page. |
-| postViewOpenPageBuilder | Open page builder function for the post view page. |
-| postOverviewOpenPageBuilder | Open page builder function for the post overview page. |
 | itemInfoBuilder | Ability to override the bottom of the postwidgets. (Everything under the like and comment icons) |
 | dateFormat | Sets the used date format |
 | timeFormat | Sets the used time format |
@@ -133,16 +153,12 @@ The `TimelineOptions` has its own parameters, as specified below:
 | padding | Padding used for the whole page. |
 | iconSize | Size of icons like the comment and like icons. Dafualts to 26. |
 | postWidgetHeight | Ability to provide desired text and tanslations. |
-| minTitleLength | Minimum length of the title. |
-| maxTitleLength | Maximum length of the title. |
-| minContentLength | Minimum length of the post content. |
-| maxContentLength | Maximum length of the post content. |
 | postPadding | Padding for each post. |
 | filterOptions | Options for using the filter to filter posts. |
 | categoriesOptions | Options for using the category selector to provide posts of a certain category. |
 
 
-The `ImagePickerTheme` and `imagePickerConfig` also have their own parameters, how to use these parameters can be found in [the documentation of the flutter_image_picker package](https://github.com/Iconica-Development/flutter_image_picker).
+The `ImagePickerTheme` ans `imagePickerConfig` also have their own parameters, how to use these parameters can be found in [the documentation of the flutter_image_picker package](https://github.com/Iconica-Development/flutter_image_picker).
 
 
 ## Issues

packages/flutter_timeline/CHANGELOG.md

@@ -1 +0,0 @@
-../../CHANGELOG.md

packages/flutter_timeline/LICENSE

@@ -1 +0,0 @@
-../../LICENSE

packages/flutter_timeline/README.md

@@ -1 +0,0 @@
-../../README.md

packages/flutter_timeline/example/lib/apps/go_router/app.dart

@@ -0,0 +1,36 @@
+import 'package:example/config/config.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_timeline/flutter_timeline.dart';
+import 'package:go_router/go_router.dart';
+
+List<GoRoute> getTimelineRoutes() => getTimelineStoryRoutes(
+      configuration: getConfig(TimelineService(
+        postService: LocalTimelinePostService(),
+      )),
+    );
+
+final _router = GoRouter(
+  initialLocation: '/timeline',
+  routes: [
+    ...getTimelineRoutes(),
+  ],
+);
+
+class GoRouterApp extends StatelessWidget {
+  const GoRouterApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp.router(
+      routerConfig: _router,
+      title: 'Flutter Timeline',
+      theme: ThemeData(
+        colorScheme:
+            ColorScheme.fromSeed(seedColor: Colors.deepPurple).copyWith(
+          background: const Color(0xFFB8E2E8),
+        ),
+        useMaterial3: true,
+      ),
+    );
+  }
+}

packages/flutter_timeline/example/lib/apps/navigator/app.dart

@@ -12,7 +12,7 @@ class NavigatorApp extends StatelessWidget {
       theme: ThemeData(
         colorScheme:
             ColorScheme.fromSeed(seedColor: Colors.deepPurple).copyWith(
-          surface: const Color(0xFFB8E2E8),
+          background: const Color(0xFFB8E2E8),
         ),
         useMaterial3: true,
       ),
@@ -37,9 +37,43 @@ class _MyHomePageState extends State<MyHomePage> {
 
   @override
   Widget build(BuildContext context) {
-    return timeLineNavigatorUserStory(
-      context: context,
-      configuration: getConfig(timelineService),
+    return Scaffold(
+      floatingActionButton: Column(
+        mainAxisAlignment: MainAxisAlignment.end,
+        children: [
+          FloatingActionButton(
+            heroTag: 'btn1',
+            onPressed: () => createPost(
+              context,
+              timelineService,
+              timelineOptions,
+              getConfig(timelineService),
+            ),
+            child: const Icon(
+              Icons.edit,
+              color: Colors.white,
+            ),
+          ),
+          const SizedBox(
+            height: 8,
+          ),
+          FloatingActionButton(
+            heroTag: 'btn2',
+            onPressed: () => generatePost(timelineService),
+            child: const Icon(
+              Icons.add,
+              color: Colors.white,
+            ),
+          ),
+        ],
+      ),
+      body: SafeArea(
+        child: timeLineNavigatorUserStory(
+            configuration: getConfig(
+              timelineService,
+            ),
+            context: context),
+      ),
     );
   }
 }

packages/flutter_timeline/example/lib/apps/widgets/app.dart

@@ -13,7 +13,7 @@ class WidgetApp extends StatelessWidget {
       theme: ThemeData(
         colorScheme:
             ColorScheme.fromSeed(seedColor: Colors.deepPurple).copyWith(
-          surface: const Color(0xFFB8E2E8),
+          background: const Color(0xFFB8E2E8),
         ),
         useMaterial3: true,
       ),

packages/flutter_timeline/example/lib/apps/widgets/screens/post_screen.dart

@@ -34,13 +34,7 @@ class _PostScreenState extends State<PostScreen> {
 
 class TestUserService implements TimelineUserService {
   final Map<String, TimelinePosterUserModel> _users = {
-    'test_user': const TimelinePosterUserModel(
-      userId: 'test_user',
-      imageUrl:
-          'https://cdn.britannica.com/68/143568-050-5246474F/Donkey.jpg?w=400&h=300&c=crop',
-      firstName: 'Dirk',
-      lastName: 'lukassen',
-    )
+    'test_user': const TimelinePosterUserModel(userId: 'test_user')
   };
 
   @override

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

@@ -6,15 +6,31 @@ TimelineUserStoryConfiguration getConfig(TimelineService service) {
     service: service,
     userId: 'test_user',
     optionsBuilder: (context) => options,
-    enablePostOverviewScreen: false,
-    canDeleteAllPosts: (_) => true,
   );
 }
 
 var options = TimelineOptions(
   textInputBuilder: null,
-  paddings: TimelinePaddingOptions(
-    mainPadding: const EdgeInsets.all(20).copyWith(top: 28),
+  padding: const EdgeInsets.all(20).copyWith(top: 28),
+  allowAllDeletion: true,
+  categoriesOptions: CategoriesOptions(
+    categoriesBuilder: (context) => [
+      const TimelineCategory(
+        key: null,
+        title: 'All',
+        icon: SizedBox.shrink(),
+      ),
+      const TimelineCategory(
+        key: 'category1',
+        title: 'Category 1',
+        icon: SizedBox.shrink(),
+      ),
+      const TimelineCategory(
+        key: 'category2',
+        title: 'Category 2',
+        icon: SizedBox.shrink(),
+      ),
+    ],
   ),
 );
 
@@ -55,7 +71,7 @@ void createPost(
     MaterialPageRoute(
       builder: (context) => Scaffold(
         body: TimelinePostCreationScreen(
-          postCategory: 'category1',
+          postCategory: null,
           userId: 'test_user',
           service: service,
           options: options,
@@ -65,7 +81,6 @@ void createPost(
           onPostOverview: (post) {
             navigateToOverview(context, service, options, post);
           },
-          enablePostOverviewScreen: configuration.enablePostOverviewScreen,
         ),
       ),
     ),
@@ -84,13 +99,6 @@ void generatePost(TimelineService service) {
       content: "Post $amountOfPosts content",
       likes: 0,
       reaction: 0,
-      creator: const TimelinePosterUserModel(
-        userId: 'test_user',
-        imageUrl:
-            'https://cdn.britannica.com/68/143568-050-5246474F/Donkey.jpg?w=400&h=300&c=crop',
-        firstName: 'Dirk',
-        lastName: 'lukassen',
-      ),
       createdAt: DateTime.now(),
       reactionEnabled: amountOfPosts % 2 == 0 ? false : true,
       imageUrl: amountOfPosts % 3 != 0

packages/flutter_timeline/example/lib/main.dart

@@ -1,9 +1,15 @@
-import 'package:example/apps/navigator/app.dart';
+// import 'package:example/apps/go_router/app.dart';
+// import 'package:example/apps/navigator/app.dart';
+import 'package:example/apps/widgets/app.dart';
 import 'package:flutter/material.dart';
 import 'package:intl/date_symbol_data_local.dart';
 
 void main() {
   initializeDateFormatting();
 
-  runApp(const NavigatorApp());
+  // Uncomment any, but only one, of these lines to run the example with specific navigation.
+
+  runApp(const WidgetApp());
+  // runApp(const NavigatorApp());
+  // runApp(const GoRouterApp());
 }

packages/flutter_timeline/example/pubspec.yaml

@@ -38,6 +38,7 @@ dependencies:
   flutter_timeline:
     path: ../
   intl: ^0.19.0
+  go_router: ^13.0.1
 
 dev_dependencies:
   flutter_test:

packages/flutter_timeline/example/test/widget_test.dart

@@ -1,29 +0,0 @@
-// This is a basic Flutter widget test.
-//
-// To perform an interaction with a widget in your test, use the WidgetTester
-// utility in the flutter_test package. For example, you can send tap and scroll
-// gestures. You can also use WidgetTester to find child widgets in the widget
-// tree, read text, and verify that the values of widget properties are correct.
-
-import 'package:example/apps/widgets/app.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-
-void main() {
-  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
-    // Build our app and trigger a frame.
-    await tester.pumpWidget(const WidgetApp());
-
-    // Verify that our counter starts at 0.
-    expect(find.text('0'), findsOneWidget);
-    expect(find.text('1'), findsNothing);
-
-    // Tap the '+' icon and trigger a frame.
-    await tester.tap(find.byIcon(Icons.add));
-    await tester.pump();
-
-    // Verify that our counter has incremented.
-    expect(find.text('0'), findsNothing);
-    expect(find.text('1'), findsOneWidget);
-  });
-}

packages/flutter_timeline/lib/flutter_timeline.dart

@@ -6,6 +6,7 @@
 library flutter_timeline;
 
 export 'package:flutter_timeline/src/flutter_timeline_navigator_userstory.dart';
+export 'package:flutter_timeline/src/flutter_timeline_userstory.dart';
 export 'package:flutter_timeline/src/models/timeline_configuration.dart';
 export 'package:flutter_timeline/src/routes.dart';
 export 'package:flutter_timeline_interface/flutter_timeline_interface.dart';

packages/flutter_timeline/lib/src/flutter_timeline_navigator_userstory.dart

@@ -10,13 +10,11 @@ import 'package:flutter_timeline/flutter_timeline.dart';
 /// This function creates a navigator for displaying user stories on a timeline.
 /// It takes a [BuildContext] and an optional [TimelineUserStoryConfiguration]
 /// as parameters. If no configuration is provided, default values will be used.
-late TimelineUserStoryConfiguration timelineUserStoryConfiguration;
-
 Widget timeLineNavigatorUserStory({
   required BuildContext context,
   TimelineUserStoryConfiguration? configuration,
 }) {
-  timelineUserStoryConfiguration = configuration ??
+  var config = configuration ??
       TimelineUserStoryConfiguration(
         userId: 'test_user',
         service: TimelineService(
@@ -25,10 +23,7 @@ Widget timeLineNavigatorUserStory({
         optionsBuilder: (context) => const TimelineOptions(),
       );
 
-  return _timelineScreenRoute(
-    config: timelineUserStoryConfiguration,
-    context: context,
-  );
+  return _timelineScreenRoute(configuration: config, context: context);
 }
 
 /// A widget function that creates a timeline screen route.
@@ -38,80 +33,38 @@ Widget timeLineNavigatorUserStory({
 /// parameters. If no configuration is provided, default values will be used.
 Widget _timelineScreenRoute({
   required BuildContext context,
-  required TimelineUserStoryConfiguration config,
-  String? initalCategory,
+  TimelineUserStoryConfiguration? configuration,
 }) {
-  var timelineScreen = TimelineScreen(
-    timelineCategory: initalCategory,
-    userId: config.getUserId?.call(context) ?? config.userId,
-    allowAllDeletion: config.canDeleteAllPosts?.call(context) ?? false,
-    onUserTap: (user) => config.onUserTap?.call(context, user),
+  var config = configuration ??
+      TimelineUserStoryConfiguration(
+        userId: 'test_user',
+        service: TimelineService(
+          postService: LocalTimelinePostService(),
+        ),
+        optionsBuilder: (context) => const TimelineOptions(),
+      );
+
+  return TimelineScreen(
     service: config.service,
     options: config.optionsBuilder(context),
+    userId: config.userId,
     onPostTap: (post) async =>
         config.onPostTap?.call(context, post) ??
         Navigator.of(context).push(
           MaterialPageRoute(
             builder: (context) => _postDetailScreenRoute(
-              config: config,
+              configuration: config,
               context: context,
               post: post,
             ),
           ),
         ),
-    onRefresh: config.onRefresh,
+    onUserTap: (userId) {
+      config.onUserTap?.call(context, userId);
+    },
     filterEnabled: config.filterEnabled,
     postWidgetBuilder: config.postWidgetBuilder,
   );
-  var theme = Theme.of(context);
-  var button = FloatingActionButton(
-    backgroundColor: config
-            .optionsBuilder(context)
-            .theme
-            .postCreationFloatingActionButtonColor ??
-        theme.colorScheme.primary,
-    onPressed: () async {
-      var selectedCategory = config.service.postService.selectedCategory;
-      if (selectedCategory != null && selectedCategory.key != null) {
-        await Navigator.of(context).push(
-          MaterialPageRoute(
-            builder: (context) => _postCreationScreenRoute(
-              config: config,
-              context: context,
-              category: selectedCategory,
-            ),
-          ),
-        );
-      } else {
-        await Navigator.of(context).push(
-          MaterialPageRoute(
-            builder: (context) => _postCategorySelectionScreen(
-              config: config,
-              context: context,
-            ),
-          ),
-        );
-      }
-    },
-    shape: const CircleBorder(),
-    child: const Icon(
-      Icons.add,
-      color: Colors.white,
-      size: 24,
-    ),
-  );
-
-  return config.homeOpenPageBuilder?.call(context, timelineScreen, button) ??
-      Scaffold(
-        appBar: AppBar(
-          title: Text(
-            config.optionsBuilder(context).translations.timeLineScreenTitle,
-            style: theme.textTheme.headlineLarge,
-          ),
-        ),
-        body: timelineScreen,
-        floatingActionButton: button,
-      );
 }
 
 /// A widget function that creates a post detail screen route.
@@ -123,252 +76,25 @@ Widget _timelineScreenRoute({
 Widget _postDetailScreenRoute({
   required BuildContext context,
   required TimelinePost post,
-  required TimelineUserStoryConfiguration config,
+  TimelineUserStoryConfiguration? configuration,
 }) {
-  var timelinePostScreen = TimelinePostScreen(
-    userId: config.getUserId?.call(context) ?? config.userId,
-    allowAllDeletion: config.canDeleteAllPosts?.call(context) ?? false,
-    options: config.optionsBuilder(context),
+  var config = configuration ??
+      TimelineUserStoryConfiguration(
+        userId: 'test_user',
+        service: TimelineService(
+          postService: LocalTimelinePostService(),
+        ),
+        optionsBuilder: (context) => const TimelineOptions(),
+      );
+
+  return TimelinePostScreen(
+    userId: config.userId,
     service: config.service,
+    options: config.optionsBuilder(context),
     post: post,
-    onPostDelete: () async =>
-        config.onPostDelete?.call(context, post) ??
-        () async {
+    onPostDelete: () async {
+      config.onPostDelete?.call(context, post) ??
           await config.service.postService.deletePost(post);
-          if (context.mounted) {
-            Navigator.of(context).pop();
-          }
-        }.call(),
-    onUserTap: (user) => config.onUserTap?.call(context, user),
-  );
-
-  var category = config.service.postService.categories
-      .firstWhere((element) => element.key == post.category);
-
-  var backButton = IconButton(
-    color: Colors.white,
-    icon: const Icon(Icons.arrow_back_ios),
-    onPressed: () => Navigator.of(context).pop(),
-  );
-
-  return config.postViewOpenPageBuilder
-          ?.call(context, timelinePostScreen, backButton, post, category) ??
-      Scaffold(
-        appBar: AppBar(
-          iconTheme: Theme.of(context).appBarTheme.iconTheme,
-          title: Text(
-            category.title.toLowerCase(),
-            style: TextStyle(
-              color: Theme.of(context).primaryColor,
-              fontSize: 24,
-              fontWeight: FontWeight.w800,
-            ),
-          ),
-        ),
-        body: timelinePostScreen,
-      );
-}
-
-/// A widget function that creates a post creation screen route.
-///
-/// This function creates a route for displaying a post creation screen.
-/// It takes a [BuildContext] and an optional [TimelineUserStoryConfiguration]
-/// as parameters. If no configuration is provided, default values will be used.
-Widget _postCreationScreenRoute({
-  required BuildContext context,
-  required TimelineCategory category,
-  required TimelineUserStoryConfiguration config,
-}) {
-  var timelinePostCreationScreen = TimelinePostCreationScreen(
-    userId: config.getUserId?.call(context) ?? config.userId,
-    options: config.optionsBuilder(context),
-    service: config.service,
-    onPostCreated: (post) async {
-      var newPost = await config.service.postService.createPost(post);
-
-      if (!context.mounted) return;
-      if (config.afterPostCreationGoHome) {
-        await Navigator.pushReplacement(
-          context,
-          MaterialPageRoute(
-            builder: (context) => _timelineScreenRoute(
-              config: config,
-              context: context,
-              initalCategory: category.title,
-            ),
-          ),
-        );
-      } else {
-        await Navigator.push(
-          context,
-          MaterialPageRoute(
-            builder: (context) => _postOverviewScreenRoute(
-              config: config,
-              context: context,
-              post: newPost,
-            ),
-          ),
-        );
-      }
-    },
-    onPostOverview: (post) async => Navigator.of(context).push(
-      MaterialPageRoute(
-        builder: (context) => _postOverviewScreenRoute(
-          config: config,
-          context: context,
-          post: post,
-        ),
-      ),
-    ),
-    enablePostOverviewScreen: config.enablePostOverviewScreen,
-    postCategory: category.key,
-  );
-
-  var backButton = IconButton(
-    icon: const Icon(
-      Icons.arrow_back_ios,
-      color: Colors.white,
-    ),
-    onPressed: () => Navigator.of(context).pop(),
-  );
-
-  return config.postCreationOpenPageBuilder
-          ?.call(context, timelinePostCreationScreen, backButton) ??
-      Scaffold(
-        appBar: AppBar(
-          iconTheme: Theme.of(context).appBarTheme.iconTheme,
-          leading: backButton,
-          title: Text(
-            config.optionsBuilder(context).translations.postCreation,
-            style: TextStyle(
-              color: Theme.of(context).primaryColor,
-              fontSize: 24,
-              fontWeight: FontWeight.w800,
-            ),
-          ),
-        ),
-        body: timelinePostCreationScreen,
-      );
-}
-
-/// A widget function that creates a post overview screen route.
-///
-/// This function creates a route for displaying a post overview screen.
-/// It takes a [BuildContext], a [TimelinePost], and an optional
-/// [TimelineUserStoryConfiguration] as parameters. If no configuration is
-/// provided, default values will be used.
-Widget _postOverviewScreenRoute({
-  required BuildContext context,
-  required TimelinePost post,
-  required TimelineUserStoryConfiguration config,
-}) {
-  var timelinePostOverviewWidget = TimelinePostOverviewScreen(
-    options: config.optionsBuilder(context),
-    service: config.service,
-    timelinePost: post,
-    onPostSubmit: (post) async {
-      var createdPost = await config.service.postService.createPost(post);
-      config.onPostCreate?.call(createdPost);
-      if (context.mounted) {
-        await Navigator.of(context).pushAndRemoveUntil(
-          MaterialPageRoute(
-            builder: (context) => _timelineScreenRoute(
-              config: config,
-              context: context,
-              initalCategory: post.category,
-            ),
-          ),
-          (route) => false,
-        );
-      }
     },
   );
-
-  var backButton = IconButton(
-    icon: const Icon(
-      Icons.arrow_back_ios,
-      color: Colors.white,
-    ),
-    onPressed: () async => Navigator.of(context).pop(),
-  );
-
-  return config.postOverviewOpenPageBuilder?.call(
-        context,
-        timelinePostOverviewWidget,
-      ) ??
-      Scaffold(
-        appBar: AppBar(
-          iconTheme: Theme.of(context).appBarTheme.iconTheme,
-          leading: backButton,
-          title: Text(
-            config.optionsBuilder(context).translations.postCreation,
-            style: TextStyle(
-              color: Theme.of(context).primaryColor,
-              fontSize: 24,
-              fontWeight: FontWeight.w800,
-            ),
-          ),
-        ),
-        body: timelinePostOverviewWidget,
-      );
-}
-
-Widget _postCategorySelectionScreen({
-  required BuildContext context,
-  required TimelineUserStoryConfiguration config,
-}) {
-  var timelineSelectionScreen = TimelineSelectionScreen(
-    postService: config.service.postService,
-    options: config.optionsBuilder(context),
-    categories: config.service.postService.categories,
-    onCategorySelected: (category) async {
-      await Navigator.of(context).push(
-        MaterialPageRoute(
-          builder: (context) => _postCreationScreenRoute(
-            config: config,
-            context: context,
-            category: category,
-          ),
-        ),
-      );
-    },
-  );
-
-  var backButton = IconButton(
-    color: Colors.white,
-    icon: const Icon(Icons.arrow_back_ios),
-    onPressed: () async {
-      Navigator.of(context).pop();
-    },
-  );
-
-  return config.categorySelectionOpenPageBuilder
-          ?.call(context, timelineSelectionScreen) ??
-      Scaffold(
-        appBar: AppBar(
-          iconTheme: Theme.of(context).appBarTheme.iconTheme,
-          leading: backButton,
-          title: Text(
-            config.optionsBuilder(context).translations.postCreation,
-            style: TextStyle(
-              color: Theme.of(context).primaryColor,
-              fontSize: 24,
-              fontWeight: FontWeight.w800,
-            ),
-          ),
-        ),
-        body: timelineSelectionScreen,
-      );
-}
-
-Future<void> routeToPostDetail(BuildContext context, TimelinePost post) async {
-  await Navigator.of(context).push(
-    MaterialPageRoute(
-      builder: (context) => _postDetailScreenRoute(
-        config: timelineUserStoryConfiguration,
-        context: context,
-        post: post,
-      ),
-    ),
-  );
 }

packages/flutter_timeline/lib/src/flutter_timeline_userstory.dart

@@ -0,0 +1,87 @@
+// SPDX-FileCopyrightText: 2023 Iconica
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import 'package:flutter/material.dart';
+import 'package:flutter_timeline/flutter_timeline.dart';
+import 'package:flutter_timeline/src/go_router.dart';
+import 'package:go_router/go_router.dart';
+
+/// Retrieves a list of GoRouter routes for timeline stories.
+///
+/// This function retrieves a list of GoRouter routes for displaying timeline
+/// stories. It takes an optional [TimelineUserStoryConfiguration] as parameter.
+/// If no configuration is provided, default values will be used.
+List<GoRoute> getTimelineStoryRoutes({
+  TimelineUserStoryConfiguration? configuration,
+}) {
+  var config = configuration ??
+      TimelineUserStoryConfiguration(
+        userId: 'test_user',
+        service: TimelineService(
+          postService: LocalTimelinePostService(),
+        ),
+        optionsBuilder: (context) => const TimelineOptions(),
+      );
+
+  return <GoRoute>[
+    GoRoute(
+      path: TimelineUserStoryRoutes.timelineHome,
+      pageBuilder: (context, state) {
+        var timelineScreen = TimelineScreen(
+          userId: config.userId,
+          onUserTap: (user) => config.onUserTap?.call(context, user),
+          service: config.service,
+          options: config.optionsBuilder(context),
+          onPostTap: (post) async =>
+              config.onPostTap?.call(context, post) ??
+              await context.push(
+                TimelineUserStoryRoutes.timelineViewPath(post.id),
+              ),
+          filterEnabled: config.filterEnabled,
+          postWidgetBuilder: config.postWidgetBuilder,
+        );
+
+        return buildScreenWithoutTransition(
+          context: context,
+          state: state,
+          child: config.openPageBuilder?.call(
+                context,
+                timelineScreen,
+              ) ??
+              Scaffold(
+                body: timelineScreen,
+              ),
+        );
+      },
+    ),
+    GoRoute(
+      path: TimelineUserStoryRoutes.timelineView,
+      pageBuilder: (context, state) {
+        var post =
+            config.service.postService.getPost(state.pathParameters['post']!)!;
+
+        var timelinePostWidget = TimelinePostScreen(
+          userId: config.userId,
+          options: config.optionsBuilder(context),
+          service: config.service,
+          post: post,
+          onPostDelete: () => config.onPostDelete?.call(context, post),
+          onUserTap: (user) => config.onUserTap?.call(context, user),
+        );
+
+        return buildScreenWithoutTransition(
+          context: context,
+          state: state,
+          child: config.openPageBuilder?.call(
+                context,
+                timelinePostWidget,
+              ) ??
+              Scaffold(
+                body: timelinePostWidget,
+              ),
+        );
+      },
+    ),
+  ];
+}

packages/flutter_timeline/lib/src/go_router.dart

@@ -0,0 +1,30 @@
+// SPDX-FileCopyrightText: 2023 Iconica
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+CustomTransitionPage buildScreenWithFadeTransition<T>({
+  required BuildContext context,
+  required GoRouterState state,
+  required Widget child,
+}) =>
+    CustomTransitionPage<T>(
+      key: state.pageKey,
+      child: child,
+      transitionsBuilder: (context, animation, secondaryAnimation, child) =>
+          FadeTransition(opacity: animation, child: child),
+    );
+
+CustomTransitionPage buildScreenWithoutTransition<T>({
+  required BuildContext context,
+  required GoRouterState state,
+  required Widget child,
+}) =>
+    CustomTransitionPage<T>(
+      key: state.pageKey,
+      child: child,
+      transitionsBuilder: (context, animation, secondaryAnimation, child) =>
+          child,
+    );

packages/flutter_timeline/lib/src/models/timeline_configuration.dart

@@ -48,85 +48,27 @@ class TimelineUserStoryConfiguration {
   const TimelineUserStoryConfiguration({
     required this.service,
     required this.optionsBuilder,
-    this.getUserId,
-    this.serviceBuilder,
-    this.canDeleteAllPosts,
     this.userId = 'test_user',
-    this.homeOpenPageBuilder,
-    this.postCreationOpenPageBuilder,
-    this.postViewOpenPageBuilder,
-    this.postOverviewOpenPageBuilder,
+    this.openPageBuilder,
     this.onPostTap,
     this.onUserTap,
-    this.onRefresh,
     this.onPostDelete,
     this.filterEnabled = false,
     this.postWidgetBuilder,
-    this.afterPostCreationGoHome = false,
-    this.enablePostOverviewScreen = true,
-    this.categorySelectionOpenPageBuilder,
-    this.onPostCreate,
+    this.enablePostOverviewScreen = false,
   });
 
   /// The ID of the user associated with this user story configuration.
   final String userId;
 
-  /// A function to get the userId only when needed and with a context
-  final String Function(BuildContext context)? getUserId;
-
-  /// A function to determine if a user can delete posts that is called
-  /// when needed
-  final bool Function(BuildContext context)? canDeleteAllPosts;
-
   /// The TimelineService responsible for fetching user story data.
   final TimelineService service;
 
-  /// A function to get the timeline service only when needed and with a context
-  final TimelineService Function(BuildContext context)? serviceBuilder;
-
   /// A function that builds TimelineOptions based on the given BuildContext.
   final TimelineOptions Function(BuildContext context) optionsBuilder;
 
-  /// Open page builder function for the home page. This function accepts
-  /// a [BuildContext], a child widget, and a FloatingActionButton which can
-  /// route to the post creation page.
-
-  final Function(
-    BuildContext context,
-    Widget child,
-    FloatingActionButton? button,
-  )? homeOpenPageBuilder;
-
-  /// Open page builder function for the post creation page. This function
-  /// accepts a [BuildContext], a child widget, and an IconButton which can
-  /// route to the home page.
-
-  final Function(
-    BuildContext context,
-    Widget child,
-    IconButton? button,
-  )? postCreationOpenPageBuilder;
-
-  /// Open page builder function for the post view page. This function accepts
-  /// a [BuildContext], a child widget, and an IconButton which can route to the
-  /// home page.
-
-  final Function(
-    BuildContext context,
-    Widget child,
-    IconButton? button,
-    TimelinePost post,
-    TimelineCategory? category,
-  )? postViewOpenPageBuilder;
-
-  /// Open page builder function for the post overview page. This function
-  /// accepts a [BuildContext], a child widget, and an IconButton which can
-  /// route to the home page.
-
-  final Function(
-    BuildContext context,
-    Widget child,
-  )? postOverviewOpenPageBuilder;
+  /// A function that defines the behavior when a page needs to be opened.
+  final Function(BuildContext context, Widget child)? openPageBuilder;
 
   /// A callback function invoked when a timeline post is tapped.
   final Function(BuildContext context, TimelinePost post)? onPostTap;
@@ -134,9 +76,6 @@ class TimelineUserStoryConfiguration {
   /// A callback function invoked when the user's profile is tapped.
   final Function(BuildContext context, String userId)? onUserTap;
 
-  /// A callback function invoked when the timeline is refreshed by pulling down
-  final Function(BuildContext context, String? category)? onRefresh;
-
   /// A callback function invoked when a post deletion is requested.
   final Widget Function(BuildContext context, TimelinePost post)? onPostDelete;
 
@@ -149,17 +88,4 @@ class TimelineUserStoryConfiguration {
 
   /// Boolean to enable timeline post overview screen before submitting
   final bool enablePostOverviewScreen;
-
-  /// Boolean to enable redirect to home after post creation.
-  /// If false, it will redirect to created post screen
-  final bool afterPostCreationGoHome;
-
-  /// Open page builder function for the category selection page. This function
-  /// accepts a [BuildContext] and a child widget.
-  final Function(
-    BuildContext context,
-    Widget child,
-  )? categorySelectionOpenPageBuilder;
-
-  final Function(TimelinePost post)? onPostCreate;
 }

packages/flutter_timeline/lib/src/routes.dart

@@ -6,11 +6,4 @@ mixin TimelineUserStoryRoutes {
   static const String timelineHome = '/timeline';
   static const String timelineView = '/timeline-view/:post';
   static String timelineViewPath(String postId) => '/timeline-view/$postId';
-  static String timelinepostCreation(String category) =>
-      '/timeline-post-creation/$category';
-
-  static const String timelinePostCreation =
-      '/timeline-post-creation/:category';
-  static String timelinePostOverview = '/timeline-post-overview';
-  static String timelineCategorySelection = '/timeline-category-selection';
 }

packages/flutter_timeline/pubspec.yaml

@@ -3,30 +3,36 @@
 # SPDX-License-Identifier: GPL-3.0-or-later
 name: flutter_timeline
 description: Visual elements and interface combined into one package
-version: 5.1.1
-homepage: https://github.com/Iconica-Development/flutter_timeline
-publish_to: https://forgejo.internal.iconica.nl/api/packages/internal/pub
+version: 2.1.0
+
+publish_to: none
 
 environment:
-  sdk: ">=3.4.3 <4.0.0"
-  flutter: '>=3.22.2'
+  sdk: '>=3.1.3 <4.0.0'
 
 dependencies:
   flutter:
     sdk: flutter
+  go_router: any
+  
   flutter_timeline_view:
-    hosted: https://forgejo.internal.iconica.nl/api/packages/internal/pub
-    version: ^5.1.1
+    git: 
+       url: https://github.com/Iconica-Development/flutter_timeline
+       path: packages/flutter_timeline_view
+       ref: 2.1.0
 
   flutter_timeline_interface:
-    hosted: https://forgejo.internal.iconica.nl/api/packages/internal/pub
-    version: ^5.1.1
-  collection: ^1.18.0
+    git: 
+       url: https://github.com/Iconica-Development/flutter_timeline
+       path: packages/flutter_timeline_interface
+       ref: 2.1.0
 
 dev_dependencies:
+  flutter_lints: ^2.0.0
   flutter_iconica_analysis:
     git:
       url: https://github.com/Iconica-Development/flutter_iconica_analysis
       ref: 6.0.0
 
 flutter:
+

packages/flutter_timeline_firebase/CHANGELOG.md

@@ -1 +0,0 @@
-../../CHANGELOG.md

packages/flutter_timeline_firebase/LICENSE

@@ -1 +0,0 @@
-../../LICENSE

packages/flutter_timeline_firebase/README.md

@@ -1 +0,0 @@
-../../README.md

packages/flutter_timeline_firebase/lib/src/config/firebase_timeline_options.dart

@@ -2,14 +2,17 @@
 //
 // SPDX-License-Identifier: BSD-3-Clause
 
+import 'package:flutter/material.dart';
+
+@immutable
 class FirebaseTimelineOptions {
   const FirebaseTimelineOptions({
     this.usersCollectionName = 'users',
     this.timelineCollectionName = 'timeline',
-    this.timelineCategoryCollectionName = 'timeline_categories',
+    this.allTimelineCategories = const [],
   });
 
   final String usersCollectionName;
   final String timelineCollectionName;
-  final String timelineCategoryCollectionName;
+  final List<String> allTimelineCategories;
 }

packages/flutter_timeline_firebase/lib/src/models/firebase_user_document.dart

@@ -2,6 +2,9 @@
 //
 // SPDX-License-Identifier: BSD-3-Clause
 
+import 'package:flutter/material.dart';
+
+@immutable
 class FirebaseUserDocument {
   const FirebaseUserDocument({
     this.firstName,

packages/flutter_timeline_firebase/lib/src/service/firebase_post_service.dart

@@ -5,7 +5,6 @@
 import 'dart:typed_data';
 
 import 'package:cloud_firestore/cloud_firestore.dart';
-import 'package:collection/collection.dart';
 import 'package:firebase_core/firebase_core.dart';
 import 'package:firebase_storage/firebase_storage.dart';
 import 'package:flutter/material.dart';
@@ -39,12 +38,6 @@ class FirebaseTimelinePostService
   @override
   List<TimelinePost> posts = [];
 
-  @override
-  List<TimelineCategory> categories = [];
-
-  @override
-  TimelineCategory? selectedCategory;
-
   @override
   Future<TimelinePost> createPost(TimelinePost post) async {
     var postId = const Uuid().v4();
@@ -114,10 +107,7 @@ class FirebaseTimelinePostService
         updatedReactions.add(reaction.copyWith(creator: user));
       }
     }
-    var updatedPost = post.copyWith(
-      reactions: updatedReactions,
-      creator: await _userService.getUser(post.creatorId),
-    );
+    var updatedPost = post.copyWith(reactions: updatedReactions);
     posts = posts.map((p) => (p.id == post.id) ? updatedPost : p).toList();
     notifyListeners();
     return updatedPost;
@@ -125,6 +115,7 @@ class FirebaseTimelinePostService
 
   @override
   Future<List<TimelinePost>> fetchPosts(String? category) async {
+    debugPrint('fetching posts from firebase with category: $category');
     var snapshot = (category != null)
         ? await _db
             .collection(_options.timelineCollectionName)
@@ -245,20 +236,10 @@ class FirebaseTimelinePostService
   }
 
   @override
-  Future<TimelinePost?> getPost(String postId) async {
-    var post = await _db
-        .collection(_options.timelineCollectionName)
-        .doc(postId)
-        .withConverter<TimelinePost>(
-          fromFirestore: (snapshot, _) => TimelinePost.fromJson(
-            snapshot.id,
-            snapshot.data()!,
-          ),
-          toFirestore: (user, _) => user.toJson(),
-        )
-        .get();
-    return post.data();
-  }
+  TimelinePost? getPost(String postId) =>
+      (posts.any((element) => element.id == postId))
+          ? posts.firstWhere((element) => element.id == postId)
+          : null;
 
   @override
   List<TimelinePost> getPosts(String? category) => posts
@@ -270,7 +251,7 @@ class FirebaseTimelinePostService
     // update the post with the new like
     var updatedPost = post.copyWith(
       likes: post.likes + 1,
-      likedBy: [...post.likedBy ?? [], userId],
+      likedBy: post.likedBy?..add(userId),
     );
     posts = posts
         .map(
@@ -374,122 +355,4 @@ class FirebaseTimelinePostService
 
     return user;
   }
-
-  @override
-  Future<bool> addCategory(TimelineCategory category) async {
-    var exists = categories.firstWhereOrNull(
-      (element) => element.title.toLowerCase() == category.title.toLowerCase(),
-    );
-    if (exists != null) return false;
-    try {
-      await _db
-          .collection(_options.timelineCategoryCollectionName)
-          .add(category.toJson());
-      categories.add(category);
-      notifyListeners();
-      return true;
-    } on Exception catch (_) {
-      return false;
-    }
-  }
-
-  @override
-  Future<List<TimelineCategory>> fetchCategories() async {
-    categories.clear();
-    categories.add(
-      const TimelineCategory(
-        key: null,
-        title: 'All',
-      ),
-    );
-    var categoriesSnapshot = await _db
-        .collection(_options.timelineCategoryCollectionName)
-        .withConverter(
-          fromFirestore: (snapshot, _) =>
-              TimelineCategory.fromJson(snapshot.data()!),
-          toFirestore: (model, _) => model.toJson(),
-        )
-        .get();
-    categories.addAll(categoriesSnapshot.docs.map((e) => e.data()));
-
-    notifyListeners();
-    return categories;
-  }
-
-  @override
-  Future<TimelinePost> likeReaction(
-    String userId,
-    TimelinePost post,
-    String reactionId,
-  ) async {
-    // update the post with the new like
-    var updatedPost = post.copyWith(
-      reactions: post.reactions?.map(
-        (r) {
-          if (r.id == reactionId) {
-            return r.copyWith(
-              likedBy: (r.likedBy ?? [])..add(userId),
-            );
-          }
-          return r;
-        },
-      ).toList(),
-    );
-    posts = posts
-        .map(
-          (p) => p.id == post.id ? updatedPost : p,
-        )
-        .toList();
-    var postRef = _db.collection(_options.timelineCollectionName).doc(post.id);
-    await postRef.update({
-      'reactions': post.reactions
-          ?.map(
-            (r) =>
-                r.id == reactionId ? r.copyWith(likedBy: r.likedBy ?? []) : r,
-          )
-          .map((e) => e.toJson())
-          .toList(),
-    });
-    notifyListeners();
-    return updatedPost;
-  }
-
-  @override
-  Future<TimelinePost> unlikeReaction(
-    String userId,
-    TimelinePost post,
-    String reactionId,
-  ) async {
-    // update the post with the new like
-    var updatedPost = post.copyWith(
-      reactions: post.reactions?.map(
-        (r) {
-          if (r.id == reactionId) {
-            return r.copyWith(
-              likedBy: r.likedBy?..remove(userId),
-            );
-          }
-          return r;
-        },
-      ).toList(),
-    );
-    posts = posts
-        .map(
-          (p) => p.id == post.id ? updatedPost : p,
-        )
-        .toList();
-    var postRef = _db.collection(_options.timelineCollectionName).doc(post.id);
-    await postRef.update({
-      'reactions': post.reactions
-          ?.map(
-            (r) => r.id == reactionId
-                ? r.copyWith(likedBy: r.likedBy?..remove(userId))
-                : r,
-          )
-          .map((e) => e.toJson())
-          .toList(),
-    });
-    notifyListeners();
-    return updatedPost;
-  }
 }

packages/flutter_timeline_firebase/pubspec.yaml

@@ -4,30 +4,33 @@
 
 name: flutter_timeline_firebase
 description: Implementation of the Flutter Timeline interface for Firebase.
-version: 5.1.1
-homepage: https://github.com/Iconica-Development/flutter_timeline
-publish_to: https://forgejo.internal.iconica.nl/api/packages/internal/pub
+version: 2.1.0
+
+publish_to: none
 
 environment:
-  sdk: ">=3.4.3 <4.0.0"
-  flutter: '>=3.22.2'
+  sdk: '>=3.1.3 <4.0.0'
 
 dependencies:
   flutter:
     sdk: flutter
-  cloud_firestore: '>=4.13.1 <6.0.0'
-  firebase_core: '>=2.22.0 <4.0.0'
-  firebase_storage: '>=11.5.1 <13.0.0'
+  cloud_firestore: ^4.13.1
+  firebase_core: ^2.22.0
+  firebase_storage: ^11.5.1
   uuid: ^4.2.1
-  collection: ^1.18.0
+
   flutter_timeline_interface:
-    hosted: https://forgejo.internal.iconica.nl/api/packages/internal/pub
-    version: ^5.1.1
+    git: 
+       url: https://github.com/Iconica-Development/flutter_timeline
+       path: packages/flutter_timeline_interface
+       ref: 2.1.0
 
 dev_dependencies:
+  flutter_lints: ^2.0.0
   flutter_iconica_analysis:
     git:
       url: https://github.com/Iconica-Development/flutter_iconica_analysis
       ref: 6.0.0
 
 flutter:
+

packages/flutter_timeline_interface/CHANGELOG.md

@@ -1 +0,0 @@
-../../CHANGELOG.md

packages/flutter_timeline_interface/LICENSE

@@ -1 +0,0 @@
-../../LICENSE

packages/flutter_timeline_interface/README.md

@@ -1 +0,0 @@
-../../README.md

packages/flutter_timeline_interface/lib/src/model/timeline_category.dart

@@ -5,44 +5,13 @@ class TimelineCategory {
   const TimelineCategory({
     required this.key,
     required this.title,
-    this.icon,
+    required this.icon,
     this.canCreate = true,
     this.canView = true,
   });
-
-  TimelineCategory.fromJson(Map<String, dynamic> json)
-      : key = json['key'] as String?,
-        title = json['title'] as String,
-        icon = json['icon'] as Widget?,
-        canCreate = json['canCreate'] as bool? ?? true,
-        canView = json['canView'] as bool? ?? true;
-
   final String? key;
   final String title;
-  final Widget? icon;
+  final Widget icon;
   final bool canCreate;
   final bool canView;
-
-  TimelineCategory copyWith({
-    String? key,
-    String? title,
-    Widget? icon,
-    bool? canCreate,
-    bool? canView,
-  }) =>
-      TimelineCategory(
-        key: key ?? this.key,
-        title: title ?? this.title,
-        icon: icon ?? this.icon,
-        canCreate: canCreate ?? this.canCreate,
-        canView: canView ?? this.canView,
-      );
-
-  Map<String, Object?> toJson() => {
-        'key': key,
-        'title': title,
-        'icon': icon,
-        'canCreate': canCreate,
-        'canView': canView,
-      };
 }

packages/flutter_timeline_interface/lib/src/model/timeline_poster.dart

@@ -13,28 +13,11 @@ class TimelinePosterUserModel {
     this.imageUrl,
   });
 
-  factory TimelinePosterUserModel.fromJson(
-    Map<String, dynamic> json,
-    String userId,
-  ) =>
-      TimelinePosterUserModel(
-        userId: userId,
-        firstName: json['first_name'] as String?,
-        lastName: json['last_name'] as String?,
-        imageUrl: json['image_url'] as String?,
-      );
-
   final String userId;
   final String? firstName;
   final String? lastName;
   final String? imageUrl;
 
-  Map<String, dynamic> toJson() => {
-        'first_name': firstName,
-        'last_name': lastName,
-        'image_url': imageUrl,
-      };
-
   String? get fullName {
     var fullName = '';
 

packages/flutter_timeline_interface/lib/src/model/timeline_reaction.dart

@@ -16,7 +16,6 @@ class TimelinePostReaction {
     this.imageUrl,
     this.creator,
     this.createdAtString,
-    this.likedBy,
   });
 
   factory TimelinePostReaction.fromJson(
@@ -32,7 +31,6 @@ class TimelinePostReaction {
         imageUrl: json['image_url'] as String?,
         createdAt: DateTime.parse(json['created_at'] as String),
         createdAtString: json['created_at'] as String,
-        likedBy: (json['liked_by'] as List<dynamic>?)?.cast<String>() ?? [],
       );
 
   /// The unique identifier of the reaction.
@@ -59,8 +57,6 @@ class TimelinePostReaction {
   /// Reaction creation date as String with microseconds.
   final String? createdAtString;
 
-  final List<String>? likedBy;
-
   TimelinePostReaction copyWith({
     String? id,
     String? postId,
@@ -69,7 +65,6 @@ class TimelinePostReaction {
     String? reaction,
     String? imageUrl,
     DateTime? createdAt,
-    List<String>? likedBy,
   }) =>
       TimelinePostReaction(
         id: id ?? this.id,
@@ -79,7 +74,6 @@ class TimelinePostReaction {
         reaction: reaction ?? this.reaction,
         imageUrl: imageUrl ?? this.imageUrl,
         createdAt: createdAt ?? this.createdAt,
-        likedBy: likedBy ?? this.likedBy,
       );
 
   Map<String, dynamic> toJson() => <String, dynamic>{
@@ -88,7 +82,6 @@ class TimelinePostReaction {
           'reaction': reaction,
           'image_url': imageUrl,
           'created_at': createdAt.toIso8601String(),
-          'liked_by': likedBy,
         },
       };
 
@@ -98,7 +91,6 @@ class TimelinePostReaction {
           'reaction': reaction,
           'image_url': imageUrl,
           'created_at': createdAtString,
-          'liked_by': likedBy,
         },
       };
 }

packages/flutter_timeline_interface/lib/src/services/timeline_post_service.dart

@@ -5,12 +5,11 @@
 import 'dart:typed_data';
 
 import 'package:flutter/material.dart';
-import 'package:flutter_timeline_interface/flutter_timeline_interface.dart';
+import 'package:flutter_timeline_interface/src/model/timeline_post.dart';
+import 'package:flutter_timeline_interface/src/model/timeline_reaction.dart';
 
 abstract class TimelinePostService with ChangeNotifier {
   List<TimelinePost> posts = [];
-  List<TimelineCategory> categories = [];
-  TimelineCategory? selectedCategory;
 
   Future<void> deletePost(TimelinePost post);
   Future<TimelinePost> deletePostReaction(TimelinePost post, String reactionId);
@@ -18,7 +17,7 @@ abstract class TimelinePostService with ChangeNotifier {
   Future<List<TimelinePost>> fetchPosts(String? category);
   Future<TimelinePost> fetchPost(TimelinePost post);
   Future<List<TimelinePost>> fetchPostsPaginated(String? category, int limit);
-  Future<TimelinePost?> getPost(String postId);
+  TimelinePost? getPost(String postId);
   List<TimelinePost> getPosts(String? category);
   Future<List<TimelinePost>> refreshPosts(String? category);
   Future<TimelinePost> fetchPostDetails(TimelinePost post);
@@ -29,17 +28,4 @@ abstract class TimelinePostService with ChangeNotifier {
   });
   Future<TimelinePost> likePost(String userId, TimelinePost post);
   Future<TimelinePost> unlikePost(String userId, TimelinePost post);
-
-  Future<List<TimelineCategory>> fetchCategories();
-  Future<bool> addCategory(TimelineCategory category);
-  Future<TimelinePost> likeReaction(
-    String userId,
-    TimelinePost post,
-    String reactionId,
-  );
-  Future<TimelinePost> unlikeReaction(
-    String userId,
-    TimelinePost post,
-    String reactionId,
-  );
 }

packages/flutter_timeline_interface/pubspec.yaml

@@ -4,18 +4,19 @@
 
 name: flutter_timeline_interface
 description: Interface for the service of the Flutter Timeline component
-version: 5.1.1
-homepage: https://github.com/Iconica-Development/flutter_timeline
-publish_to: https://forgejo.internal.iconica.nl/api/packages/internal/pub
+version: 2.1.0
+
+publish_to: none
 
 environment:
-  sdk: '>=3.4.3 <4.0.0'
+  sdk: '>=3.1.3 <4.0.0'
 
 dependencies:
   flutter:
     sdk: flutter
 
 dev_dependencies:
+  flutter_lints: ^2.0.0
   flutter_iconica_analysis:
     git:
       url: https://github.com/Iconica-Development/flutter_iconica_analysis

packages/flutter_timeline_view/CHANGELOG.md

@@ -1 +0,0 @@
-../../CHANGELOG.md

packages/flutter_timeline_view/LICENSE

@@ -1 +0,0 @@
-../../LICENSE

packages/flutter_timeline_view/README.md

@@ -1 +0,0 @@
-../../README.md

packages/flutter_timeline_view/assets/Comment.svg

@@ -1,3 +0,0 @@
-<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.5 3.5C14.3587 3.5 17.5 6.64125 17.5 10.5C17.5 14.3587 14.3587 17.5 10.5 17.5C9.4675 17.5 8.4525 17.2725 7.49875 16.8175C7.2625 16.7037 7.00875 16.6513 6.74625 16.6513C6.58 16.6513 6.41375 16.6775 6.25625 16.7213L3.45625 17.5437L4.27875 14.7438C4.40125 14.3325 4.36625 13.8863 4.1825 13.5013C3.7275 12.5475 3.5 11.5325 3.5 10.5C3.5 6.64125 6.64125 3.5 10.5 3.5ZM10.5 1.75C5.67 1.75 1.75 5.67 1.75 10.5C1.75 11.8475 2.065 13.1075 2.59875 14.2538L0.875 20.125L6.74625 18.4013C7.8925 18.935 9.1525 19.25 10.5 19.25C15.33 19.25 19.25 15.33 19.25 10.5C19.25 5.67 15.33 1.75 10.5 1.75Z" fill="#212121"/>
-</svg>

packages/flutter_timeline_view/assets/send.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.05813 12.3603L7.52523 16.4769L11.6405 22.944C12.0627 23.6073 12.7875 23.9999 13.5628 23.9999C13.6281 23.9999 13.6921 23.9974 13.7585 23.9913C14.6077 23.9186 15.3399 23.3858 15.6697 22.6006L23.8204 3.1673C24.1809 2.30831 23.989 1.3287 23.3318 0.6703C22.6734 0.0118984 21.6938 -0.181315 20.8348 0.179268L1.39902 8.33114C0.612628 8.66096 0.0797531 9.3932 0.008375 10.2424C-0.0642338 11.0915 0.339422 11.9037 1.05813 12.3603ZM2.1128 10.0331L21.5473 1.8825C21.6113 1.85542 21.6704 1.84435 21.7233 1.84435C21.8735 1.84435 21.9793 1.92926 22.0248 1.97603C22.0876 2.03756 22.2205 2.20862 22.1184 2.45352L13.9677 21.8881C13.8754 22.1084 13.6822 22.1465 13.6022 22.1539C13.5222 22.1588 13.3241 22.1539 13.1973 21.9533L9.36876 15.9378L14.4674 10.8392C14.828 10.4786 14.828 9.89408 14.4674 9.53349C14.1068 9.17291 13.5222 9.17291 13.1616 9.53349L8.06303 14.6321L2.04757 10.8035C1.85436 10.6805 1.83836 10.4971 1.84698 10.3986C1.85436 10.3199 1.89251 10.1254 2.1128 10.0331Z" fill="#212121"/>
-</svg>

packages/flutter_timeline_view/lib/flutter_timeline_view.dart

@@ -5,7 +5,6 @@
 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,7 +5,6 @@ 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';
@@ -14,12 +13,12 @@ class TimelineOptions {
   const TimelineOptions({
     this.theme = const TimelineTheme(),
     this.translations = const TimelineTranslations.empty(),
-    this.paddings = const TimelinePaddingOptions(),
     this.imagePickerConfig = const ImagePickerConfig(),
-    this.imagePickerTheme,
+    this.imagePickerTheme = const ImagePickerTheme(),
     this.timelinePostHeight,
+    this.allowAllDeletion = false,
     this.sortCommentsAscending = true,
-    this.sortPostsAscending = false,
+    this.sortPostsAscending,
     this.doubleTapTolike = false,
     this.iconsWithValues = false,
     this.likeAndDislikeIconsForDoubleTap = const (
@@ -38,8 +37,10 @@ class TimelineOptions {
     this.userAvatarBuilder,
     this.anonymousAvatarBuilder,
     this.nameBuilder,
-    this.iconSize = 24,
+    this.padding = const EdgeInsets.symmetric(vertical: 12.0),
+    this.iconSize = 26,
     this.postWidgetHeight,
+    this.postPadding = const EdgeInsets.all(12.0),
     this.filterOptions = const FilterOptions(),
     this.categoriesOptions = const CategoriesOptions(),
     this.requireImageForPost = false,
@@ -47,12 +48,6 @@ class TimelineOptions {
     this.maxTitleLength,
     this.minContentLength,
     this.maxContentLength,
-    this.categorySelectorButtonBuilder,
-    this.postOverviewButtonBuilder,
-    this.deletionDialogBuilder,
-    this.listHeaderBuilder,
-    this.titleInputDecoration,
-    this.contentInputDecoration,
   });
 
   /// Theming options for the timeline
@@ -70,15 +65,15 @@ class TimelineOptions {
   /// Whether to sort posts ascending or descending
   final bool? sortPostsAscending;
 
+  /// Allow all posts to be deleted instead of
+  ///  only the posts of the current user
+  final bool allowAllDeletion;
+
   /// 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;
@@ -93,7 +88,7 @@ class TimelineOptions {
 
   /// ImagePickerTheme can be used to change the UI of the
   /// Image Picker Widget to change the text/icons to your liking.
-  final ImagePickerTheme? imagePickerTheme;
+  final ImagePickerTheme imagePickerTheme;
 
   /// ImagePickerConfig can be used to define the
   /// size and quality for the uploaded image.
@@ -114,12 +109,18 @@ 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;
 
@@ -140,68 +141,43 @@ class TimelineOptions {
 
   /// Maximum length of the post content
   final int? maxContentLength;
-
-  /// Builder for the category selector button
-  /// on the timeline category selection screen
-  final Widget Function(
-    BuildContext context,
-    Function() onPressed,
-    String text,
-  )? categorySelectorButtonBuilder;
-
-  /// This widgetbuilder is placed at the top of the list of posts and can be
-  ///  used to add custom elements
-  final Widget Function(BuildContext context, String? category)?
-      listHeaderBuilder;
-
-  /// Builder for the post overview button
-  /// on the timeline post overview screen
-  final Widget Function(
-    BuildContext context,
-    Function() onPressed,
-    String text,
-    TimelinePost post,
-  )? postOverviewButtonBuilder;
-
-  /// Optional builder to override the default alertdialog for post deletion
-  /// It should pop the navigator with true to delete the post and
-  /// false to cancel deletion
-  final WidgetBuilder? deletionDialogBuilder;
-
-  /// inputdecoration for the title textfield
-  final InputDecoration? titleInputDecoration;
-
-  /// inputdecoration for the content textfield
-  final InputDecoration? contentInputDecoration;
 }
 
 class CategoriesOptions {
   const CategoriesOptions({
+    this.categoriesBuilder,
     this.categoryButtonBuilder,
     this.categorySelectorHorizontalPadding,
   });
 
   /// List of categories that the user can select.
   /// If this is null no categories will be shown.
+  final List<TimelineCategory> Function(BuildContext context)?
+      categoriesBuilder;
 
   /// Abilty to override the standard category selector
-  final Widget Function(
-    TimelineCategory category,
-    Function() onTap,
-    // ignore: avoid_positional_boolean_parameters
-    bool selected,
-    bool isOnTop,
-  )? categoryButtonBuilder;
+  final Widget Function({
+    required String? categoryKey,
+    required String categoryName,
+    required Function onTap,
+    required bool selected,
+  })? categoryButtonBuilder;
 
   /// Overides the standard horizontal padding of the whole category selector.
   final double? categorySelectorHorizontalPadding;
 
   TimelineCategory? getCategoryByKey(
-    List<TimelineCategory> categories,
     BuildContext context,
     String? key,
-  ) =>
-      categories.firstWhereOrNull((category) => category.key == key);
+  ) {
+    if (categoriesBuilder == null) {
+      return null;
+    }
+
+    return categoriesBuilder!
+        .call(context)
+        .firstWhereOrNull((category) => category.key == key);
+  }
 }
 
 class FilterOptions {

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

@@ -1,25 +0,0 @@
-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: 32, top: 20, right: 32, bottom: 40),
-    this.postPadding =
-        const EdgeInsets.only(left: 12.0, top: 12, right: 12.0, bottom: 8),
-    this.postOverviewButtonBottomPadding = 30.0,
-    this.categoryButtonTextPadding,
-  });
-
-  /// 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;
-
-  /// The padding between the icon and the text in the category button
-  final double? categoryButtonTextPadding;
-}

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

@@ -20,7 +20,6 @@ class TimelineTextStyles {
     this.postTitleStyle,
     this.postLikeTitleAndAmount,
     this.postCreatedAtStyle,
-    this.categoryTitleStyle,
   });
 
   /// The TextStyle for the text indicating that you can view a post
@@ -71,6 +70,4 @@ class TimelineTextStyles {
 
   /// The TextStyle for the creation time of the post
   final TextStyle? postCreatedAtStyle;
-
-  final TextStyle? categoryTitleStyle;
 }

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

@@ -15,11 +15,6 @@ class TimelineTheme {
     this.sendIcon,
     this.moreIcon,
     this.deleteIcon,
-    this.categorySelectionButtonBorderColor,
-    this.categorySelectionButtonBackgroundColor,
-    this.categorySelectionButtonSelectedTextColor,
-    this.categorySelectionButtonUnselectedTextColor,
-    this.postCreationFloatingActionButtonColor,
     this.textStyles = const TimelineTextStyles(),
   });
 
@@ -43,23 +38,5 @@ class TimelineTheme {
   /// The icon for delete action (delete post)
   final Widget? deleteIcon;
 
-  /// The text style overrides for all the texts in the timeline
   final TimelineTextStyles textStyles;
-
-  /// The color of the border around the category in the selection screen
-  final Color? categorySelectionButtonBorderColor;
-
-  /// The color of the background of the category selection button in the
-  /// selection screen
-  final Color? categorySelectionButtonBackgroundColor;
-
-  /// The color of the text of the category selection button when it is selected
-  final Color? categorySelectionButtonSelectedTextColor;
-
-  /// The color of the text of the category selection button when
-  /// it is not selected
-  final Color? categorySelectionButtonUnselectedTextColor;
-
-  /// The color of the floating action button on the overview screen
-  final Color? postCreationFloatingActionButtonColor;
 }

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

@@ -5,108 +5,60 @@
 import 'package:flutter/material.dart';
 
 @immutable
-
-/// Class that holds all the translations for the timeline component view and
-///  the corresponding userstory
 class TimelineTranslations {
-  /// TimelineTranslations constructor where everything is required use this
-  /// if you want to be sure to have all translations specified
-  /// If you just want the default values use the empty constructor
-  /// and optionally override the values with the copyWith method
   const TimelineTranslations({
     required this.anonymousUser,
     required this.noPosts,
     required this.noPostsWithFilter,
     required this.title,
-    required this.titleHintText,
     required this.content,
-    required this.contentHintText,
     required this.contentDescription,
     required this.uploadImage,
     required this.uploadImageDescription,
     required this.allowComments,
     required this.allowCommentsDescription,
-    required this.commentsTitleOnPost,
     required this.checkPost,
     required this.deletePost,
     required this.deleteReaction,
-    required this.deleteConfirmationMessage,
-    required this.deleteConfirmationTitle,
-    required this.deleteCancelButton,
-    required this.deleteButton,
     required this.viewPost,
-    required this.oneLikeTitle,
-    required this.multipleLikesTitle,
+    required this.likesTitle,
     required this.commentsTitle,
     required this.firstComment,
     required this.writeComment,
+    required this.postAt,
     required this.postLoadingError,
     required this.timelineSelectionDescription,
     required this.searchHint,
     required this.postOverview,
     required this.postIn,
-    required this.postCreation,
-    required this.yes,
-    required this.no,
-    required this.timeLineScreenTitle,
-    required this.createCategoryPopuptitle,
-    required this.addCategoryTitle,
-    required this.addCategorySubmitButton,
-    required this.addCategoryCancelButtton,
-    required this.addCategoryHintText,
-    required this.addCategoryErrorText,
-    required this.titleErrorText,
-    required this.contentErrorText,
   });
 
-  /// Default translations for the timeline component view
-  const TimelineTranslations.empty({
-    this.anonymousUser = 'Anonymous user',
-    this.noPosts = 'No posts yet',
-    this.noPostsWithFilter = 'No posts with this filter',
-    this.title = 'Title',
-    this.titleHintText = 'Title...',
-    this.content = 'Content',
-    this.contentHintText = 'Content...',
-    this.contentDescription = 'What do you want to share?',
-    this.uploadImage = 'Upload image',
-    this.uploadImageDescription = 'Upload an image to your message (optional)',
-    this.allowComments = 'Are people allowed to comment?',
-    this.allowCommentsDescription =
-        'Indicate whether people are allowed to respond',
-    this.commentsTitleOnPost = 'Comments',
-    this.checkPost = 'Overview',
-    this.deletePost = 'Delete post',
-    this.deleteConfirmationTitle = 'Delete Post',
-    this.deleteConfirmationMessage =
-        'Are you sure you want to delete this post?',
-    this.deleteButton = 'Delete',
-    this.deleteCancelButton = 'Cancel',
-    this.deleteReaction = 'Delete Reaction',
-    this.viewPost = 'View post',
-    this.oneLikeTitle = 'like',
-    this.multipleLikesTitle = 'likes',
-    this.commentsTitle = 'Are people allowed to comment?',
-    this.firstComment = 'Be the first to comment',
-    this.writeComment = 'Write your comment here...',
-    this.postLoadingError = 'Something went wrong while loading the post',
-    this.timelineSelectionDescription = 'Choose a category',
-    this.searchHint = 'Search...',
-    this.postOverview = 'Post Overview',
-    this.postIn = 'Post',
-    this.postCreation = 'add post',
-    this.yes = 'Yes',
-    this.no = 'No',
-    this.timeLineScreenTitle = 'iconinstagram',
-    this.createCategoryPopuptitle = 'Choose a title for the new category',
-    this.addCategoryTitle = 'Add category',
-    this.addCategorySubmitButton = 'Add category',
-    this.addCategoryCancelButtton = 'Cancel',
-    this.addCategoryHintText = 'Category name...',
-    this.addCategoryErrorText = 'Please enter a category name',
-    this.titleErrorText = 'Please enter a title',
-    this.contentErrorText = 'Please enter content',
-  });
+  const TimelineTranslations.empty()
+      : anonymousUser = 'Anonymous user',
+        noPosts = 'No posts yet',
+        noPostsWithFilter = 'No posts with this filter',
+        title = 'Title',
+        content = 'Content',
+        contentDescription = 'What do you want to share?',
+        uploadImage = 'Upload image',
+        uploadImageDescription = 'Upload an image to your message (optional)',
+        allowComments = 'Are people allowed to comment?',
+        allowCommentsDescription =
+            'Indicate whether people are allowed to respond',
+        checkPost = 'Check post overview',
+        deletePost = 'Delete post',
+        deleteReaction = 'Delete Reaction',
+        viewPost = 'View post',
+        likesTitle = 'Likes',
+        commentsTitle = 'Comments',
+        firstComment = 'Be the first to comment',
+        writeComment = 'Write your comment here...',
+        postAt = 'at',
+        postLoadingError = 'Something went wrong while loading the post',
+        timelineSelectionDescription = 'Choose a category',
+        searchHint = 'Search...',
+        postOverview = 'Post Overview',
+        postIn = 'Post in';
 
   final String noPosts;
   final String noPostsWithFilter;
@@ -120,24 +72,13 @@ class TimelineTranslations {
   final String allowComments;
   final String allowCommentsDescription;
   final String checkPost;
-
-  final String titleHintText;
-  final String contentHintText;
-  final String titleErrorText;
-  final String contentErrorText;
+  final String postAt;
 
   final String deletePost;
-  final String deleteConfirmationTitle;
-  final String deleteConfirmationMessage;
-  final String deleteButton;
-  final String deleteCancelButton;
-
   final String deleteReaction;
   final String viewPost;
-  final String oneLikeTitle;
-  final String multipleLikesTitle;
+  final String likesTitle;
   final String commentsTitle;
-  final String commentsTitleOnPost;
   final String writeComment;
   final String firstComment;
   final String postLoadingError;
@@ -148,20 +89,7 @@ class TimelineTranslations {
 
   final String postOverview;
   final String postIn;
-  final String postCreation;
 
-  final String createCategoryPopuptitle;
-  final String addCategoryTitle;
-  final String addCategorySubmitButton;
-  final String addCategoryCancelButtton;
-  final String addCategoryHintText;
-  final String addCategoryErrorText;
-
-  final String yes;
-  final String no;
-  final String timeLineScreenTitle;
-
-  /// Method to override the default values of the translations
   TimelineTranslations copyWith({
     String? noPosts,
     String? noPostsWithFilter,
@@ -173,17 +101,12 @@ class TimelineTranslations {
     String? uploadImageDescription,
     String? allowComments,
     String? allowCommentsDescription,
-    String? commentsTitleOnPost,
     String? checkPost,
+    String? postAt,
     String? deletePost,
-    String? deleteConfirmationTitle,
-    String? deleteConfirmationMessage,
-    String? deleteButton,
-    String? deleteCancelButton,
     String? deleteReaction,
     String? viewPost,
-    String? oneLikeTitle,
-    String? multipleLikesTitle,
+    String? likesTitle,
     String? commentsTitle,
     String? writeComment,
     String? firstComment,
@@ -192,20 +115,6 @@ class TimelineTranslations {
     String? searchHint,
     String? postOverview,
     String? postIn,
-    String? postCreation,
-    String? titleHintText,
-    String? contentHintText,
-    String? yes,
-    String? no,
-    String? timeLineScreenTitle,
-    String? createCategoryPopuptitle,
-    String? addCategoryTitle,
-    String? addCategorySubmitButton,
-    String? addCategoryCancelButtton,
-    String? addCategoryHintText,
-    String? addCategoryErrorText,
-    String? titleErrorText,
-    String? contentErrorText,
   }) =>
       TimelineTranslations(
         noPosts: noPosts ?? this.noPosts,
@@ -220,19 +129,12 @@ class TimelineTranslations {
         allowComments: allowComments ?? this.allowComments,
         allowCommentsDescription:
             allowCommentsDescription ?? this.allowCommentsDescription,
-        commentsTitleOnPost: commentsTitleOnPost ?? this.commentsTitleOnPost,
         checkPost: checkPost ?? this.checkPost,
+        postAt: postAt ?? this.postAt,
         deletePost: deletePost ?? this.deletePost,
-        deleteConfirmationTitle:
-            deleteConfirmationTitle ?? this.deleteConfirmationTitle,
-        deleteConfirmationMessage:
-            deleteConfirmationMessage ?? this.deleteConfirmationMessage,
-        deleteButton: deleteButton ?? this.deleteButton,
-        deleteCancelButton: deleteCancelButton ?? this.deleteCancelButton,
         deleteReaction: deleteReaction ?? this.deleteReaction,
         viewPost: viewPost ?? this.viewPost,
-        oneLikeTitle: oneLikeTitle ?? this.oneLikeTitle,
-        multipleLikesTitle: multipleLikesTitle ?? this.multipleLikesTitle,
+        likesTitle: likesTitle ?? this.likesTitle,
         commentsTitle: commentsTitle ?? this.commentsTitle,
         writeComment: writeComment ?? this.writeComment,
         firstComment: firstComment ?? this.firstComment,
@@ -242,22 +144,5 @@ class TimelineTranslations {
         searchHint: searchHint ?? this.searchHint,
         postOverview: postOverview ?? this.postOverview,
         postIn: postIn ?? this.postIn,
-        postCreation: postCreation ?? this.postCreation,
-        titleHintText: titleHintText ?? this.titleHintText,
-        contentHintText: contentHintText ?? this.contentHintText,
-        yes: yes ?? this.yes,
-        no: no ?? this.no,
-        timeLineScreenTitle: timeLineScreenTitle ?? this.timeLineScreenTitle,
-        addCategoryTitle: addCategoryTitle ?? this.addCategoryTitle,
-        addCategorySubmitButton:
-            addCategorySubmitButton ?? this.addCategorySubmitButton,
-        addCategoryCancelButtton:
-            addCategoryCancelButtton ?? this.addCategoryCancelButtton,
-        addCategoryHintText: addCategoryHintText ?? this.addCategoryHintText,
-        createCategoryPopuptitle:
-            createCategoryPopuptitle ?? this.createCategoryPopuptitle,
-        addCategoryErrorText: addCategoryErrorText ?? this.addCategoryErrorText,
-        titleErrorText: titleErrorText ?? this.titleErrorText,
-        contentErrorText: contentErrorText ?? this.contentErrorText,
       );
 }

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

@@ -2,7 +2,6 @@
 //
 // SPDX-License-Identifier: BSD-3-Clause
 
-import 'dart:math';
 import 'dart:typed_data';
 
 import 'package:dotted_border/dotted_border.dart';
@@ -11,8 +10,6 @@ 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/default_filled_button.dart';
-import 'package:flutter_timeline_view/src/widgets/post_creation_textfield.dart';
 
 class TimelinePostCreationScreen extends StatefulWidget {
   const TimelinePostCreationScreen({
@@ -22,7 +19,6 @@ class TimelinePostCreationScreen extends StatefulWidget {
     required this.options,
     this.postCategory,
     this.onPostOverview,
-    this.enablePostOverviewScreen = false,
     super.key,
   });
 
@@ -41,7 +37,6 @@ class TimelinePostCreationScreen extends StatefulWidget {
 
   /// Nullable callback for routing to the post overview
   final void Function(TimelinePost)? onPostOverview;
-  final bool enablePostOverviewScreen;
 
   @override
   State<TimelinePostCreationScreen> createState() =>
@@ -53,340 +48,251 @@ class _TimelinePostCreationScreenState
   TextEditingController titleController = TextEditingController();
   TextEditingController contentController = TextEditingController();
   Uint8List? image;
+  bool editingDone = false;
   bool allowComments = false;
-  bool titleIsValid = false;
-  bool contentIsValid = false;
 
   @override
   void initState() {
-    titleController.addListener(_listenForInputs);
-    contentController.addListener(_listenForInputs);
-
     super.initState();
+    titleController.addListener(checkIfEditingDone);
+    contentController.addListener(checkIfEditingDone);
   }
 
-  void _listenForInputs() {
-    titleIsValid = titleController.text.isNotEmpty;
-    contentIsValid = contentController.text.isNotEmpty;
-    setState(() {});
+  @override
+  void dispose() {
+    titleController.dispose();
+    contentController.dispose();
+    super.dispose();
   }
 
-  var formkey = GlobalKey<FormState>();
+  void checkIfEditingDone() {
+    setState(() {
+      editingDone =
+          titleController.text.isNotEmpty && contentController.text.isNotEmpty;
+      if (widget.options.requireImageForPost) {
+        editingDone = editingDone && image != null;
+      }
+      if (widget.options.minTitleLength != null) {
+        editingDone = editingDone &&
+            titleController.text.length >= widget.options.minTitleLength!;
+      }
+      if (widget.options.maxTitleLength != null) {
+        editingDone = editingDone &&
+            titleController.text.length <= widget.options.maxTitleLength!;
+      }
+      if (widget.options.minContentLength != null) {
+        editingDone = editingDone &&
+            contentController.text.length >= widget.options.minContentLength!;
+      }
+      if (widget.options.maxContentLength != null) {
+        editingDone = editingDone &&
+            contentController.text.length <= widget.options.maxContentLength!;
+      }
+    });
+  }
 
   @override
   Widget build(BuildContext context) {
-    var imageRequired = widget.options.requireImageForPost;
-
     Future<void> onPostCreated() async {
-      var user = await widget.service.userService?.getUser(widget.userId);
       var post = TimelinePost(
-        id: 'Post${Random().nextInt(1000)}',
+        id: '',
         creatorId: widget.userId,
         title: titleController.text,
         category: widget.postCategory,
         content: contentController.text,
         likes: 0,
-        likedBy: const [],
         reaction: 0,
         createdAt: DateTime.now(),
         reactionEnabled: allowComments,
         image: image,
-        creator: user,
       );
 
-      if (widget.enablePostOverviewScreen) {
+      if (widget.onPostOverview != null) {
         widget.onPostOverview?.call(post);
       } else {
-        widget.onPostCreated.call(post);
+        var newPost = await widget.service.postService.createPost(post);
+        widget.onPostCreated.call(newPost);
       }
     }
 
     var theme = Theme.of(context);
-
     return GestureDetector(
       onTap: () => FocusScope.of(context).unfocus(),
-      child: SingleChildScrollView(
-        child: Padding(
-          padding: widget.options.paddings.mainPadding,
-          child: Form(
-            key: formkey,
-            child: Column(
-              mainAxisSize: MainAxisSize.max,
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Text(
-                  widget.options.translations.title,
-                  style: theme.textTheme.titleMedium,
-                ),
-                const SizedBox(
-                  height: 4,
-                ),
-                widget.options.textInputBuilder?.call(
-                      titleController,
-                      null,
-                      '',
-                    ) ??
-                    PostCreationTextfield(
-                      fieldKey: const ValueKey('title'),
-                      controller: titleController,
-                      hintText: widget.options.translations.titleHintText,
-                      textMaxLength: widget.options.maxTitleLength,
-                      decoration: widget.options.titleInputDecoration,
-                      textCapitalization: TextCapitalization.sentences,
-                      expands: null,
-                      minLines: null,
-                      maxLines: 1,
-                      validator: (value) {
-                        if (value == null || value.isEmpty) {
-                          return widget.options.translations.titleErrorText;
-                        }
-                        if (value.trim().isEmpty) {
-                          return widget.options.translations.titleErrorText;
-                        }
-                        return null;
-                      },
-                    ),
-                const SizedBox(height: 24),
-                Text(
-                  widget.options.translations.content,
-                  style: theme.textTheme.titleMedium,
-                ),
-                Text(
-                  widget.options.translations.contentDescription,
-                  style: theme.textTheme.bodySmall,
-                ),
-                const SizedBox(
-                  height: 4,
-                ),
-                PostCreationTextfield(
-                  fieldKey: const ValueKey('content'),
-                  controller: contentController,
-                  hintText: widget.options.translations.contentHintText,
-                  textMaxLength: null,
-                  decoration: widget.options.contentInputDecoration,
-                  textCapitalization: TextCapitalization.sentences,
-                  expands: false,
-                  minLines: null,
-                  maxLines: null,
-                  validator: (value) {
-                    if (value == null || value.isEmpty) {
-                      return widget.options.translations.contentErrorText;
-                    }
-                    if (value.trim().isEmpty) {
-                      return widget.options.translations.contentErrorText;
-                    }
-                    return null;
-                  },
-                ),
-                const SizedBox(
-                  height: 24,
-                ),
-                Text(
-                  widget.options.translations.uploadImage,
-                  style: theme.textTheme.titleMedium,
-                ),
-                Text(
-                  widget.options.translations.uploadImageDescription,
-                  style: theme.textTheme.bodySmall,
-                ),
-                const SizedBox(
-                  height: 8,
-                ),
-                Stack(
-                  children: [
-                    GestureDetector(
-                      onTap: () async {
-                        var result = await showModalBottomSheet<Uint8List?>(
-                          context: context,
-                          builder: (context) => Container(
-                            padding: const EdgeInsets.all(20),
-                            color: theme.colorScheme.surface,
-                            child: ImagePicker(
-                              config: widget.options.imagePickerConfig,
-                              theme: widget.options.imagePickerTheme ??
-                                  ImagePickerTheme(
-                                    titleStyle: theme.textTheme.titleMedium,
-                                    iconSize: 40,
-                                    selectImageText: 'UPLOAD FILE',
-                                    makePhotoText: 'TAKE PICTURE',
-                                    selectImageIcon: const Icon(
-                                      size: 40,
-                                      Icons.insert_drive_file,
-                                    ),
-                                    closeButtonBuilder: (onTap) => TextButton(
-                                      onPressed: () {
-                                        onTap();
-                                      },
-                                      child: Text(
-                                        'Cancel',
-                                        style: theme.textTheme.bodyMedium!
-                                            .copyWith(
-                                          decoration: TextDecoration.underline,
-                                        ),
-                                      ),
-                                    ),
-                                  ),
-                            ),
-                          ),
-                        );
-                        if (result != null) {
-                          setState(() {
-                            image = result;
-                          });
-                        }
-                      },
-                      child: ClipRRect(
-                        borderRadius: BorderRadius.circular(8.0),
-                        child: image != null
-                            ? Image.memory(
-                                image!,
-                                width: double.infinity,
-                                height: 150.0,
-                                fit: BoxFit.cover,
-                                // give it a rounded border
-                              )
-                            : DottedBorder(
-                                dashPattern: const [4, 4],
-                                radius: const Radius.circular(8.0),
-                                color: theme.textTheme.displayMedium?.color ??
-                                    Colors.white,
-                                child: const SizedBox(
-                                  width: double.infinity,
-                                  height: 150.0,
-                                  child: Icon(
-                                    Icons.image,
-                                    size: 50,
-                                  ),
-                                ),
-                              ),
-                      ),
-                    ),
-                    // if an image is selected, show a delete button
-                    if (image != null) ...[
-                      Positioned(
-                        top: 8,
-                        right: 8,
-                        child: GestureDetector(
-                          onTap: () {
-                            setState(() {
-                              image = null;
-                            });
-                          },
-                          child: Container(
-                            decoration: BoxDecoration(
-                              color: Colors.black.withOpacity(0.5),
-                              borderRadius: BorderRadius.circular(8.0),
-                            ),
-                            child: const Icon(
-                              Icons.delete,
-                              color: Colors.white,
-                            ),
-                          ),
-                        ),
-                      ),
-                    ],
-                  ],
-                ),
-                const SizedBox(height: 16),
-                Text(
-                  widget.options.translations.commentsTitle,
-                  style: theme.textTheme.titleMedium,
-                ),
-                Text(
-                  widget.options.translations.allowCommentsDescription,
-                  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) {
-                        setState(() {
-                          allowComments = true;
-                        });
-                      },
-                    ),
-                    const SizedBox(
-                      width: 4,
-                    ),
-                    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) {
-                        setState(() {
-                          allowComments = false;
-                        });
-                      },
-                    ),
-                    const SizedBox(
-                      width: 4,
-                    ),
-                    Text(
-                      widget.options.translations.no,
-                      style: theme.textTheme.bodyMedium,
-                    ),
-                  ],
-                ),
-                const SizedBox(height: 120),
-                SafeArea(
-                  bottom: true,
-                  child: Align(
-                    alignment: Alignment.bottomCenter,
-                    child: widget.options.buttonBuilder?.call(
-                          context,
-                          onPostCreated,
-                          widget.options.translations.checkPost,
-                          enabled: formkey.currentState!.validate(),
-                        ) ??
-                        Padding(
-                          padding: const EdgeInsets.symmetric(horizontal: 48),
-                          child: Row(
-                            children: [
-                              Expanded(
-                                child: DefaultFilledButton(
-                                  onPressed: titleIsValid &&
-                                          contentIsValid &&
-                                          (!imageRequired || image != null)
-                                      ? () async {
-                                          if (formkey.currentState!
-                                              .validate()) {
-                                            await onPostCreated();
-                                            await widget.service.postService
-                                                .fetchPosts(null);
-                                          }
-                                        }
-                                      : null,
-                                  buttonText: widget.enablePostOverviewScreen
-                                      ? widget.options.translations.checkPost
-                                      : widget
-                                          .options.translations.postCreation,
-                                ),
-                              ),
-                            ],
-                          ),
-                        ),
+      child: Padding(
+        padding: widget.options.padding,
+        child: SingleChildScrollView(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                widget.options.translations.title,
+                style: theme.textTheme.displaySmall,
+              ),
+              widget.options.textInputBuilder?.call(
+                    titleController,
+                    null,
+                    '',
+                  ) ??
+                  TextField(
+                    controller: titleController,
                   ),
+              const SizedBox(height: 16),
+              Text(
+                widget.options.translations.content,
+                style: theme.textTheme.displaySmall,
+              ),
+              const SizedBox(height: 4),
+              Text(
+                widget.options.translations.contentDescription,
+                style: theme.textTheme.bodyMedium,
+              ),
+              // input field for the content
+              SizedBox(
+                height: 100,
+                child: TextField(
+                  controller: contentController,
+                  textCapitalization: TextCapitalization.sentences,
+                  expands: true,
+                  maxLines: null,
+                  minLines: null,
                 ),
-              ],
-            ),
+              ),
+              const SizedBox(
+                height: 16,
+              ),
+              // input field for the content
+              Text(
+                widget.options.translations.uploadImage,
+                style: theme.textTheme.displaySmall,
+              ),
+              Text(
+                widget.options.translations.uploadImageDescription,
+                style: theme.textTheme.bodyMedium,
+              ),
+              // image picker field
+              const SizedBox(
+                height: 8,
+              ),
+              Stack(
+                children: [
+                  GestureDetector(
+                    onTap: () async {
+                      // open a dialog to choose between camera and gallery
+                      var result = await showModalBottomSheet<Uint8List?>(
+                        context: context,
+                        builder: (context) => Container(
+                          padding: const EdgeInsets.all(8.0),
+                          color: theme.colorScheme.background,
+                          child: ImagePicker(
+                            imagePickerConfig: widget.options.imagePickerConfig,
+                            imagePickerTheme: widget.options.imagePickerTheme,
+                          ),
+                        ),
+                      );
+                      if (result != null) {
+                        setState(() {
+                          image = result;
+                        });
+                      }
+                      checkIfEditingDone();
+                    },
+                    child: image != null
+                        ? ClipRRect(
+                            borderRadius: BorderRadius.circular(8.0),
+                            child: Image.memory(
+                              image!,
+                              width: double.infinity,
+                              height: 150.0,
+                              fit: BoxFit.cover,
+                              // give it a rounded border
+                            ),
+                          )
+                        : DottedBorder(
+                            radius: const Radius.circular(8.0),
+                            color: theme.textTheme.displayMedium?.color ??
+                                Colors.white,
+                            child: const SizedBox(
+                              width: double.infinity,
+                              height: 150.0,
+                              child: Icon(
+                                Icons.image,
+                                size: 32,
+                              ),
+                            ),
+                          ),
+                  ),
+                  // if an image is selected, show a delete button
+                  if (image != null) ...[
+                    Positioned(
+                      top: 8,
+                      right: 8,
+                      child: GestureDetector(
+                        onTap: () {
+                          setState(() {
+                            image = null;
+                          });
+                          checkIfEditingDone();
+                        },
+                        child: Container(
+                          decoration: BoxDecoration(
+                            color: Colors.black.withOpacity(0.5),
+                            borderRadius: BorderRadius.circular(8.0),
+                          ),
+                          child: const Icon(
+                            Icons.delete,
+                            color: Colors.white,
+                          ),
+                        ),
+                      ),
+                    ),
+                  ],
+                ],
+              ),
+
+              const SizedBox(height: 16),
+
+              Text(
+                widget.options.translations.commentsTitle,
+                style: theme.textTheme.displaySmall,
+              ),
+              Text(
+                widget.options.translations.allowCommentsDescription,
+                style: theme.textTheme.bodyMedium,
+              ),
+              // radio buttons for yes or no
+              Switch(
+                value: allowComments,
+                onChanged: (newValue) {
+                  setState(() {
+                    allowComments = newValue;
+                  });
+                },
+              ),
+              Align(
+                alignment: Alignment.bottomCenter,
+                child: (widget.options.buttonBuilder != null)
+                    ? widget.options.buttonBuilder!(
+                        context,
+                        onPostCreated,
+                        widget.options.translations.checkPost,
+                        enabled: editingDone,
+                      )
+                    : ElevatedButton(
+                        onPressed: editingDone
+                            ? () async {
+                                await onPostCreated();
+                                await widget.service.postService
+                                    .fetchPosts(null);
+                              }
+                            : null,
+                        child: Text(
+                          widget.options.translations.checkPost,
+                          style: theme.textTheme.bodyMedium,
+                        ),
+                      ),
+              ),
+            ],
           ),
         ),
       ),

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

@@ -1,7 +1,8 @@
+// ignore_for_file: prefer_expression_function_bodies
+
 import 'package:flutter/material.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/widgets/default_filled_button.dart';
 
 class TimelinePostOverviewScreen extends StatelessWidget {
   const TimelinePostOverviewScreen({
@@ -18,61 +19,34 @@ class TimelinePostOverviewScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    var isSubmitted = false;
-    return Column(
-      mainAxisSize: MainAxisSize.max,
-      children: [
-        Expanded(
-          child: TimelinePostScreen(
-            userId: timelinePost.creatorId,
-            options: options,
-            post: timelinePost,
-            onPostDelete: () async {},
-            service: service,
-            isOverviewScreen: true,
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(options.translations.postOverview),
+      ),
+      body: Column(
+        children: [
+          Flexible(
+            child: TimelinePostScreen(
+              userId: timelinePost.creatorId,
+              options: options,
+              post: timelinePost,
+              onPostDelete: () {},
+              service: service,
+            ),
           ),
-        ),
-        options.postOverviewButtonBuilder?.call(
-              context,
-              () {
-                if (isSubmitted) return;
-                isSubmitted = true;
+          Padding(
+            padding: const EdgeInsets.only(bottom: 30.0),
+            child: ElevatedButton(
+              onPressed: () {
                 onPostSubmit(timelinePost);
               },
-              options.translations.postIn,
-              timelinePost,
-            ) ??
-            options.buttonBuilder?.call(
-              context,
-              () {
-                if (isSubmitted) return;
-                isSubmitted = true;
-                onPostSubmit(timelinePost);
-              },
-              options.translations.postIn,
-              enabled: true,
-            ) ??
-            SafeArea(
-              bottom: true,
-              child: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 80),
-                child: Row(
-                  children: [
-                    Expanded(
-                      child: DefaultFilledButton(
-                        onPressed: () async {
-                          if (isSubmitted) return;
-                          isSubmitted = true;
-                          onPostSubmit(timelinePost);
-                        },
-                        buttonText: options.translations.postIn,
-                      ),
-                    ),
-                  ],
-                ),
+              child: Text(
+                '${options.translations.postIn} ${timelinePost.category}',
               ),
             ),
-      ],
+          ),
+        ],
+      ),
     );
   }
 }

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

@@ -3,26 +3,25 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import 'dart:async';
+import 'dart:typed_data';
 
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/svg.dart';
+import 'package:flutter_html/flutter_html.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_options.dart';
 import 'package:flutter_timeline_view/src/widgets/reaction_bottom.dart';
 import 'package:flutter_timeline_view/src/widgets/tappable_image.dart';
-import 'package:flutter_timeline_view/src/widgets/timeline_post_widget.dart';
 import 'package:intl/intl.dart';
 
-class TimelinePostScreen extends StatefulWidget {
+class TimelinePostScreen extends StatelessWidget {
   const TimelinePostScreen({
     required this.userId,
     required this.service,
     required this.options,
     required this.post,
     required this.onPostDelete,
-    this.allowAllDeletion = false,
-    this.isOverviewScreen = false,
     this.onUserTap,
     super.key,
   });
@@ -30,10 +29,6 @@ class TimelinePostScreen extends StatefulWidget {
   /// The user id of the current user
   final String userId;
 
-  /// Allow all posts to be deleted instead of
-  ///  only the posts of the current user
-  final bool allowAllDeletion;
-
   /// The timeline service to fetch the post details
   final TimelineService service;
 
@@ -48,16 +43,59 @@ class TimelinePostScreen extends StatefulWidget {
 
   final VoidCallback onPostDelete;
 
-  final bool? isOverviewScreen;
-
   @override
-  State<TimelinePostScreen> createState() => _TimelinePostScreenState();
+  Widget build(BuildContext context) => Scaffold(
+        body: _TimelinePostScreen(
+          userId: userId,
+          service: service,
+          options: options,
+          post: post,
+          onPostDelete: onPostDelete,
+          onUserTap: onUserTap,
+        ),
+      );
 }
 
-class _TimelinePostScreenState extends State<TimelinePostScreen> {
+class _TimelinePostScreen extends StatefulWidget {
+  const _TimelinePostScreen({
+    required this.userId,
+    required this.service,
+    required this.options,
+    required this.post,
+    required this.onPostDelete,
+    this.onUserTap,
+  });
+
+  final String userId;
+
+  final TimelineService service;
+
+  final TimelineOptions options;
+
+  final TimelinePost post;
+
+  final Function(String userId)? onUserTap;
+
+  final VoidCallback onPostDelete;
+
+  @override
+  State<_TimelinePostScreen> createState() => _TimelinePostScreenState();
+}
+
+class _TimelinePostScreenState extends State<_TimelinePostScreen> {
   TimelinePost? post;
   bool isLoading = true;
 
+  late var textInputBuilder = widget.options.textInputBuilder ??
+      (controller, suffixIcon, hintText) => TextField(
+            textCapitalization: TextCapitalization.sentences,
+            controller: controller,
+            decoration: InputDecoration(
+              hintText: hintText,
+              suffixIcon: suffixIcon,
+            ),
+          );
+
   @override
   void initState() {
     super.initState();
@@ -74,7 +112,8 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
         post = loadedPost;
         isLoading = false;
       });
-    } on Exception catch (_) {
+    } on Exception catch (e) {
+      debugPrint('Error loading post: $e');
       setState(() {
         isLoading = false;
       });
@@ -91,13 +130,12 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
   Widget build(BuildContext context) {
     var theme = Theme.of(context);
     var dateFormat = widget.options.dateFormat ??
-        DateFormat(
-          "dd/MM/yyyy 'at' HH:mm",
-          Localizations.localeOf(context).languageCode,
-        );
+        DateFormat('dd/MM/yyyy', Localizations.localeOf(context).languageCode);
+    var timeFormat = widget.options.timeFormat ?? DateFormat('HH:mm');
+
     if (isLoading) {
-      return const Center(
-        child: CircularProgressIndicator.adaptive(),
+      const Center(
+        child: CircularProgressIndicator(),
       );
     }
     if (this.post == null) {
@@ -114,49 +152,10 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
           ? a.createdAt.compareTo(b.createdAt)
           : b.createdAt.compareTo(a.createdAt),
     );
-    var isLikedByUser = post.likedBy?.contains(widget.userId) ?? false;
-
-    var textInputBuilder = widget.options.textInputBuilder ??
-        (controller, suffixIcon, hintText) => TextField(
-              style: theme.textTheme.bodyMedium,
-              textCapitalization: TextCapitalization.sentences,
-              controller: controller,
-              decoration: InputDecoration(
-                enabledBorder: OutlineInputBorder(
-                  borderRadius: BorderRadius.circular(25),
-                  borderSide: const BorderSide(
-                    color: Colors.black,
-                  ),
-                ),
-                focusedBorder: OutlineInputBorder(
-                  borderRadius: BorderRadius.circular(25),
-                  borderSide: const BorderSide(
-                    color: Colors.black,
-                  ),
-                ),
-                contentPadding: const EdgeInsets.symmetric(
-                  vertical: 0,
-                  horizontal: 16,
-                ),
-                hintText: widget.options.translations.writeComment,
-                hintStyle: theme.textTheme.bodyMedium!.copyWith(
-                  color: theme.textTheme.bodyMedium!.color!.withOpacity(0.5),
-                ),
-                fillColor: Colors.white,
-                filled: true,
-                border: const OutlineInputBorder(
-                  borderRadius: BorderRadius.all(
-                    Radius.circular(25),
-                  ),
-                  borderSide: BorderSide.none,
-                ),
-                suffixIcon: suffixIcon,
-              ),
-            );
 
     return Stack(
       children: [
-        RefreshIndicator.adaptive(
+        RefreshIndicator(
           onRefresh: () async {
             updatePost(
               await widget.service.postService.fetchPostDetails(
@@ -168,7 +167,7 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
           },
           child: SingleChildScrollView(
             child: Padding(
-              padding: widget.options.paddings.postPadding,
+              padding: widget.options.padding,
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
@@ -185,10 +184,10 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
                               if (post.creator!.imageUrl != null) ...[
                                 widget.options.userAvatarBuilder?.call(
                                       post.creator!,
-                                      28,
+                                      40,
                                     ) ??
                                     CircleAvatar(
-                                      radius: 14,
+                                      radius: 20,
                                       backgroundImage:
                                           CachedNetworkImageProvider(
                                         post.creator!.imageUrl!,
@@ -197,10 +196,10 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
                               ] else ...[
                                 widget.options.anonymousAvatarBuilder?.call(
                                       post.creator!,
-                                      28,
+                                      40,
                                     ) ??
                                     const CircleAvatar(
-                                      radius: 14,
+                                      radius: 20,
                                       child: Icon(
                                         Icons.person,
                                       ),
@@ -214,27 +213,16 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
                                     widget.options.translations.anonymousUser,
                                 style: widget.options.theme.textStyles
                                         .postCreatorTitleStyle ??
-                                    theme.textTheme.titleSmall!.copyWith(
-                                      color: Colors.black,
-                                    ),
+                                    theme.textTheme.titleMedium,
                               ),
                             ],
                           ),
                         ),
                       const Spacer(),
-                      if (!(widget.isOverviewScreen ?? false) &&
-                          (widget.allowAllDeletion ||
-                              post.creator?.userId == widget.userId)) ...[
+                      if (widget.options.allowAllDeletion ||
+                          post.creator?.userId == widget.userId)
                         PopupMenuButton(
-                          onSelected: (value) async {
-                            if (value == 'delete') {
-                              await showPostDeletionConfirmationDialog(
-                                widget.options,
-                                context,
-                                widget.onPostDelete,
-                              );
-                            }
-                          },
+                          onSelected: (value) => widget.onPostDelete(),
                           itemBuilder: (BuildContext context) =>
                               <PopupMenuEntry<String>>[
                             PopupMenuItem<String>(
@@ -263,11 +251,10 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
                                 color: widget.options.theme.iconColor,
                               ),
                         ),
-                      ],
                     ],
                   ),
-                  // image of the posts
-                  if (post.imageUrl != null || post.image != null) ...[
+                  // image of the post
+                  if (post.imageUrl != null) ...[
                     const SizedBox(height: 8),
                     ClipRRect(
                       borderRadius: const BorderRadius.all(Radius.circular(8)),
@@ -302,17 +289,11 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
                                     false;
                               },
                             )
-                          : post.image != null
-                              ? Image.memory(
-                                  width: double.infinity,
-                                  post.image!,
-                                  fit: BoxFit.fitHeight,
-                                )
-                              : CachedNetworkImage(
-                                  width: double.infinity,
-                                  imageUrl: post.imageUrl!,
-                                  fit: BoxFit.fitHeight,
-                                ),
+                          : CachedNetworkImage(
+                              width: double.infinity,
+                              imageUrl: post.imageUrl!,
+                              fit: BoxFit.fitHeight,
+                            ),
                     ),
                   ],
                   const SizedBox(
@@ -321,70 +302,65 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
                   // post information
                   Row(
                     children: [
-                      IconButton(
-                        padding: EdgeInsets.zero,
-                        constraints: const BoxConstraints(),
-                        onPressed: () async {
-                          if (widget.isOverviewScreen ?? false) return;
-                          if (isLikedByUser) {
+                      if (post.likedBy?.contains(widget.userId) ?? false) ...[
+                        InkWell(
+                          onTap: () async {
                             updatePost(
                               await widget.service.postService.unlikePost(
                                 widget.userId,
                                 post,
                               ),
                             );
-                            setState(() {});
-                          } else {
+                          },
+                          child: Container(
+                            color: Colors.transparent,
+                            child: widget.options.theme.likedIcon ??
+                                Icon(
+                                  Icons.thumb_up_rounded,
+                                  color: widget.options.theme.iconColor,
+                                ),
+                          ),
+                        ),
+                      ] else ...[
+                        InkWell(
+                          onTap: () async {
                             updatePost(
                               await widget.service.postService.likePost(
                                 widget.userId,
                                 post,
                               ),
                             );
-                            setState(() {});
-                          }
-                        },
-                        icon: isLikedByUser
-                            ? widget.options.theme.likedIcon ??
+                          },
+                          child: Container(
+                            color: Colors.transparent,
+                            child: widget.options.theme.likeIcon ??
                                 Icon(
-                                  Icons.favorite_rounded,
-                                  color: widget.options.theme.iconColor,
-                                  size: widget.options.iconSize,
-                                )
-                            : widget.options.theme.likeIcon ??
-                                Icon(
-                                  Icons.favorite_outline_outlined,
+                                  Icons.thumb_up_alt_outlined,
                                   color: widget.options.theme.iconColor,
                                   size: widget.options.iconSize,
                                 ),
-                      ),
+                          ),
+                        ),
+                      ],
                       const SizedBox(width: 8),
                       if (post.reactionEnabled)
                         widget.options.theme.commentIcon ??
-                            SvgPicture.asset(
-                              'assets/Comment.svg',
-                              package: 'flutter_timeline_view',
-                              // ignore: deprecated_member_use
+                            Icon(
+                              Icons.chat_bubble_outline_rounded,
                               color: widget.options.theme.iconColor,
-                              width: widget.options.iconSize,
-                              height: widget.options.iconSize,
+                              size: widget.options.iconSize,
                             ),
                     ],
                   ),
                   const SizedBox(height: 8),
-                  // ignore: avoid_bool_literals_in_conditional_expressions
-                  if (widget.isOverviewScreen != null
-                      ? !widget.isOverviewScreen!
-                      : false) ...[
-                    Text(
-                      // ignore: lines_longer_than_80_chars
-                      '${post.likes} ${post.likes > 1 ? widget.options.translations.multipleLikesTitle : widget.options.translations.oneLikeTitle}',
-                      style: widget.options.theme.textStyles
-                              .postLikeTitleAndAmount ??
-                          theme.textTheme.titleSmall
-                              ?.copyWith(color: Colors.black),
-                    ),
-                  ],
+                  Text(
+                    '${post.likes} ${widget.options.translations.likesTitle}',
+                    style: widget
+                            .options.theme.textStyles.postLikeTitleAndAmount ??
+                        theme.textTheme.titleSmall
+                            ?.copyWith(color: Colors.black),
+                  ),
+                  const SizedBox(height: 4),
                   Text.rich(
                     TextSpan(
                       text: widget.options.nameBuilder?.call(post.creator) ??
@@ -392,46 +368,66 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
                           widget.options.translations.anonymousUser,
                       style: widget
                               .options.theme.textStyles.postCreatorNameStyle ??
-                          theme.textTheme.titleSmall!
-                              .copyWith(color: Colors.black),
+                          theme.textTheme.titleSmall,
                       children: [
+                        const TextSpan(text: ' '),
                         TextSpan(
                           text: post.title,
                           style:
                               widget.options.theme.textStyles.postTitleStyle ??
-                                  theme.textTheme.bodySmall,
+                                  theme.textTheme.bodyMedium,
                         ),
                       ],
                     ),
                   ),
                   const SizedBox(height: 20),
+                  Html(
+                    data: post.content,
+                    style: {
+                      'body': Style(
+                        padding: HtmlPaddings.zero,
+                        margin: Margins.zero,
+                      ),
+                      '#': Style(
+                        maxLines: 3,
+                        textOverflow: TextOverflow.ellipsis,
+                        padding: HtmlPaddings.zero,
+                        margin: Margins.zero,
+                      ),
+                      'H1': Style(
+                        padding: HtmlPaddings.zero,
+                        margin: Margins.zero,
+                      ),
+                      'H2': Style(
+                        padding: HtmlPaddings.zero,
+                        margin: Margins.zero,
+                      ),
+                      'H3': Style(
+                        padding: HtmlPaddings.zero,
+                        margin: Margins.zero,
+                      ),
+                    },
+                  ),
+                  const SizedBox(height: 4),
                   Text(
-                    post.content,
+                    '${dateFormat.format(post.createdAt)} '
+                    '${widget.options.translations.postAt} '
+                    '${timeFormat.format(post.createdAt)}',
                     style: theme.textTheme.bodySmall,
                   ),
-                  Text(
-                    '${dateFormat.format(post.createdAt)} ',
-                    style: theme.textTheme.labelSmall?.copyWith(
-                      letterSpacing: 0.5,
-                    ),
-                  ),
-                  const SizedBox(height: 8),
-                  // ignore: avoid_bool_literals_in_conditional_expressions
-                  if (post.reactionEnabled && widget.isOverviewScreen != null
-                      ? !widget.isOverviewScreen!
-                      : false) ...[
+                  const SizedBox(height: 20),
+                  if (post.reactionEnabled) ...[
                     Text(
-                      widget.options.translations.commentsTitleOnPost,
-                      style: theme.textTheme.titleSmall!
-                          .copyWith(color: Colors.black),
+                      widget.options.translations.commentsTitle,
+                      style: theme.textTheme.displaySmall,
                     ),
                     for (var reaction
                         in post.reactions ?? <TimelinePostReaction>[]) ...[
-                      const SizedBox(height: 4),
+                      const SizedBox(height: 16),
                       GestureDetector(
                         onLongPressStart: (details) async {
                           if (reaction.creatorId == widget.userId ||
-                              widget.allowAllDeletion) {
+                              widget.options.allowAllDeletion) {
                             var overlay = Overlay.of(context)
                                 .context
                                 .findRenderObject()! as RenderBox;
@@ -465,16 +461,18 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
                           }
                         },
                         child: Row(
-                          crossAxisAlignment: CrossAxisAlignment.start,
+                          crossAxisAlignment: reaction.imageUrl != null
+                              ? CrossAxisAlignment.start
+                              : CrossAxisAlignment.center,
                           children: [
                             if (reaction.creator?.imageUrl != null &&
                                 reaction.creator!.imageUrl!.isNotEmpty) ...[
                               widget.options.userAvatarBuilder?.call(
                                     reaction.creator!,
-                                    14,
+                                    25,
                                   ) ??
                                   CircleAvatar(
-                                    radius: 14,
+                                    radius: 20,
                                     backgroundImage: CachedNetworkImageProvider(
                                       reaction.creator!.imageUrl!,
                                     ),
@@ -482,10 +480,10 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
                             ] else ...[
                               widget.options.anonymousAvatarBuilder?.call(
                                     reaction.creator!,
-                                    14,
+                                    25,
                                   ) ??
                                   const CircleAvatar(
-                                    radius: 14,
+                                    radius: 20,
                                     child: Icon(
                                       Icons.person,
                                     ),
@@ -499,12 +497,11 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
                                   children: [
                                     Text(
                                       widget.options.nameBuilder
-                                              ?.call(reaction.creator) ??
+                                              ?.call(post.creator) ??
                                           reaction.creator?.fullName ??
                                           widget.options.translations
                                               .anonymousUser,
-                                      style: theme.textTheme.titleSmall!
-                                          .copyWith(color: Colors.black),
+                                      style: theme.textTheme.titleSmall,
                                     ),
                                     Padding(
                                       padding: const EdgeInsets.all(8.0),
@@ -521,95 +518,31 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
                                 child: Text.rich(
                                   TextSpan(
                                     text: widget.options.nameBuilder
-                                            ?.call(reaction.creator) ??
+                                            ?.call(post.creator) ??
                                         reaction.creator?.fullName ??
                                         widget
                                             .options.translations.anonymousUser,
-                                    style: theme.textTheme.titleSmall!
-                                        .copyWith(color: Colors.black),
+                                    style: theme.textTheme.titleSmall,
                                     children: [
-                                      const TextSpan(text: ' '),
+                                      const TextSpan(text: '  '),
                                       TextSpan(
                                         text: reaction.reaction ?? '',
-                                        style: theme.textTheme.bodySmall,
+                                        style: theme.textTheme.bodyMedium,
                                       ),
-                                      const TextSpan(text: '\n'),
-                                      TextSpan(
-                                        text: dateFormat
-                                            .format(reaction.createdAt),
-                                        style: theme.textTheme.labelSmall!
-                                            .copyWith(
-                                          color: theme
-                                              .textTheme.labelSmall!.color!
-                                              .withOpacity(0.5),
-                                          letterSpacing: 0.5,
-                                        ),
-                                      ),
-
                                       // text should go to new line
                                     ],
                                   ),
                                 ),
                               ),
                             ],
-                            Builder(
-                              builder: (context) {
-                                var isLikedByUser =
-                                    reaction.likedBy?.contains(widget.userId) ??
-                                        false;
-                                return IconButton(
-                                  padding: const EdgeInsets.only(left: 12),
-                                  constraints: const BoxConstraints(),
-                                  onPressed: () async {
-                                    if (isLikedByUser) {
-                                      updatePost(
-                                        await widget.service.postService
-                                            .unlikeReaction(
-                                          widget.userId,
-                                          post,
-                                          reaction.id,
-                                        ),
-                                      );
-                                      setState(() {});
-                                    } else {
-                                      updatePost(
-                                        await widget.service.postService
-                                            .likeReaction(
-                                          widget.userId,
-                                          post,
-                                          reaction.id,
-                                        ),
-                                      );
-                                      setState(() {});
-                                    }
-                                  },
-                                  icon: isLikedByUser
-                                      ? widget.options.theme.likedIcon ??
-                                          Icon(
-                                            Icons.favorite_rounded,
-                                            color:
-                                                widget.options.theme.iconColor,
-                                            size: 14,
-                                          )
-                                      : widget.options.theme.likeIcon ??
-                                          Icon(
-                                            Icons.favorite_outline_outlined,
-                                            color:
-                                                widget.options.theme.iconColor,
-                                            size: 14,
-                                          ),
-                                );
-                              },
-                            ),
                           ],
                         ),
                       ),
-                      const SizedBox(height: 4),
                     ],
                     if (post.reactions?.isEmpty ?? true) ...[
+                      const SizedBox(height: 16),
                       Text(
                         widget.options.translations.firstComment,
-                        style: theme.textTheme.bodySmall,
                       ),
                     ],
                     const SizedBox(height: 120),
@@ -619,74 +552,53 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
             ),
           ),
         ),
-        if (post.reactionEnabled && !(widget.isOverviewScreen ?? false))
+        if (post.reactionEnabled)
           Align(
             alignment: Alignment.bottomCenter,
-            child: Container(
-              color: theme.scaffoldBackgroundColor,
-              constraints: BoxConstraints(
-                maxWidth: MediaQuery.of(context).size.width,
-              ),
-              child: SafeArea(
-                bottom: true,
-                child: Row(
-                  crossAxisAlignment: CrossAxisAlignment.center,
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    Padding(
-                      padding: const EdgeInsets.only(left: 8),
-                      child: post.creator!.imageUrl != null
-                          ? widget.options.userAvatarBuilder?.call(
-                                post.creator!,
-                                28,
-                              ) ??
-                              CircleAvatar(
-                                radius: 14,
-                                backgroundImage: CachedNetworkImageProvider(
-                                  post.creator!.imageUrl!,
-                                ),
-                              )
-                          : widget.options.anonymousAvatarBuilder?.call(
-                                post.creator!,
-                                28,
-                              ) ??
-                              const CircleAvatar(
-                                radius: 14,
-                                child: Icon(
-                                  Icons.person,
-                                ),
-                              ),
+            child: ReactionBottom(
+              messageInputBuilder: textInputBuilder,
+              onPressSelectImage: () async {
+                // open the image picker
+                var result = await showModalBottomSheet<Uint8List?>(
+                  context: context,
+                  builder: (context) => Container(
+                    padding: const EdgeInsets.all(8.0),
+                    color: theme.colorScheme.background,
+                    child: ImagePicker(
+                      imagePickerConfig: widget.options.imagePickerConfig,
+                      imagePickerTheme: widget.options.imagePickerTheme,
                     ),
-                    Flexible(
-                      child: Padding(
-                        padding: const EdgeInsets.only(
-                          left: 8,
-                          right: 16,
-                          top: 8,
-                          bottom: 8,
-                        ),
-                        child: ReactionBottom(
-                          messageInputBuilder: textInputBuilder,
-                          onReactionSubmit: (reaction) async => updatePost(
-                            await widget.service.postService.reactToPost(
-                              post,
-                              TimelinePostReaction(
-                                id: '',
-                                postId: post.id,
-                                reaction: reaction,
-                                creatorId: widget.userId,
-                                createdAt: DateTime.now(),
-                              ),
-                            ),
-                          ),
-                          translations: widget.options.translations,
-                          iconColor: widget.options.theme.iconColor,
-                        ),
+                  ),
+                );
+                if (result != null) {
+                  updatePost(
+                    await widget.service.postService.reactToPost(
+                      post,
+                      TimelinePostReaction(
+                        id: '',
+                        postId: post.id,
+                        creatorId: widget.userId,
+                        createdAt: DateTime.now(),
                       ),
+                      image: result,
                     ),
-                  ],
+                  );
+                }
+              },
+              onReactionSubmit: (reaction) async => updatePost(
+                await widget.service.postService.reactToPost(
+                  post,
+                  TimelinePostReaction(
+                    id: '',
+                    postId: post.id,
+                    reaction: reaction,
+                    creatorId: widget.userId,
+                    createdAt: DateTime.now(),
+                  ),
                 ),
               ),
+              translations: widget.options.translations,
+              iconColor: widget.options.theme.iconColor,
             ),
           ),
       ],

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

@@ -9,34 +9,25 @@ import 'package:flutter_timeline_interface/flutter_timeline_interface.dart';
 import 'package:flutter_timeline_view/flutter_timeline_view.dart';
 
 class TimelineScreen extends StatefulWidget {
-  TimelineScreen({
+  const TimelineScreen({
     this.userId = 'test_user',
-    TimelineService? service,
+    this.service,
     this.options = const TimelineOptions(),
     this.onPostTap,
     this.scrollController,
     this.onUserTap,
-    this.onRefresh,
     this.posts,
     this.timelineCategory,
     this.postWidgetBuilder,
     this.filterEnabled = false,
-    this.allowAllDeletion = false,
     super.key,
-  }) : service = service ??
-            TimelineService(
-              postService: LocalTimelinePostService(),
-            );
+  });
 
   /// The user id of the current user
   final String userId;
 
-  /// Allow all posts to be deleted instead of
-  ///  only the posts of the current user
-  final bool allowAllDeletion;
-
   /// The service to use for fetching and manipulating posts
-  final TimelineService service;
+  final TimelineService? service;
 
   /// All the configuration options for the timelinescreens and widgets
   final TimelineOptions options;
@@ -54,9 +45,6 @@ class TimelineScreen extends StatefulWidget {
   /// Called when a post is tapped
   final Function(TimelinePost)? onPostTap;
 
-  /// Called when the timeline is refreshed by pulling down
-  final Function(BuildContext context, String? category)? onRefresh;
-
   /// If this is not null, the user can tap on the user avatar or name
   final Function(String userId)? onUserTap;
 
@@ -75,6 +63,10 @@ class _TimelineScreenState extends State<TimelineScreen> {
   late var textFieldController = TextEditingController(
     text: widget.options.filterOptions.initialFilterWord,
   );
+  late var service = widget.service ??
+      TimelineService(
+        postService: LocalTimelinePostService(),
+      );
 
   bool isLoading = true;
 
@@ -82,59 +74,28 @@ class _TimelineScreenState extends State<TimelineScreen> {
 
   late var filterWord = widget.options.filterOptions.initialFilterWord;
 
-  bool _isOnTop = true;
-
-  @override
-  void dispose() {
-    controller.removeListener(_updateIsOnTop);
-    controller.dispose();
-    super.dispose();
-  }
-
-  void _updateIsOnTop() {
-    setState(() {
-      _isOnTop = controller.position.pixels < 0.1;
-    });
-  }
-
   @override
   void initState() {
     super.initState();
     controller = widget.scrollController ?? ScrollController();
-    controller.addListener(_updateIsOnTop);
-
-    // only load the posts after the first frame
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      unawaited(loadPosts());
-    });
-  }
-
-  @override
-  void didUpdateWidget(covariant TimelineScreen oldWidget) {
-    super.didUpdateWidget(oldWidget);
-
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      unawaited(loadPosts());
-    });
+    unawaited(loadPosts());
   }
 
   @override
   Widget build(BuildContext context) {
     if (isLoading && widget.posts == null) {
-      return const Center(child: CircularProgressIndicator.adaptive());
+      return const Center(child: CircularProgressIndicator());
     }
 
     // Build the list of posts
     return ListenableBuilder(
-      listenable: widget.service.postService,
+      listenable: service.postService,
       builder: (context, _) {
-        if (!context.mounted) return const SizedBox();
-        var posts =
-            widget.posts ?? widget.service.postService.getPosts(category);
+        var posts = widget.posts ?? service.postService.getPosts(category);
 
         if (widget.filterEnabled && filterWord != null) {
-          if (widget.service.postService is TimelineFilterService) {
-            posts = (widget.service.postService as TimelineFilterService)
+          if (service.postService is TimelineFilterService) {
+            posts = (service.postService as TimelineFilterService)
                 .filterPosts(filterWord!, {});
           } else {
             debugPrint('Timeline service needs to mixin'
@@ -157,19 +118,16 @@ class _TimelineScreenState extends State<TimelineScreen> {
           );
         }
 
-        var categories = widget.service.postService.categories;
-
         return Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             SizedBox(
-              height: widget.options.paddings.mainPadding.top,
+              height: widget.options.padding.top,
             ),
             if (widget.filterEnabled) ...[
               Padding(
-                padding: EdgeInsets.only(
-                  left: widget.options.paddings.mainPadding.left,
-                  right: widget.options.paddings.mainPadding.right,
+                padding: EdgeInsets.symmetric(
+                  horizontal: widget.options.padding.horizontal,
                 ),
                 child: Row(
                   crossAxisAlignment: CrossAxisAlignment.end,
@@ -226,16 +184,10 @@ class _TimelineScreenState extends State<TimelineScreen> {
               ),
             ],
             CategorySelector(
-              categories: categories,
-              isOnTop: _isOnTop,
               filter: category,
               options: widget.options,
               onTapCategory: (categoryKey) {
                 setState(() {
-                  service.postService.selectedCategory =
-                      categories.firstWhereOrNull(
-                    (element) => element.key == categoryKey,
-                  );
                   category = categoryKey;
                 });
               },
@@ -244,90 +196,74 @@ class _TimelineScreenState extends State<TimelineScreen> {
               height: 12,
             ),
             Expanded(
-              child: RefreshIndicator.adaptive(
-                onRefresh: () async {
-                  await widget.onRefresh?.call(context, category);
-                  await loadPosts();
-                },
-                child: SingleChildScrollView(
-                  controller: controller,
-                  child: Column(
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      /// Add a optional custom header to the list of posts
-                      widget.options.listHeaderBuilder
-                              ?.call(context, category) ??
-                          const SizedBox.shrink(),
-                      ...posts.map(
-                        (post) => Padding(
-                          padding: widget.options.paddings.postPadding,
-                          child: widget.postWidgetBuilder?.call(post) ??
-                              TimelinePostWidget(
-                                service: widget.service,
-                                userId: widget.userId,
-                                options: widget.options,
-                                allowAllDeletion: widget.allowAllDeletion,
-                                post: post,
-                                onTap: () async {
-                                  if (widget.onPostTap != null) {
-                                    widget.onPostTap!.call(post);
+              child: SingleChildScrollView(
+                controller: controller,
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    ...posts.map(
+                      (post) => Padding(
+                        padding: widget.options.postPadding,
+                        child: widget.postWidgetBuilder?.call(post) ??
+                            TimelinePostWidget(
+                              service: service,
+                              userId: widget.userId,
+                              options: widget.options,
+                              post: post,
+                              onTap: () async {
+                                if (widget.onPostTap != null) {
+                                  widget.onPostTap!.call(post);
 
-                                    return;
-                                  }
+                                  return;
+                                }
 
-                                  await Navigator.push(
-                                    context,
-                                    MaterialPageRoute(
-                                      builder: (context) => Scaffold(
-                                        body: TimelinePostScreen(
-                                          userId: 'test_user',
-                                          service: widget.service,
-                                          options: widget.options,
-                                          post: post,
-                                          onPostDelete: () {
-                                            widget.service.postService
-                                                .deletePost(post);
-                                            Navigator.of(context).pop();
-                                          },
-                                        ),
+                                await Navigator.push(
+                                  context,
+                                  MaterialPageRoute(
+                                    builder: (context) => Scaffold(
+                                      body: TimelinePostScreen(
+                                        userId: 'test_user',
+                                        service: service,
+                                        options: widget.options,
+                                        post: post,
+                                        onPostDelete: () {
+                                          service.postService.deletePost(post);
+                                          Navigator.of(context).pop();
+                                        },
                                       ),
                                     ),
-                                  );
-                                },
-                                onTapLike: () async => widget
-                                    .service.postService
-                                    .likePost(widget.userId, post),
-                                onTapUnlike: () async => widget
-                                    .service.postService
-                                    .unlikePost(widget.userId, post),
-                                onPostDelete: () async =>
-                                    widget.service.postService.deletePost(post),
-                                onUserTap: widget.onUserTap,
-                              ),
-                        ),
-                      ),
-                      if (posts.isEmpty)
-                        Center(
-                          child: Padding(
-                            padding: const EdgeInsets.all(8.0),
-                            child: Text(
-                              category == null
-                                  ? widget.options.translations.noPosts
-                                  : widget
-                                      .options.translations.noPostsWithFilter,
-                              style:
-                                  widget.options.theme.textStyles.noPostsStyle,
+                                  ),
+                                );
+                              },
+                              onTapLike: () async => service.postService
+                                  .likePost(widget.userId, post),
+                              onTapUnlike: () async => service.postService
+                                  .unlikePost(widget.userId, post),
+                              onPostDelete: () async =>
+                                  service.postService.deletePost(post),
+                              onUserTap: widget.onUserTap,
                             ),
+                      ),
+                    ),
+                    if (posts.isEmpty)
+                      Center(
+                        child: Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Text(
+                            category == null
+                                ? widget.options.translations.noPosts
+                                : widget.options.translations.noPostsWithFilter,
+                            style: widget.options.theme.textStyles.noPostsStyle,
                           ),
                         ),
-                      SizedBox(
-                        height: widget.options.paddings.mainPadding.bottom,
                       ),
-                    ],
-                  ),
+                  ],
                 ),
               ),
             ),
+            SizedBox(
+              height: widget.options.padding.bottom,
+            ),
           ],
         );
       },
@@ -335,10 +271,9 @@ class _TimelineScreenState extends State<TimelineScreen> {
   }
 
   Future<void> loadPosts() async {
-    if (widget.posts != null || !context.mounted) return;
+    if (widget.posts != null) return;
     try {
-      await widget.service.postService.fetchCategories();
-      await widget.service.postService.fetchPosts(category);
+      await service.postService.fetchPosts(category);
       setState(() {
         isLoading = false;
       });

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

@@ -1,15 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_timeline_interface/flutter_timeline_interface.dart';
 import 'package:flutter_timeline_view/src/config/timeline_options.dart';
-import 'package:flutter_timeline_view/src/widgets/default_filled_button.dart';
-import 'package:flutter_timeline_view/src/widgets/post_creation_textfield.dart';
 
-class TimelineSelectionScreen extends StatefulWidget {
+class TimelineSelectionScreen extends StatelessWidget {
   const TimelineSelectionScreen({
     required this.options,
     required this.categories,
     required this.onCategorySelected,
-    required this.postService,
     super.key,
   });
 
@@ -19,196 +16,52 @@ class TimelineSelectionScreen extends StatefulWidget {
 
   final Function(TimelineCategory) onCategorySelected;
 
-  final TimelinePostService postService;
-
-  @override
-  State<TimelineSelectionScreen> createState() =>
-      _TimelineSelectionScreenState();
-}
-
-class _TimelineSelectionScreenState extends State<TimelineSelectionScreen> {
   @override
   Widget build(BuildContext context) {
     var size = MediaQuery.of(context).size;
     var theme = Theme.of(context);
-
     return Padding(
       padding: EdgeInsets.symmetric(
         horizontal: size.width * 0.05,
       ),
-      child: SingleChildScrollView(
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Padding(
-              padding: const EdgeInsets.only(top: 20, bottom: 12),
-              child: Text(
-                widget.options.translations.timelineSelectionDescription,
-                style: theme.textTheme.titleLarge,
-              ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: EdgeInsets.only(top: size.height * 0.05, bottom: 8),
+            child: Text(
+              options.translations.timelineSelectionDescription,
+              style:
+                  options.theme.textStyles.categorySelectionDescriptionStyle ??
+                      theme.textTheme.displayMedium,
             ),
-            for (var category in widget.categories.where(
-              (element) => element.canCreate && element.key != null,
-            )) ...[
-              widget.options.categorySelectorButtonBuilder?.call(
-                    context,
-                    () {
-                      widget.onCategorySelected.call(category);
-                    },
-                    category.title,
-                  ) ??
-                  InkWell(
-                    onTap: () => widget.onCategorySelected.call(category),
-                    child: Container(
-                      height: 60,
-                      width: double.infinity,
-                      decoration: BoxDecoration(
-                        borderRadius: BorderRadius.circular(10),
-                        border: Border.all(
-                          color: widget.options.theme
-                                  .categorySelectionButtonBorderColor ??
-                              Theme.of(context).primaryColor,
-                          width: 2,
-                        ),
-                        color: widget.options.theme
-                            .categorySelectionButtonBackgroundColor,
-                      ),
-                      margin: const EdgeInsets.symmetric(vertical: 4),
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        mainAxisAlignment: MainAxisAlignment.center,
-                        children: [
-                          Padding(
-                            padding:
-                                const EdgeInsets.symmetric(horizontal: 12.0),
-                            child: Text(
-                              category.title,
-                              style: theme.textTheme.titleMedium,
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
-                  ),
-            ],
+          ),
+          const SizedBox(height: 4),
+          for (var category in categories.where(
+            (element) => element.canCreate,
+          )) ...[
             InkWell(
-              onTap: showCategoryPopup,
+              onTap: () => onCategorySelected.call(category),
               child: Container(
-                height: 60,
                 width: double.infinity,
                 decoration: BoxDecoration(
+                  color: Colors.grey,
                   borderRadius: BorderRadius.circular(10),
-                  border: Border.all(
-                    color: widget
-                            .options.theme.categorySelectionButtonBorderColor ??
-                        const Color(0xFF9E9E9E),
-                    width: 2,
-                  ),
-                  color: widget
-                      .options.theme.categorySelectionButtonBackgroundColor,
                 ),
-                margin: const EdgeInsets.symmetric(vertical: 4),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: [
-                    Padding(
-                      padding: const EdgeInsets.symmetric(horizontal: 12.0),
-                      child: Row(
-                        children: [
-                          Icon(
-                            Icons.add,
-                            color: theme.textTheme.titleMedium?.color!
-                                .withOpacity(0.5),
-                          ),
-                          const SizedBox(width: 8),
-                          Text(
-                            widget.options.translations.addCategoryTitle,
-                            style: theme.textTheme.titleMedium!.copyWith(
-                              color: theme.textTheme.titleMedium?.color!
-                                  .withOpacity(0.5),
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
-                  ],
+                padding: const EdgeInsets.symmetric(
+                  vertical: 26,
+                  horizontal: 16,
+                ),
+                margin: const EdgeInsets.symmetric(vertical: 8),
+                child: Text(
+                  category.title,
+                  style: options.theme.textStyles.categorySelectionTitleStyle ??
+                      theme.textTheme.displaySmall,
                 ),
               ),
             ),
           ],
-        ),
-      ),
-    );
-  }
-
-  Future<void> showCategoryPopup() async {
-    var theme = Theme.of(context);
-    var controller = TextEditingController();
-    await showDialog(
-      context: context,
-      builder: (context) => AlertDialog(
-        backgroundColor: theme.scaffoldBackgroundColor,
-        insetPadding: const EdgeInsets.symmetric(
-          horizontal: 16,
-        ),
-        contentPadding:
-            const EdgeInsets.symmetric(horizontal: 50, vertical: 24),
-        titlePadding: const EdgeInsets.only(left: 44, right: 44, top: 32),
-        title: Text(
-          widget.options.translations.createCategoryPopuptitle,
-          style: theme.textTheme.titleMedium,
-          textAlign: TextAlign.center,
-        ),
-        content: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            PostCreationTextfield(
-              controller: controller,
-              hintText: widget.options.translations.addCategoryHintText,
-              validator: (p0) => p0!.isEmpty
-                  ? widget.options.translations.addCategoryErrorText
-                  : null,
-            ),
-            const SizedBox(height: 16),
-            Row(
-              children: [
-                Expanded(
-                  child: Padding(
-                    padding: const EdgeInsets.symmetric(horizontal: 14),
-                    child: DefaultFilledButton(
-                      onPressed: () async {
-                        if (controller.text.isEmpty) return;
-                        await widget.postService.addCategory(
-                          TimelineCategory(
-                            key: controller.text,
-                            title: controller.text,
-                          ),
-                        );
-                        setState(() {});
-                        if (context.mounted) Navigator.pop(context);
-                      },
-                      buttonText:
-                          widget.options.translations.addCategorySubmitButton,
-                    ),
-                  ),
-                ),
-              ],
-            ),
-            TextButton(
-              onPressed: () {
-                Navigator.of(context).pop(false);
-              },
-              child: Text(
-                widget.options.translations.addCategoryCancelButtton,
-                style: theme.textTheme.bodyMedium!.copyWith(
-                  decoration: TextDecoration.underline,
-                  color: theme.textTheme.bodyMedium?.color!.withOpacity(0.5),
-                ),
-              ),
-            ),
-          ],
-        ),
+        ],
       ),
     );
   }

packages/flutter_timeline_view/lib/src/services/local_post_service.dart

@@ -13,23 +13,11 @@ class LocalTimelinePostService
   @override
   List<TimelinePost> posts = [];
 
-  @override
-  List<TimelineCategory> categories = [];
-
-  @override
-  TimelineCategory? selectedCategory;
-
   @override
   Future<TimelinePost> createPost(TimelinePost post) async {
     posts.add(
       post.copyWith(
-        creator: const TimelinePosterUserModel(
-          userId: 'test_user',
-          imageUrl:
-              'https://cdn.britannica.com/68/143568-050-5246474F/Donkey.jpg?w=400&h=300&c=crop',
-          firstName: 'Ico',
-          lastName: 'Nica',
-        ),
+        creator: const TimelinePosterUserModel(userId: 'test_user'),
       ),
     );
     notifyListeners();
@@ -74,13 +62,7 @@ class LocalTimelinePostService
     for (var reaction in reactions) {
       updatedReactions.add(
         reaction.copyWith(
-          creator: const TimelinePosterUserModel(
-            userId: 'test_user',
-            imageUrl:
-                'https://cdn.britannica.com/68/143568-050-5246474F/Donkey.jpg?w=400&h=300&c=crop',
-            firstName: 'Dirk',
-            lastName: 'lukassen',
-          ),
+          creator: const TimelinePosterUserModel(userId: 'test_user'),
         ),
       );
     }
@@ -92,9 +74,7 @@ class LocalTimelinePostService
 
   @override
   Future<List<TimelinePost>> fetchPosts(String? category) async {
-    if (posts.isEmpty) {
-      posts = getMockedPosts();
-    }
+    posts = getMockedPosts();
     notifyListeners();
     return posts;
   }
@@ -124,11 +104,10 @@ class LocalTimelinePostService
   }
 
   @override
-  Future<TimelinePost?> getPost(String postId) => Future.value(
-        (posts.any((element) => element.id == postId))
-            ? posts.firstWhere((element) => element.id == postId)
-            : null,
-      );
+  TimelinePost? getPost(String postId) =>
+      (posts.any((element) => element.id == postId))
+          ? posts.firstWhere((element) => element.id == postId)
+          : null;
 
   @override
   List<TimelinePost> getPosts(String? category) => posts
@@ -177,13 +156,7 @@ class LocalTimelinePostService
 
     var updatedReaction = reaction.copyWith(
       id: reactionId,
-      creator: const TimelinePosterUserModel(
-        userId: 'test_user',
-        imageUrl:
-            'https://cdn.britannica.com/68/143568-050-5246474F/Donkey.jpg?w=400&h=300&c=crop',
-        firstName: 'Ico',
-        lastName: 'Nica',
-      ),
+      creator: const TimelinePosterUserModel(userId: 'test_user'),
     );
 
     var updatedPost = post.copyWith(
@@ -204,129 +177,41 @@ class LocalTimelinePostService
         TimelinePost(
           id: 'Post0',
           creatorId: 'test_user',
-          title: 'De topper van de maand september',
-          category: 'Category',
-          imageUrl:
-              'https://firebasestorage.googleapis.com/v0/b/appshell-demo.appspot.com/o/do_not_delete_1.png?alt=media&token=e4b2f9f3-c81f-4ac7-a938-e846691399f7',
-          content: 'Dit is onze topper van de maand september! Gefeliciteerd!',
-          likes: 72,
+          title: 'Post 0',
+          category: null,
+          content: 'Standard post without image made by the current user',
+          likes: 0,
           reaction: 0,
           createdAt: DateTime.now(),
-          reactionEnabled: true,
-          creator: const TimelinePosterUserModel(
-            userId: 'test_user',
-            imageUrl:
-                'https://firebasestorage.googleapis.com/v0/b/appshell-demo.appspot.com/o/do_not_delete_3.png?alt=media&token=cd7c156d-0dda-43be-9199-f7d31c30132e',
-            firstName: 'Robin',
-            lastName: 'De Vries',
-          ),
+          reactionEnabled: false,
         ),
         TimelinePost(
           id: 'Post1',
           creatorId: 'test_user2',
-          title: 'De soep van de week is: Aspergesoep',
-          category: 'Category with two lines',
-          content:
-              'Aspergesoep is echt een heerlijke delicatesse. Deze soep wordt'
-              ' vaak gemaakt met verse asperges, bouillon en wat kruiden voor'
-              ' smaak. Het is een perfecte keuze voor een lichte en smaakvolle'
-              ' maaltijd, vooral in het voorjaar wanneer asperges in seizoen'
-              ' zijn. We serveren het met een vleugje room en wat knapperige'
-              ' croutons voor die extra touch.',
-          likes: 72,
+          title: 'Post 1',
+          category: null,
+          content: 'Standard post with image made by a different user and '
+              'reactions enabled',
+          likes: 0,
+          reaction: 0,
+          createdAt: DateTime.now(),
+          reactionEnabled: false,
+          imageUrl:
+              'https://s3-eu-west-1.amazonaws.com/sortlist-core-api/6qpvvqjtmniirpkvp8eg83bicnc2',
+        ),
+        TimelinePost(
+          id: 'Post2',
+          creatorId: 'test_user',
+          title: 'Post 2',
+          category: null,
+          content: 'Standard post with image made by the current user and'
+              ' reactions enabled',
+          likes: 0,
           reaction: 0,
           createdAt: DateTime.now(),
           reactionEnabled: true,
           imageUrl:
-              'https://firebasestorage.googleapis.com/v0/b/appshell-demo.appspot.com/o/do_not_delete_2.png?alt=media&token=ee4a8771-531f-4d1d-8613-a2366771e775',
-          creator: const TimelinePosterUserModel(
-            userId: 'test_user',
-            imageUrl:
-                'https://firebasestorage.googleapis.com/v0/b/appshell-demo.appspot.com/o/do_not_delete_4.png?alt=media&token=775d4d10-6d2b-4aef-a51b-ba746b7b137f',
-            firstName: 'Elise',
-            lastName: 'Welling',
-          ),
+              'https://s3-eu-west-1.amazonaws.com/sortlist-core-api/6qpvvqjtmniirpkvp8eg83bicnc2',
         ),
       ];
-
-  @override
-  Future<bool> addCategory(TimelineCategory category) async {
-    categories.add(category);
-    notifyListeners();
-    return true;
-  }
-
-  @override
-  Future<List<TimelineCategory>> fetchCategories() async {
-    categories = [
-      const TimelineCategory(key: null, title: 'All'),
-      const TimelineCategory(
-        key: 'Category',
-        title: 'Category',
-      ),
-      const TimelineCategory(
-        key: 'Category with two lines',
-        title: 'Category with two lines',
-      ),
-    ];
-    notifyListeners();
-
-    return categories;
-  }
-
-  @override
-  Future<TimelinePost> likeReaction(
-    String userId,
-    TimelinePost post,
-    String reactionId,
-  ) async {
-    var updatedPost = post.copyWith(
-      reactions: post.reactions?.map(
-        (r) {
-          if (r.id == reactionId) {
-            return r.copyWith(
-              likedBy: (r.likedBy ?? [])..add(userId),
-            );
-          }
-          return r;
-        },
-      ).toList(),
-    );
-    posts = posts
-        .map(
-          (p) => p.id == post.id ? updatedPost : p,
-        )
-        .toList();
-
-    notifyListeners();
-    return updatedPost;
-  }
-
-  @override
-  Future<TimelinePost> unlikeReaction(
-    String userId,
-    TimelinePost post,
-    String reactionId,
-  ) async {
-    var updatedPost = post.copyWith(
-      reactions: post.reactions?.map(
-        (r) {
-          if (r.id == reactionId) {
-            return r.copyWith(
-              likedBy: r.likedBy?..remove(userId),
-            );
-          }
-          return r;
-        },
-      ).toList(),
-    );
-    posts = posts
-        .map(
-          (p) => p.id == post.id ? updatedPost : p,
-        )
-        .toList();
-
-    notifyListeners();
-    return updatedPost;
-  }
 }

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

@@ -1,67 +1,60 @@
 import 'dart:math';
 
 import 'package:flutter/material.dart';
-import 'package:flutter_timeline_interface/flutter_timeline_interface.dart';
 import 'package:flutter_timeline_view/flutter_timeline_view.dart';
 
-class CategorySelector extends StatefulWidget {
+class CategorySelector extends StatelessWidget {
   const CategorySelector({
     required this.filter,
     required this.options,
     required this.onTapCategory,
-    required this.isOnTop,
-    required this.categories,
     super.key,
   });
 
   final String? filter;
   final TimelineOptions options;
   final void Function(String? categoryKey) onTapCategory;
-  final bool isOnTop;
-  final List<TimelineCategory> categories;
 
   @override
-  State<CategorySelector> createState() => _CategorySelectorState();
-}
+  Widget build(BuildContext context) {
+    if (options.categoriesOptions.categoriesBuilder == null) {
+      return const SizedBox.shrink();
+    }
 
-class _CategorySelectorState extends State<CategorySelector> {
-  @override
-  Widget build(BuildContext context) => SingleChildScrollView(
-        scrollDirection: Axis.horizontal,
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 8),
-          child: Row(
-            children: [
-              SizedBox(
-                width: widget.options.categoriesOptions
-                        .categorySelectorHorizontalPadding ??
-                    max(widget.options.paddings.mainPadding.left - 20, 0),
-              ),
-              for (var category in widget.categories) ...[
-                widget.options.categoriesOptions.categoryButtonBuilder?.call(
-                      category,
-                      () => widget.onTapCategory(category.key),
-                      widget.filter == category.key,
-                      widget.isOnTop,
-                    ) ??
-                    Padding(
-                      padding: const EdgeInsets.symmetric(horizontal: 4),
-                      child: CategorySelectorButton(
-                        isOnTop: widget.isOnTop,
-                        category: category,
-                        selected: widget.filter == category.key,
-                        onTap: () => widget.onTapCategory(category.key),
-                        options: widget.options,
-                      ),
-                    ),
-              ],
-              SizedBox(
-                width: widget.options.categoriesOptions
-                        .categorySelectorHorizontalPadding ??
-                    max(widget.options.paddings.mainPadding.right - 4, 0),
-              ),
-            ],
+    var categories = options.categoriesOptions.categoriesBuilder!(context);
+
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: Row(
+        children: [
+          SizedBox(
+            width:
+                options.categoriesOptions.categorySelectorHorizontalPadding ??
+                    max(options.padding.horizontal - 4, 0),
           ),
-        ),
-      );
+          for (var category in categories) ...[
+            options.categoriesOptions.categoryButtonBuilder?.call(
+                  categoryKey: category.key,
+                  categoryName: category.title,
+                  onTap: () => onTapCategory(category.key),
+                  selected: filter == category.key,
+                ) ??
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 4),
+                  child: CategorySelectorButton(
+                    category: category,
+                    selected: filter == category.key,
+                    onTap: () => onTapCategory(category.key),
+                  ),
+                ),
+          ],
+          SizedBox(
+            width:
+                options.categoriesOptions.categorySelectorHorizontalPadding ??
+                    max(options.padding.horizontal - 4, 0),
+          ),
+        ],
+      ),
+    );
+  }
 }

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

@@ -1,143 +1,52 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_timeline_interface/flutter_timeline_interface.dart';
-import 'package:flutter_timeline_view/flutter_timeline_view.dart';
 
 class CategorySelectorButton extends StatelessWidget {
   const CategorySelectorButton({
     required this.category,
     required this.selected,
     required this.onTap,
-    required this.options,
-    required this.isOnTop,
     super.key,
   });
 
   final TimelineCategory category;
   final bool selected;
-  final VoidCallback onTap;
-  final TimelineOptions options;
-  final bool isOnTop;
+  final void Function() onTap;
 
   @override
   Widget build(BuildContext context) {
     var theme = Theme.of(context);
-    var size = MediaQuery.of(context).size;
 
-    return AnimatedContainer(
-      duration: const Duration(milliseconds: 100),
-      height: isOnTop ? 140 : 40,
-      child: TextButton(
-        onPressed: onTap,
-        style: ButtonStyle(
-          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-          padding: const WidgetStatePropertyAll(
-            EdgeInsets.symmetric(
-              vertical: 5,
-              horizontal: 12,
-            ),
+    return TextButton(
+      onPressed: onTap,
+      style: ButtonStyle(
+        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+        padding: const MaterialStatePropertyAll(
+          EdgeInsets.symmetric(
+            vertical: 5,
+            horizontal: 12,
           ),
-          fixedSize: WidgetStatePropertyAll(Size(140, isOnTop ? 140 : 20)),
-          backgroundColor: WidgetStatePropertyAll(
-            selected
-                ? theme.colorScheme.primary
-                : options.theme.categorySelectionButtonBackgroundColor ??
-                    Colors.transparent,
-          ),
-          shape: WidgetStatePropertyAll(
-            RoundedRectangleBorder(
-              borderRadius: const BorderRadius.all(
-                Radius.circular(8),
-              ),
-              side: BorderSide(
-                color: options.theme.categorySelectionButtonBorderColor ??
-                    theme.colorScheme.primary,
-                width: 2,
-              ),
+        ),
+        minimumSize: const MaterialStatePropertyAll(Size.zero),
+        backgroundColor: MaterialStatePropertyAll(
+          selected ? theme.colorScheme.primary : theme.colorScheme.surface,
+        ),
+        shape: const MaterialStatePropertyAll(
+          RoundedRectangleBorder(
+            borderRadius: BorderRadius.all(
+              Radius.circular(45),
             ),
           ),
         ),
-        child: isOnTop
-            ? SizedBox(
-                width: size.width,
-                child: Stack(
-                  children: [
-                    Column(
-                      mainAxisAlignment: MainAxisAlignment.end,
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        _CategoryButtonText(
-                          category: category,
-                          options: options,
-                          theme: theme,
-                          selected: selected,
-                        ),
-                      ],
-                    ),
-                    Center(child: category.icon),
-                  ],
-                ),
-              )
-            : Row(
-                children: [
-                  Flexible(
-                    child: Row(
-                      children: [
-                        if (category.icon != null) ...[
-                          category.icon!,
-                          SizedBox(
-                            width:
-                                options.paddings.categoryButtonTextPadding ?? 8,
-                          ),
-                        ],
-                        Expanded(
-                          child: _CategoryButtonText(
-                            category: category,
-                            options: options,
-                            theme: theme,
-                            selected: selected,
-                            overflow: TextOverflow.ellipsis,
-                          ),
-                        ),
-                      ],
-                    ),
-                  ),
-                ],
-              ),
+      ),
+      child: Text(
+        category.title,
+        style: theme.textTheme.labelMedium?.copyWith(
+          color: selected
+              ? theme.colorScheme.onPrimary
+              : theme.colorScheme.onSurface,
+        ),
       ),
     );
   }
 }
-
-class _CategoryButtonText extends StatelessWidget {
-  const _CategoryButtonText({
-    required this.category,
-    required this.options,
-    required this.theme,
-    required this.selected,
-    this.overflow,
-  });
-
-  final TimelineCategory category;
-  final TimelineOptions options;
-  final ThemeData theme;
-  final bool selected;
-  final TextOverflow? overflow;
-
-  @override
-  Widget build(BuildContext context) => Text(
-        category.title,
-        style: (options.theme.textStyles.categoryTitleStyle ??
-                (selected
-                    ? theme.textTheme.titleMedium
-                    : theme.textTheme.bodyMedium))
-            ?.copyWith(
-          color: selected
-              ? options.theme.categorySelectionButtonSelectedTextColor ??
-                  theme.colorScheme.onPrimary
-              : options.theme.categorySelectionButtonUnselectedTextColor ??
-                  theme.colorScheme.onSurface,
-        ),
-        textAlign: TextAlign.start,
-        overflow: overflow,
-      );
-}

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

@@ -1,35 +0,0 @@
-import 'package:flutter/material.dart';
-
-class DefaultFilledButton extends StatelessWidget {
-  const DefaultFilledButton({
-    required this.onPressed,
-    required this.buttonText,
-    super.key,
-  });
-
-  final Future<void> Function()? onPressed;
-  final String buttonText;
-
-  @override
-  Widget build(BuildContext context) {
-    var theme = Theme.of(context);
-    return FilledButton(
-      style: onPressed != null
-          ? ButtonStyle(
-              backgroundColor: WidgetStatePropertyAll(
-                theme.colorScheme.primary,
-              ),
-            )
-          : null,
-      onPressed: onPressed,
-      child: Padding(
-        padding: const EdgeInsets.all(8),
-        child: Text(
-          buttonText,
-          overflow: TextOverflow.ellipsis,
-          style: theme.textTheme.displayLarge,
-        ),
-      ),
-    );
-  }
-}

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

@@ -1,69 +0,0 @@
-import 'package:flutter/material.dart';
-
-class PostCreationTextfield extends StatelessWidget {
-  const PostCreationTextfield({
-    required this.controller,
-    required this.hintText,
-    required this.validator,
-    super.key,
-    this.textMaxLength,
-    this.decoration,
-    this.textCapitalization,
-    this.expands,
-    this.minLines,
-    this.maxLines,
-    this.fieldKey,
-  });
-
-  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;
-  final String? Function(String?)? validator;
-  final Key? fieldKey;
-  @override
-  Widget build(BuildContext context) {
-    var theme = Theme.of(context);
-    return TextFormField(
-      key: fieldKey,
-      validator: validator,
-      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,
-    );
-  }
-}

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

@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:flutter_timeline_view/src/config/timeline_options.dart';
 import 'package:flutter_timeline_view/src/config/timeline_translations.dart';
 
@@ -12,12 +11,14 @@ class ReactionBottom extends StatefulWidget {
     required this.onReactionSubmit,
     required this.messageInputBuilder,
     required this.translations,
+    this.onPressSelectImage,
     this.iconColor,
     super.key,
   });
 
   final Future<void> Function(String text) onReactionSubmit;
   final TextInputBuilder messageInputBuilder;
+  final VoidCallback? onPressSelectImage;
   final TimelineTranslations translations;
   final Color? iconColor;
 
@@ -30,29 +31,46 @@ class _ReactionBottomState extends State<ReactionBottom> {
 
   @override
   Widget build(BuildContext context) => Container(
-        child: widget.messageInputBuilder(
-          _textEditingController,
-          Padding(
-            padding: const EdgeInsets.symmetric(
-              horizontal: 8,
-            ),
-            child: IconButton(
-              onPressed: () async {
-                var value = _textEditingController.text;
-                if (value.isNotEmpty) {
-                  await widget.onReactionSubmit(value);
-                  _textEditingController.clear();
-                }
-              },
-              icon: SvgPicture.asset(
-                'assets/send.svg',
-                package: 'flutter_timeline_view',
-                // ignore: deprecated_member_use
-                color: widget.iconColor,
+        color: Theme.of(context).colorScheme.background,
+        child: Container(
+          margin: const EdgeInsets.symmetric(
+            horizontal: 12,
+            vertical: 8,
+          ),
+          height: 45,
+          child: widget.messageInputBuilder(
+            _textEditingController,
+            Padding(
+              padding: const EdgeInsets.only(right: 15.0),
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  IconButton(
+                    onPressed: widget.onPressSelectImage,
+                    icon: Icon(
+                      Icons.image,
+                      color: widget.iconColor,
+                    ),
+                  ),
+                  IconButton(
+                    onPressed: () async {
+                      var value = _textEditingController.text;
+
+                      if (value.isNotEmpty) {
+                        await widget.onReactionSubmit(value);
+                        _textEditingController.clear();
+                      }
+                    },
+                    icon: Icon(
+                      Icons.send,
+                      color: widget.iconColor,
+                    ),
+                  ),
+                ],
               ),
             ),
+            widget.translations.writeComment,
           ),
-          widget.translations.writeComment,
         ),
       );
 }

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

@@ -99,17 +99,11 @@ class _TappableImageState extends State<TappableImage>
           offset: Offset(0, animation.value * -32),
           child: Transform.scale(
             scale: 1 + animation.value * 0.1,
-            child: widget.post.imageUrl != null
-                ? CachedNetworkImage(
-                    imageUrl: widget.post.imageUrl ?? '',
-                    width: double.infinity,
-                    fit: BoxFit.fitHeight,
-                  )
-                : Image.memory(
-                    width: double.infinity,
-                    widget.post.image!,
-                    fit: BoxFit.fitHeight,
-                  ),
+            child: CachedNetworkImage(
+              imageUrl: widget.post.imageUrl ?? '',
+              width: double.infinity,
+              fit: BoxFit.fitHeight,
+            ),
           ),
         ),
       );
@@ -141,7 +135,6 @@ class _HeartAnimationState extends State<HeartAnimation> {
     unawaited(
       Future.delayed(const Duration(milliseconds: 100)).then((value) async {
         active = widget.liked;
-        // ignore: use_build_context_synchronously
         var navigator = Navigator.of(context);
         await Future.delayed(widget.duration);
         navigator.pop();

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

@@ -4,10 +4,8 @@
 
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:flutter_timeline_interface/flutter_timeline_interface.dart';
 import 'package:flutter_timeline_view/src/config/timeline_options.dart';
-import 'package:flutter_timeline_view/src/widgets/default_filled_button.dart';
 import 'package:flutter_timeline_view/src/widgets/tappable_image.dart';
 
 class TimelinePostWidget extends StatefulWidget {
@@ -20,18 +18,12 @@ class TimelinePostWidget extends StatefulWidget {
     required this.onTapUnlike,
     required this.onPostDelete,
     required this.service,
-    required this.allowAllDeletion,
     this.onUserTap,
     super.key,
   });
 
   /// The user id of the current user
   final String userId;
-
-  /// Allow all posts to be deleted instead of
-  ///  only the posts of the current user
-  final bool allowAllDeletion;
-
   final TimelineOptions options;
 
   final TimelinePost post;
@@ -54,391 +46,282 @@ class _TimelinePostWidgetState extends State<TimelinePostWidget> {
   @override
   Widget build(BuildContext context) {
     var theme = Theme.of(context);
-    var isLikedByUser = widget.post.likedBy?.contains(widget.userId) ?? false;
-
-    return SizedBox(
-      height: widget.post.imageUrl != null || widget.post.image != null
-          ? widget.options.postWidgetHeight
-          : null,
-      width: double.infinity,
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Row(
-            children: [
-              if (widget.post.creator != null) ...[
-                InkWell(
-                  onTap: widget.onUserTap != null
-                      ? () =>
-                          widget.onUserTap?.call(widget.post.creator!.userId)
-                      : null,
-                  child: Row(
-                    children: [
-                      if (widget.post.creator!.imageUrl != null) ...[
-                        widget.options.userAvatarBuilder?.call(
-                              widget.post.creator!,
-                              28,
-                            ) ??
-                            CircleAvatar(
-                              radius: 14,
-                              backgroundImage: CachedNetworkImageProvider(
-                                widget.post.creator!.imageUrl!,
+    return InkWell(
+      onTap: widget.onTap,
+      child: SizedBox(
+        height: widget.post.imageUrl != null
+            ? widget.options.postWidgetHeight
+            : null,
+        width: double.infinity,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                if (widget.post.creator != null)
+                  InkWell(
+                    onTap: widget.onUserTap != null
+                        ? () =>
+                            widget.onUserTap?.call(widget.post.creator!.userId)
+                        : null,
+                    child: Row(
+                      children: [
+                        if (widget.post.creator!.imageUrl != null) ...[
+                          widget.options.userAvatarBuilder?.call(
+                                widget.post.creator!,
+                                40,
+                              ) ??
+                              CircleAvatar(
+                                radius: 20,
+                                backgroundImage: CachedNetworkImageProvider(
+                                  widget.post.creator!.imageUrl!,
+                                ),
                               ),
-                            ),
-                      ] else ...[
-                        widget.options.anonymousAvatarBuilder?.call(
-                              widget.post.creator!,
-                              28,
-                            ) ??
-                            const CircleAvatar(
-                              radius: 14,
-                              child: Icon(
-                                Icons.person,
-                              ),
-                            ),
-                      ],
-                      const SizedBox(width: 10),
-                      Text(
-                        widget.options.nameBuilder?.call(widget.post.creator) ??
-                            widget.post.creator?.fullName ??
-                            widget.options.translations.anonymousUser,
-                        style: widget.options.theme.textStyles
-                                .postCreatorTitleStyle ??
-                            theme.textTheme.titleSmall!.copyWith(
-                              color: Colors.black,
-                            ),
-                      ),
-                    ],
-                  ),
-                ),
-              ],
-              const Spacer(),
-              if (widget.allowAllDeletion ||
-                  widget.post.creator?.userId == widget.userId) ...[
-                PopupMenuButton(
-                  onSelected: (value) async {
-                    if (value == 'delete') {
-                      await showPostDeletionConfirmationDialog(
-                        widget.options,
-                        context,
-                        widget.onPostDelete,
-                      );
-                    }
-                  },
-                  itemBuilder: (BuildContext context) =>
-                      <PopupMenuEntry<String>>[
-                    PopupMenuItem<String>(
-                      value: 'delete',
-                      child: Row(
-                        children: [
-                          Text(
-                            widget.options.translations.deletePost,
-                            style: widget
-                                    .options.theme.textStyles.deletePostStyle ??
-                                theme.textTheme.bodyMedium,
-                          ),
-                          const SizedBox(width: 8),
-                          widget.options.theme.deleteIcon ??
-                              Icon(
-                                Icons.delete,
-                                color: widget.options.theme.iconColor,
+                        ] else ...[
+                          widget.options.anonymousAvatarBuilder?.call(
+                                widget.post.creator!,
+                                40,
+                              ) ??
+                              const CircleAvatar(
+                                radius: 20,
+                                child: Icon(
+                                  Icons.person,
+                                ),
                               ),
                         ],
+                        const SizedBox(width: 10),
+                        Text(
+                          widget.options.nameBuilder
+                                  ?.call(widget.post.creator) ??
+                              widget.post.creator?.fullName ??
+                              widget.options.translations.anonymousUser,
+                          style: widget.options.theme.textStyles
+                                  .postCreatorTitleStyle ??
+                              theme.textTheme.titleMedium,
+                        ),
+                      ],
+                    ),
+                  ),
+                const Spacer(),
+                if (widget.options.allowAllDeletion ||
+                    widget.post.creator?.userId == widget.userId)
+                  PopupMenuButton(
+                    onSelected: (value) {
+                      if (value == 'delete') {
+                        widget.onPostDelete();
+                      }
+                    },
+                    itemBuilder: (BuildContext context) =>
+                        <PopupMenuEntry<String>>[
+                      PopupMenuItem<String>(
+                        value: 'delete',
+                        child: Row(
+                          children: [
+                            Text(
+                              widget.options.translations.deletePost,
+                              style: widget.options.theme.textStyles
+                                      .deletePostStyle ??
+                                  theme.textTheme.bodyMedium,
+                            ),
+                            const SizedBox(width: 8),
+                            widget.options.theme.deleteIcon ??
+                                Icon(
+                                  Icons.delete,
+                                  color: widget.options.theme.iconColor,
+                                ),
+                          ],
+                        ),
+                      ),
+                    ],
+                    child: widget.options.theme.moreIcon ??
+                        Icon(
+                          Icons.more_horiz_rounded,
+                          color: widget.options.theme.iconColor,
+                        ),
+                  ),
+              ],
+            ),
+            // image of the post
+            if (widget.post.imageUrl != null) ...[
+              const SizedBox(height: 8),
+              Flexible(
+                flex: widget.options.postWidgetHeight != null ? 1 : 0,
+                child: ClipRRect(
+                  borderRadius: const BorderRadius.all(Radius.circular(8)),
+                  child: widget.options.doubleTapTolike
+                      ? TappableImage(
+                          likeAndDislikeIcon:
+                              widget.options.likeAndDislikeIconsForDoubleTap,
+                          post: widget.post,
+                          userId: widget.userId,
+                          onLike: ({required bool liked}) async {
+                            var userId = widget.userId;
+
+                            late TimelinePost result;
+
+                            if (!liked) {
+                              result =
+                                  await widget.service.postService.likePost(
+                                userId,
+                                widget.post,
+                              );
+                            } else {
+                              result =
+                                  await widget.service.postService.unlikePost(
+                                userId,
+                                widget.post,
+                              );
+                            }
+
+                            return result.likedBy?.contains(userId) ?? false;
+                          },
+                        )
+                      : CachedNetworkImage(
+                          width: double.infinity,
+                          imageUrl: widget.post.imageUrl!,
+                          fit: BoxFit.fitWidth,
+                        ),
+                ),
+              ),
+            ],
+            const SizedBox(
+              height: 8,
+            ),
+            // post information
+            if (widget.options.iconsWithValues)
+              Row(
+                children: [
+                  TextButton.icon(
+                    onPressed: () async {
+                      var userId = widget.userId;
+
+                      var liked =
+                          widget.post.likedBy?.contains(userId) ?? false;
+
+                      if (!liked) {
+                        await widget.service.postService.likePost(
+                          userId,
+                          widget.post,
+                        );
+                      } else {
+                        await widget.service.postService.unlikePost(
+                          userId,
+                          widget.post,
+                        );
+                      }
+                    },
+                    icon: widget.options.theme.likeIcon ??
+                        Icon(
+                          widget.post.likedBy?.contains(widget.userId) ?? false
+                              ? Icons.favorite
+                              : Icons.favorite_outline_outlined,
+                        ),
+                    label: Text('${widget.post.likes}'),
+                  ),
+                  if (widget.post.reactionEnabled)
+                    TextButton.icon(
+                      onPressed: widget.onTap,
+                      icon: widget.options.theme.commentIcon ??
+                          const Icon(
+                            Icons.chat_bubble_outline_outlined,
+                          ),
+                      label: Text('${widget.post.reaction}'),
+                    ),
+                ],
+              )
+            else
+              Row(
+                children: [
+                  if (widget.post.likedBy?.contains(widget.userId) ??
+                      false) ...[
+                    InkWell(
+                      onTap: widget.onTapUnlike,
+                      child: Container(
+                        color: Colors.transparent,
+                        child: widget.options.theme.likedIcon ??
+                            Icon(
+                              Icons.thumb_up_rounded,
+                              color: widget.options.theme.iconColor,
+                              size: widget.options.iconSize,
+                            ),
+                      ),
+                    ),
+                  ] else ...[
+                    InkWell(
+                      onTap: widget.onTapLike,
+                      child: Container(
+                        color: Colors.transparent,
+                        child: widget.options.theme.likedIcon ??
+                            Icon(
+                              Icons.thumb_up_rounded,
+                              color: widget.options.theme.iconColor,
+                              size: widget.options.iconSize,
+                            ),
                       ),
                     ),
                   ],
-                  child: widget.options.theme.moreIcon ??
-                      Icon(
-                        Icons.more_horiz_rounded,
-                        color: widget.options.theme.iconColor,
-                      ),
-                ),
-              ],
-            ],
-          ),
-          // image of the post
-          if (widget.post.imageUrl != null || widget.post.image != null) ...[
-            const SizedBox(height: 8),
-            Flexible(
-              flex: widget.options.postWidgetHeight != null ? 1 : 0,
-              child: ClipRRect(
-                borderRadius: const BorderRadius.all(Radius.circular(8)),
-                child: widget.options.doubleTapTolike
-                    ? TappableImage(
-                        likeAndDislikeIcon:
-                            widget.options.likeAndDislikeIconsForDoubleTap,
-                        post: widget.post,
-                        userId: widget.userId,
-                        onLike: ({required bool liked}) async {
-                          var userId = widget.userId;
-
-                          late TimelinePost result;
-
-                          if (!liked) {
-                            result = await widget.service.postService.likePost(
-                              userId,
-                              widget.post,
-                            );
-                          } else {
-                            result =
-                                await widget.service.postService.unlikePost(
-                              userId,
-                              widget.post,
-                            );
-                          }
-
-                          return result.likedBy?.contains(userId) ?? false;
-                        },
-                      )
-                    : widget.post.imageUrl != null
-                        ? CachedNetworkImage(
-                            width: double.infinity,
-                            imageUrl: widget.post.imageUrl!,
-                            fit: BoxFit.fitWidth,
-                          )
-                        : Image.memory(
-                            width: double.infinity,
-                            widget.post.image!,
-                            fit: BoxFit.fitWidth,
+                  const SizedBox(width: 8),
+                  if (widget.post.reactionEnabled) ...[
+                    Container(
+                      color: Colors.transparent,
+                      child: widget.options.theme.commentIcon ??
+                          Icon(
+                            Icons.chat_bubble_outline_rounded,
+                            color: widget.options.theme.iconColor,
+                            size: widget.options.iconSize,
                           ),
-              ),
-            ),
-          ],
-          const SizedBox(
-            height: 8,
-          ),
-          // post information
-          if (widget.options.iconsWithValues) ...[
-            Row(
-              children: [
-                IconButton(
-                  padding: EdgeInsets.zero,
-                  constraints: const BoxConstraints(),
-                  onPressed: () async {
-                    var userId = widget.userId;
-
-                    if (!isLikedByUser) {
-                      await widget.service.postService.likePost(
-                        userId,
-                        widget.post,
-                      );
-                    } else {
-                      await widget.service.postService.unlikePost(
-                        userId,
-                        widget.post,
-                      );
-                    }
-                  },
-                  icon: widget.options.theme.likeIcon ??
-                      Icon(
-                        isLikedByUser
-                            ? Icons.favorite_rounded
-                            : Icons.favorite_outline_outlined,
-                        color: widget.options.theme.iconColor,
-                        size: widget.options.iconSize,
-                      ),
-                ),
-                const SizedBox(
-                  width: 4,
-                ),
-                Text('${widget.post.likes}'),
-                if (widget.post.reactionEnabled) ...[
-                  const SizedBox(
-                    width: 8,
-                  ),
-                  IconButton(
-                    padding: EdgeInsets.zero,
-                    constraints: const BoxConstraints(),
-                    onPressed: widget.onTap,
-                    icon: widget.options.theme.commentIcon ??
-                        SvgPicture.asset(
-                          'assets/Comment.svg',
-                          package: 'flutter_timeline_view',
-                          // ignore: deprecated_member_use
-                          color: widget.options.theme.iconColor,
-                          width: widget.options.iconSize,
-                          height: widget.options.iconSize,
-                        ),
-                  ),
-                  const SizedBox(
-                    width: 4,
-                  ),
-                  Text('${widget.post.reaction}'),
-                ],
-              ],
-            ),
-          ] else ...[
-            Row(
-              children: [
-                IconButton(
-                  padding: EdgeInsets.zero,
-                  constraints: const BoxConstraints(),
-                  onPressed:
-                      isLikedByUser ? widget.onTapUnlike : widget.onTapLike,
-                  icon: (isLikedByUser
-                          ? widget.options.theme.likedIcon
-                          : widget.options.theme.likeIcon) ??
-                      Icon(
-                        isLikedByUser
-                            ? Icons.favorite_rounded
-                            : Icons.favorite_outline,
-                        color: widget.options.theme.iconColor,
-                        size: widget.options.iconSize,
-                      ),
-                ),
-                const SizedBox(width: 8),
-                if (widget.post.reactionEnabled) ...[
-                  IconButton(
-                    padding: EdgeInsets.zero,
-                    constraints: const BoxConstraints(),
-                    onPressed: widget.onTap,
-                    icon: widget.options.theme.commentIcon ??
-                        SvgPicture.asset(
-                          'assets/Comment.svg',
-                          package: 'flutter_timeline_view',
-                          // ignore: deprecated_member_use
-                          color: widget.options.theme.iconColor,
-                          width: widget.options.iconSize,
-                          height: widget.options.iconSize,
-                        ),
-                  ),
-                ],
-              ],
-            ),
-          ],
-
-          const SizedBox(
-            height: 8,
-          ),
-
-          if (widget.options.itemInfoBuilder != null) ...[
-            widget.options.itemInfoBuilder!(
-              post: widget.post,
-            ),
-          ] else ...[
-            _PostLikeCountText(
-              post: widget.post,
-              options: widget.options,
-            ),
-            Text.rich(
-              TextSpan(
-                text: widget.options.nameBuilder?.call(widget.post.creator) ??
-                    widget.post.creator?.fullName ??
-                    widget.options.translations.anonymousUser,
-                style: widget.options.theme.textStyles.listCreatorNameStyle ??
-                    theme.textTheme.titleSmall!.copyWith(
-                      color: Colors.black,
                     ),
-                children: [
-                  TextSpan(
-                    text: widget.post.title,
-                    style: widget.options.theme.textStyles.listPostTitleStyle ??
-                        theme.textTheme.bodySmall,
-                  ),
+                  ],
                 ],
               ),
+
+            const SizedBox(
+              height: 8,
             ),
-            const SizedBox(height: 4),
-            InkWell(
-              onTap: widget.onTap,
-              child: Text(
+
+            if (widget.options.itemInfoBuilder != null) ...[
+              widget.options.itemInfoBuilder!(
+                post: widget.post,
+              ),
+            ] else ...[
+              Text(
+                '${widget.post.likes} '
+                '${widget.options.translations.likesTitle}',
+                style: widget
+                        .options.theme.textStyles.listPostLikeTitleAndAmount ??
+                    theme.textTheme.titleSmall,
+              ),
+              const SizedBox(height: 4),
+              Text.rich(
+                TextSpan(
+                  text: widget.options.nameBuilder?.call(widget.post.creator) ??
+                      widget.post.creator?.fullName ??
+                      widget.options.translations.anonymousUser,
+                  style: widget.options.theme.textStyles.listCreatorNameStyle ??
+                      theme.textTheme.titleSmall,
+                  children: [
+                    const TextSpan(text: ' '),
+                    TextSpan(
+                      text: widget.post.title,
+                      style:
+                          widget.options.theme.textStyles.listPostTitleStyle ??
+                              theme.textTheme.bodyMedium,
+                    ),
+                  ],
+                ),
+              ),
+              const SizedBox(height: 4),
+              Text(
                 widget.options.translations.viewPost,
                 style: widget.options.theme.textStyles.viewPostStyle ??
-                    theme.textTheme.titleSmall!.copyWith(
-                      color: const Color(0xFF8D8D8D),
-                    ),
+                    theme.textTheme.bodySmall,
               ),
-            ),
+            ],
+            if (widget.options.dividerBuilder != null)
+              widget.options.dividerBuilder!(),
           ],
-          if (widget.options.dividerBuilder != null)
-            widget.options.dividerBuilder!(),
-        ],
+        ),
       ),
     );
   }
 }
-
-class _PostLikeCountText extends StatelessWidget {
-  const _PostLikeCountText({
-    required this.post,
-    required this.options,
-  });
-
-  final TimelineOptions options;
-  final TimelinePost post;
-  @override
-  Widget build(BuildContext context) {
-    var theme = Theme.of(context);
-    var likeTranslation = post.likes > 1
-        ? options.translations.multipleLikesTitle
-        : options.translations.oneLikeTitle;
-
-    return Text(
-      '${post.likes} '
-      '$likeTranslation',
-      style: options.theme.textStyles.listPostLikeTitleAndAmount ??
-          theme.textTheme.titleSmall!.copyWith(
-            color: Colors.black,
-          ),
-    );
-  }
-}
-
-Future<void> showPostDeletionConfirmationDialog(
-  TimelineOptions options,
-  BuildContext context,
-  Function() onPostDelete,
-) async {
-  var theme = Theme.of(context);
-  var result = await showDialog(
-    context: context,
-    builder: (BuildContext context) =>
-        options.deletionDialogBuilder?.call(context) ??
-        AlertDialog(
-          insetPadding: const EdgeInsets.symmetric(
-            horizontal: 16,
-          ),
-          contentPadding:
-              const EdgeInsets.symmetric(horizontal: 64, vertical: 24),
-          titlePadding: const EdgeInsets.only(left: 44, right: 44, top: 32),
-          title: Text(
-            options.translations.deleteConfirmationMessage,
-            style: theme.textTheme.titleMedium,
-            textAlign: TextAlign.center,
-          ),
-          content: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              Row(
-                children: [
-                  Expanded(
-                    child: DefaultFilledButton(
-                      onPressed: () async {
-                        Navigator.of(context).pop(true);
-                      },
-                      buttonText: options.translations.deleteButton,
-                    ),
-                  ),
-                ],
-              ),
-              TextButton(
-                onPressed: () {
-                  Navigator.of(context).pop(false);
-                },
-                child: Text(
-                  options.translations.deleteCancelButton,
-                  style: theme.textTheme.bodyMedium!.copyWith(
-                    decoration: TextDecoration.underline,
-                    color: theme.textTheme.bodyMedium?.color!.withOpacity(0.5),
-                  ),
-                ),
-              ),
-            ],
-          ),
-        ),
-  );
-
-  if (result == true) {
-    onPostDelete();
-  }
-}

packages/flutter_timeline_view/pubspec.yaml

@@ -4,35 +4,38 @@
 
 name: flutter_timeline_view
 description: Visual elements of the Flutter Timeline Component
-version: 5.1.1
-homepage: https://github.com/Iconica-Development/flutter_timeline
-publish_to: https://forgejo.internal.iconica.nl/api/packages/internal/pub
+version: 2.1.0
+
+publish_to: none
 
 environment:
-  sdk: ">=3.4.3 <4.0.0"
-  flutter: '>=3.22.2'
+  sdk: '>=3.1.3 <4.0.0'
 
 dependencies:
   flutter:
     sdk: flutter
-  intl: ^0.19.0
+  intl: any
   cached_network_image: ^3.2.2
   dotted_border: ^2.1.0
-  collection: ^1.18.0
-  flutter_svg: ^2.0.10+1
+  flutter_html: ^3.0.0-beta.2
+  
   flutter_timeline_interface:
-    hosted: https://forgejo.internal.iconica.nl/api/packages/internal/pub
-    version: ^5.1.1
+    git: 
+       url: https://github.com/Iconica-Development/flutter_timeline
+       path: packages/flutter_timeline_interface
+       ref: 2.1.0
   flutter_image_picker:
-    hosted: https://forgejo.internal.iconica.nl/api/packages/internal/pub
-    version: ^4.0.0
+    git:
+      url: https://github.com/Iconica-Development/flutter_image_picker
+      ref: 1.0.4
+  collection: any
 
 dev_dependencies:
+  flutter_lints: ^2.0.0
   flutter_iconica_analysis:
     git:
       url: https://github.com/Iconica-Development/flutter_iconica_analysis
       ref: 6.0.0
 
 flutter:
-  assets:
-    - assets/
+

pubspec.yaml

@@ -5,6 +5,6 @@
 name: flutter_timeline_workspace
 
 environment:
-  sdk: '>=3.4.3 <4.0.0'
+  sdk: '>=2.18.0 <3.0.0'
 dev_dependencies:
   melos: ^3.0.1