Hi. By default, FlutterFlow allows you to cut off text and add three dots based on the text length. My project required that text be shortened if it is longer than 2 lines, and this required writing a custom widget, which I share with you below.
The widget accepts arguments such as:
- input - this is the text that we want to shorten to two lines
- textColor - text color - in my case, the text color is often dynamic, so I add it as an argument
Widget width and height are required by default.
Here is the full widget code:
// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
class ElipsisText extends StatefulWidget {
const ElipsisText({
super.key,
this.width,
this.height,
required this.input,
required this.textColor,
});
final double? width;
final double? height;
final String input;
final Color textColor;
@override
State<ElipsisText> createState() => _ElipsisTextState();
}
class _ElipsisTextState extends State<ElipsisText> {
@override
Widget build(BuildContext context) {
return Container(
width: widget.width,
height: widget.height,
child: Text(
widget.input,
style: TextStyle(
fontFamily: 'Inter',
fontSize: 16,
fontWeight: FontWeight.w700,
color: widget.textColor,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
);
}
}If we want to shorten the text after more lines, I change the value in "maxLines" to the appropriate one. In my case, the text should be in two lines.
Here's what the widget settings look like in the editor:
Final result:
