feat: crowdaction description markdown support

lib/presentation/crowdaction/crowdaction_details/crowdaction_details_screen.dart

@@ -1,7 +1,6 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:shimmer/shimmer.dart';
 
 import '../../../../domain/crowdaction/crowdaction.dart';
 import '../../../../infrastructure/core/injection.dart';
@@ -11,11 +10,11 @@ import '../../../application/participation/participation_bloc.dart';
 import '../../../application/user/profile_tab/profile_tab_bloc.dart';
 import '../../routes/app_routes.gr.dart';
 import '../../shared_widgets/commitments/commitment_card_list.dart';
-import '../../shared_widgets/expandable_text.dart';
 import '../../shared_widgets/pill_button.dart';
 import '../../themes/constants.dart';
 import 'widgets/confirm_participation.dart';
 import 'widgets/crowdaction_chips.dart';
+import 'widgets/crowdaction_description.dart';
 import 'widgets/crowdaction_details_banner.dart';
 import 'widgets/crowdaction_title.dart';
 import 'widgets/participants.dart';
@@ -37,18 +36,17 @@ class CrowdActionDetailsPage extends StatefulWidget {
 
 class CrowdActionDetailsPageState extends State<CrowdActionDetailsPage> {
   final List<Commitment> selectedCommitments = [];
-  CrowdAction? crowdAction;
   late final ParticipationBloc participationBloc;
-  late Function(BuildContext) participate;
-
   late final String id;
+  late Function(BuildContext) participate;
+  CrowdAction? crowdAction;
 
   @override
   void initState() {
     super.initState();
     participationBloc = getIt<ParticipationBloc>();
-    participate = _signUpModal;
     id = widget.crowdActionId ?? widget.crowdAction!.id;
+    participate = _signUpModal;
     crowdAction = widget.crowdAction;
   }
 
@@ -184,7 +182,7 @@ class CrowdActionDetailsPageState extends State<CrowdActionDetailsPage> {
                                   ),
                                   const SizedBox(height: 20),
                                   CrowdActionDescription(
-                                    crowdAction: crowdAction,
+                                    description: crowdAction?.description,
                                   ),
                                 ],
                               ),
@@ -354,40 +352,3 @@ class CrowdActionDetailsPageState extends State<CrowdActionDetailsPage> {
     context.router.push(const AuthRoute());
   }
 }
-
-class CrowdActionDescription extends StatelessWidget {
-  const CrowdActionDescription({
-    super.key,
-    required this.crowdAction,
-  });
-
-  final CrowdAction? crowdAction;
-
-  @override
-  Widget build(BuildContext context) {
-    if (crowdAction == null) {
-      return Shimmer.fromColors(
-        baseColor: kPrimaryColor100,
-        highlightColor: kPrimaryColor200,
-        child: Container(
-          height: 150,
-          width: double.infinity,
-          decoration: BoxDecoration(
-            color: kPrimaryColor100,
-            borderRadius: BorderRadius.circular(10),
-          ),
-        ),
-      );
-    }
-
-    return ExpandableText(
-      crowdAction!.description,
-      trimLines: 5,
-      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-            fontSize: 17,
-            fontWeight: FontWeight.w300,
-            height: 1.5,
-          ),
-    );
-  }
-}

lib/presentation/crowdaction/crowdaction_details/widgets/crowdaction_description.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:shimmer/shimmer.dart';
+
+import '../../../shared_widgets/expandable_markdown_text.dart';
+import '../../../themes/constants.dart';
+
+class CrowdActionDescription extends StatefulWidget {
+  final String? description;
+
+  const CrowdActionDescription({
+    super.key,
+    required this.description,
+  });
+
+  @override
+  State<CrowdActionDescription> createState() => _CrowdActionDescriptionState();
+}
+
+class _CrowdActionDescriptionState extends State<CrowdActionDescription> {
+  @override
+  Widget build(BuildContext context) {
+    if (widget.description == null) {
+      return Shimmer.fromColors(
+        baseColor: kPrimaryColor100,
+        highlightColor: kPrimaryColor200,
+        child: Container(
+          height: 150,
+          width: double.infinity,
+          decoration: BoxDecoration(
+            color: kPrimaryColor100,
+            borderRadius: BorderRadius.circular(10),
+          ),
+        ),
+      );
+    }
+
+    return ExpandableMarkdown(
+      data: widget.description!,
+      themeData: Theme.of(context),
+    );
+  }
+}

