updated designe of aboute diet page

lib/features/diets/presentation/widgets/expandable_text.dart

@@ -0,0 +1,87 @@
+import 'dart:math' as math;
+
+import 'package:eatvio_app/generated/l10n.dart';
+import 'package:eatvio_app/theme/theme_helper.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_html/flutter_html.dart';
+import 'package:flutter_svg/svg.dart';
+
+class ExpandableText extends StatefulWidget {
+  final String text;
+  final int maxLines;
+
+  ExpandableText({required this.text, this.maxLines = 3});
+
+  @override
+  _ExpandableTextState createState() => _ExpandableTextState();
+}
+
+class _ExpandableTextState extends State<ExpandableText> {
+  bool isExpanded = false;
+
+  void toggleExpansion() {
+    setState(() {
+      isExpanded = !isExpanded;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final s = S.of(context);
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Stack(
+          children: [
+            Html(
+              data: widget.text,
+              style: {
+                "*": Style(
+                  color: Colors.black87,
+                  maxLines: isExpanded ? null : widget.maxLines,
+                  textOverflow: TextOverflow.clip,
+                ),
+              },
+            ),
+            if (!isExpanded)
+              Positioned.fill(
+                child: Align(
+                  alignment: Alignment.bottomCenter,
+                  child: Container(
+                    height: 35,
+                    decoration: BoxDecoration(
+                      gradient: LinearGradient(
+                        begin: Alignment.topCenter,
+                        end: Alignment.bottomCenter,
+                        colors: [
+                          Colors.white.withOpacity(0.0),
+                          Colors.white.withOpacity(0.6),
+                          Colors.white,
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+          ],
+        ),
+        Align(
+          alignment: Alignment.bottomCenter,
+          child: GestureDetector(
+            onTap: toggleExpansion,
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Text(
+                  isExpanded ? s.hide : s.expand,
+                  style: TextStyle(color: appTheme.blueA400, fontSize: 16, fontWeight: FontWeight.w500),
+                ),
+                Transform.rotate(angle: isExpanded ? math.pi : 0, child: SvgPicture.asset('assets/icons/arrow_down.svg', width: 12, height: 12)),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}