Previously I already made the code for collapsable text, if it's just normal text
Here's the code:
Builder(
builder: (context) {
final isDescExpanded = ValueNotifier<bool>(false);
final description =
selectedProductMap['description'] ?? '';
return ValueListenableBuilder<bool>(
valueListenable: isDescExpanded,
builder: (context, expanded, _) {
return Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
description,
style: primaryText400Style.copyWith(
fontSize: fontSize14,
),
maxLines: expanded ? null : 3,
overflow: expanded
? null
: TextOverflow.ellipsis,
),
LayoutBuilder(
builder: (context, constraints) {
final textSpan = TextSpan(
text: description,
style: primaryText400Style.copyWith(
fontSize: fontSize14,
),
);
final textPainter = TextPainter(
text: textSpan,
textDirection: TextDirection.ltr,
maxLines: 3,
);
textPainter.layout(
maxWidth: constraints.maxWidth);
if (textPainter.didExceedMaxLines) {
return GestureDetector(
onTap: () {
isDescExpanded.value =
!isDescExpanded.value;
},
child: Padding(
padding:
const EdgeInsets.symmetric(
vertical: 8.0),
child: Row(
mainAxisSize:
MainAxisSize.min,
children: [
Text(
expanded
? 'Lihat Lebih Sedikit'
: 'Lihat Selengkapnya',
style: weight500Style
.copyWith(
color: orangeMainColor,
fontSize: 14,
),
),
Icon(
expanded
? Icons
.keyboard_arrow_up
: Icons
.keyboard_arrow_down,
color: orangeMainColor,
size: 20,
),
],
),
),
);
}
return const SizedBox.shrink();
},
),
],
);
},
);
},
),
Now my client need the app to be able text input using text editor (similiar to the one stack overflow use). I manage to apply it using fleather package and able to show it. But i'm not able to adjust my maxline 3 logic. How to fix it ?
Here's my fleather code:
customFleatherTheme(
child: FleatherEditor(
readOnly: false,
showCursor: false,
controller: fleatherController,
focusNode: _focusNode,
key: _editorKey,
maxContentWidth: 600,
),
),
Here's my CustomFleatherTheme
FleatherTheme(
data: FleatherThemeData(
paragraph: TextBlockTheme(
style: primaryText400Style.copyWith(
fontSize: fontSize14,
),
spacing: const VerticalSpacing(
top: 5,
bottom: 5,
),
),
bold: primaryText600Style.copyWith(
fontSize: fontSize14,
),
italic: primaryText400Style.copyWith(
fontStyle: FontStyle.italic,
fontSize: fontSize14,
),
underline: primaryText400Style.copyWith(
decoration: TextDecoration.underline,
fontSize: fontSize14,
),
heading1: TextBlockTheme(
style: primaryText400Style.copyWith(
fontSize: 22,
),
spacing: const VerticalSpacing(
top: 5,
bottom: 5,
),
),
heading2: TextBlockTheme(
style: primaryText400Style.copyWith(
fontSize: fontSize19,
),
spacing: const VerticalSpacing(
top: 5,
bottom: 5,
),
),
heading3: TextBlockTheme(
style: primaryText400Style.copyWith(
fontSize: fontSize16,
),
spacing: const VerticalSpacing(
top: 5,
bottom: 5,
),
),
heading4: TextBlockTheme(
style: primaryText400Style.copyWith(
fontSize: fontSize14,
),
spacing: const VerticalSpacing(
top: 5,
bottom: 5,
),
),
heading5: TextBlockTheme(
style: primaryText400Style.copyWith(
fontSize: fontSize14,
),
spacing: const VerticalSpacing(
top: 5,
bottom: 5,
),
),
heading6: TextBlockTheme(
style: primaryText400Style.copyWith(
fontSize: fontSize18,
),
spacing: const VerticalSpacing(
top: 5,
bottom: 5,
),
),
code: TextBlockTheme(
style: TextStyle(
fontFamily: 'Courier',
fontSize: 12,
backgroundColor: Colors.grey[200],
color: Colors.purple,
),
spacing: const VerticalSpacing(
top: 5,
bottom: 5,
),
),
strikethrough: primaryText400Style.copyWith(
decoration: TextDecoration.lineThrough,
fontSize: fontSize14,
),
inlineCode: InlineCodeThemeData(
style: primaryText400Style.copyWith(
fontSize: fontSize12,
),
),
link: primaryText400Style.copyWith(
color: Colors.blue,
fontSize: fontSize14,
),
lists: TextBlockTheme(
style: primaryText400Style.copyWith(
fontSize: fontSize14,
),
spacing: const VerticalSpacing(
top: 5,
bottom: 5,
),
),
quote: TextBlockTheme(
style: primaryText400Style.copyWith(
fontSize: fontSize14,
),
spacing: const VerticalSpacing(
top: 5,
bottom: 5,
),
),
horizontalRule: HorizontalRuleThemeData(
color: Colors.grey,
thickness: 1,
height: 5,
),
),
child: child,
);