lib/presentation/shared_widgets/expandable_markdown_text.dart

@@ -0,0 +1,140 @@
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_markdown/flutter_markdown.dart';
+
+import '../themes/constants.dart';
+import '../themes/markdown_stylesheet.dart';
+import '../utils/launch_url.dart';
+
+class ExpandableMarkdown extends StatefulWidget {
+  final String data;
+  final ThemeData themeData;
+
+  const ExpandableMarkdown({
+    super.key,
+    required this.data,
+    required this.themeData,
+  });
+
+  @override
+  State<ExpandableMarkdown> createState() => _ExpandableMarkdownState();
+}
+
+class _ExpandableMarkdownState extends State<ExpandableMarkdown>
+    with SingleTickerProviderStateMixin {
+  bool readMore = true;
+  late String data;
+  late List<String> lines;
+
+  late AnimationController controller;
+  late Animation<int> sizeAnimation;
+
+  void onTapExpand() {
+    if (readMore) {
+      controller.forward();
+      readMore = false;
+    } else {
+      controller.reverse();
+      readMore = true;
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    lines = LineSplitter().convert(widget.data);
+
+    controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 350),
+    );
+
+    sizeAnimation = IntTween(
+      begin: lines.length > 4 ? 4 : lines.length,
+      end: lines.length,
+    ).animate(CurvedAnimation(
+      parent: controller,
+      curve: Curves.easeInOut,
+    ));
+
+    data = lines.take(sizeAnimation.value + 1).join('\n');
+
+    controller.addListener(
+      () => setState(() {
+        data = lines.take(sizeAnimation.value + 1).join('\n');
+      }),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        _ExpandableMarkdownBody(
+          data: data,
+          themeData: widget.themeData,
+          onTapLink: (_, href, __) => onTapLink(context, href),
+        ),
+        if (lines.length > 4) ...[
+          GestureDetector(
+            onTap: onTapExpand,
+            child: Padding(
+              padding: const EdgeInsets.only(top: 5),
+              child: RichText(
+                text: TextSpan(
+                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                        fontWeight: FontWeight.w300,
+                        color: kAccentColor,
+                        fontSize: 17,
+                        height: 1.5,
+                      ),
+                  children: [
+                    if (readMore) ...[
+                      TextSpan(text: '... '),
+                    ],
+                    TextSpan(
+                      text: readMore ? 'Read more' : 'Read less',
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ],
+      ],
+    );
+  }
+
+  Future<void> onTapLink(BuildContext context, String? href) async {
+    if (href == null || href.isEmpty) {
+      return;
+    }
+
+    await launchUrl(
+      href,
+      useWebView: true,
+      context: context,
+    );
+  }
+}
+
+class _ExpandableMarkdownBody extends MarkdownWidget {
+  final ThemeData themeData;
+
+  _ExpandableMarkdownBody({
+    required super.data,
+    required this.themeData,
+    super.onTapLink,
+  }) : super(styleSheet: getStylesheetFromTheme(themeData));
+
+  @override
+  Widget build(BuildContext context, List<Widget>? children) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: children!,
+    );
+  }
+}

lib/presentation/themes/markdown_stylesheet.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_markdown/flutter_markdown.dart';
+
+import 'constants.dart';
+
+MarkdownStyleSheet getStylesheetFromTheme(ThemeData theme) =>
+    MarkdownStyleSheet(
+      p: theme.textTheme.bodyMedium?.copyWith(
+        fontSize: 17,
+        fontWeight: FontWeight.w300,
+        height: 1.5,
+      ),
+      a: theme.textTheme.bodyMedium?.copyWith(
+        fontSize: 17,
+        fontWeight: FontWeight.w300,
+        color: kAccentColor,
+        height: 1.5,
+      ),
+    );