feat: implement figma designs

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

@@ -25,9 +25,14 @@ class GoRouterApp extends StatelessWidget {
       routerConfig: _router,
       title: 'Flutter Timeline',
       theme: ThemeData(
-        colorScheme:
-            ColorScheme.fromSeed(seedColor: Colors.deepPurple).copyWith(
-          background: const Color(0xFFB8E2E8),
+        textTheme: const TextTheme(
+            titleLarge: TextStyle(
+                color: Color(0xffb71c6d), fontFamily: 'Playfair Display')),
+        colorScheme: ColorScheme.fromSeed(
+          seedColor: const Color(0xFFB8E2E8),
+          primary: const Color(0xffb71c6d),
+        ).copyWith(
+          background: const Color(0XFFFAF9F6),
         ),
         useMaterial3: true,
       ),

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

@@ -34,7 +34,13 @@ class _PostScreenState extends State<PostScreen> {
 
 class TestUserService implements TimelineUserService {
   final Map<String, TimelinePosterUserModel> _users = {
-    'test_user': const TimelinePosterUserModel(userId: 'test_user')
+    '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',
+    )
   };
 
   @override

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

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

packages/flutter_timeline/example/test/widget_test.dart

@@ -0,0 +1,29 @@
+// 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/src/flutter_timeline_gorouter_userstory.dart

@@ -43,10 +43,16 @@ List<GoRoute> getTimelineStoryRoutes({
         );
 
         var button = FloatingActionButton(
+          backgroundColor: Theme.of(context).primaryColor,
           onPressed: () async => context.go(
             TimelineUserStoryRoutes.timelinePostCreation,
           ),
-          child: const Icon(Icons.add),
+          shape: const CircleBorder(),
+          child: const Icon(
+            Icons.add,
+            color: Colors.white,
+            size: 30,
+          ),
         );
 
         return buildScreenWithoutTransition(
@@ -55,7 +61,13 @@ List<GoRoute> getTimelineStoryRoutes({
           child: config.homeOpenPageBuilder
                   ?.call(context, timelineScreen, button) ??
               Scaffold(
-                appBar: AppBar(),
+                appBar: AppBar(
+                  backgroundColor: Colors.black,
+                  title: Text(
+                    'Iconinstagram',
+                    style: Theme.of(context).textTheme.titleLarge,
+                  ),
+                ),
                 body: timelineScreen,
                 floatingActionButton: button,
               ),
@@ -66,18 +78,19 @@ List<GoRoute> getTimelineStoryRoutes({
       path: TimelineUserStoryRoutes.timelineView,
       pageBuilder: (context, state) {
         var post =
-            config.service.postService.getPost(state.pathParameters['post']!)!;
+            config.service.postService.getPost(state.pathParameters['post']!);
 
         var timelinePostWidget = TimelinePostScreen(
           userId: config.userId,
           options: config.optionsBuilder(context),
           service: config.service,
-          post: post,
+          post: post!,
           onPostDelete: () => config.onPostDelete?.call(context, post),
           onUserTap: (user) => config.onUserTap?.call(context, user),
         );
 
         var backButton = IconButton(
+          color: Colors.white,
           icon: const Icon(Icons.arrow_back_ios),
           onPressed: () => context.go(TimelineUserStoryRoutes.timelineHome),
         );
@@ -90,6 +103,11 @@ List<GoRoute> getTimelineStoryRoutes({
               Scaffold(
                 appBar: AppBar(
                   leading: backButton,
+                  backgroundColor: Colors.black,
+                  title: Text(
+                    'Category',
+                    style: Theme.of(context).textTheme.titleLarge,
+                  ),
                 ),
                 body: timelinePostWidget,
               ),
@@ -133,8 +151,10 @@ List<GoRoute> getTimelineStoryRoutes({
                   ?.call(context, timelinePostCreationWidget, backButton) ??
               Scaffold(
                 appBar: AppBar(
+                  backgroundColor: Colors.black,
                   title: Text(
                     config.optionsBuilder(context).translations.postCreation,
+                    style: Theme.of(context).textTheme.titleLarge,
                   ),
                   leading: backButton,
                 ),

packages/flutter_timeline/lib/src/flutter_timeline_navigator_userstory.dart

@@ -134,6 +134,7 @@ Widget _postCreationScreenRoute({
   return Scaffold(
     appBar: AppBar(
       title: Text(
+        style: Theme.of(context).textTheme.titleLarge,
         config.optionsBuilder(context).translations.postCreation,
       ),
     ),

packages/flutter_timeline/pubspec.yaml

@@ -8,24 +8,24 @@ version: 2.3.0
 publish_to: none
 
 environment:
-  sdk: '>=3.1.3 <4.0.0'
+  sdk: ">=3.1.3 <4.0.0"
 
 dependencies:
   flutter:
     sdk: flutter
   go_router: any
-  
+
   flutter_timeline_view:
     git: 
        url: https://github.com/Iconica-Development/flutter_timeline
        path: packages/flutter_timeline_view
        ref: 2.3.0
 
   flutter_timeline_interface:
-    git: 
-       url: https://github.com/Iconica-Development/flutter_timeline
-       path: packages/flutter_timeline_interface
-       ref: 2.3.0
+    git:
+      url: https://github.com/Iconica-Development/flutter_timeline
+      path: packages/flutter_timeline_interface
+      ref: 2.3.0
 
 dev_dependencies:
   flutter_lints: ^2.0.0
@@ -35,4 +35,3 @@ dev_dependencies:
       ref: 6.0.0
 
 flutter:
-

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

@@ -40,7 +40,8 @@ class TimelineOptions {
     this.padding = const EdgeInsets.symmetric(vertical: 12.0),
     this.iconSize = 26,
     this.postWidgetHeight,
-    this.postPadding = const EdgeInsets.all(12.0),
+    this.postPadding =
+        const EdgeInsets.symmetric(vertical: 12.0, horizontal: 12.0),
     this.filterOptions = const FilterOptions(),
     this.categoriesOptions = const CategoriesOptions(),
     this.requireImageForPost = false,

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

@@ -20,6 +20,7 @@ class TimelineTextStyles {
     this.postTitleStyle,
     this.postLikeTitleAndAmount,
     this.postCreatedAtStyle,
+    this.categoryTitleStyle,
   });
 
   /// The TextStyle for the text indicating that you can view a post
@@ -70,4 +71,6 @@ 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_translations.dart

@@ -11,12 +11,15 @@ class TimelineTranslations {
     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,
@@ -32,6 +35,8 @@ class TimelineTranslations {
     required this.postOverview,
     required this.postIn,
     required this.postCreation,
+    required this.yes,
+    required this.no,
   });
 
   const TimelineTranslations.empty()
@@ -46,12 +51,13 @@ class TimelineTranslations {
         allowComments = 'Are people allowed to comment?',
         allowCommentsDescription =
             'Indicate whether people are allowed to respond',
+        commentsTitleOnPost = 'Comments',
         checkPost = 'Check post overview',
         deletePost = 'Delete post',
         deleteReaction = 'Delete Reaction',
         viewPost = 'View post',
         likesTitle = 'Likes',
-        commentsTitle = 'Comments',
+        commentsTitle = 'Are people allowed to comment?',
         firstComment = 'Be the first to comment',
         writeComment = 'Write your comment here...',
         postAt = 'at',
@@ -60,7 +66,11 @@ class TimelineTranslations {
         searchHint = 'Search...',
         postOverview = 'Post Overview',
         postIn = 'Post in',
-        postCreation = 'Create Post';
+        postCreation = 'Create Post',
+        titleHintText = 'Title...',
+        contentHintText = 'Context...',
+        yes = 'Yes',
+        no = 'No';
 
   final String noPosts;
   final String noPostsWithFilter;
@@ -76,11 +86,15 @@ class TimelineTranslations {
   final String checkPost;
   final String postAt;
 
+  final String titleHintText;
+  final String contentHintText;
+
   final String deletePost;
   final String deleteReaction;
   final String viewPost;
   final String likesTitle;
   final String commentsTitle;
+  final String commentsTitleOnPost;
   final String writeComment;
   final String firstComment;
   final String postLoadingError;
@@ -93,6 +107,9 @@ class TimelineTranslations {
   final String postIn;
   final String postCreation;
 
+  final String yes;
+  final String no;
+
   TimelineTranslations copyWith({
     String? noPosts,
     String? noPostsWithFilter,
@@ -104,6 +121,7 @@ class TimelineTranslations {
     String? uploadImageDescription,
     String? allowComments,
     String? allowCommentsDescription,
+    String? commentsTitleOnPost,
     String? checkPost,
     String? postAt,
     String? deletePost,
@@ -119,6 +137,10 @@ class TimelineTranslations {
     String? postOverview,
     String? postIn,
     String? postCreation,
+    String? titleHintText,
+    String? contentHintText,
+    String? yes,
+    String? no,
   }) =>
       TimelineTranslations(
         noPosts: noPosts ?? this.noPosts,
@@ -133,6 +155,7 @@ 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,
@@ -149,5 +172,9 @@ class TimelineTranslations {
         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,
       );
 }