I have a Text Widget with some properties that I am viewing on two screens. One is a canvas and the other is overlaid on a T-Shirt Image. On the canvas, the Text Container takes the whole screen. But when I overlay it on the shirt. The text wraps to other line for some reason.
This is the Text Widget:
class EditableTextWidget extends StatelessWidget {
const EditableTextWidget({
Key? key,
required this.rotationAngle,
required this.opacity,
required this.textAlign,
required this.text,
required this.style,
required this.textStrokeWidth,
required this.textStrokeColor,
required this.textColor,
required this.letterSpacing,
required this.lineHeight,
required this.fontSize,
required this.shadowAngle,
required this.shadowDistance,
required this.shadowColor,
this.backgroundColor,
required this.isShadowSet,
this.scalingFactor = 1.0,
required this.backGroundColorTakesFullWidth,
}) : super(key: key);
// final double width;
final int rotationAngle;
final double opacity;
final TextAlign textAlign;
final String text;
final TextStyle style;
final double textStrokeWidth;
final Color textStrokeColor;
final Color textColor;
final double letterSpacing;
final double lineHeight;
final double fontSize;
final double shadowAngle;
final double shadowDistance;
final Color shadowColor;
final double scalingFactor;
final Color? backgroundColor;
final bool backGroundColorTakesFullWidth;
final bool isShadowSet;
@override
Widget build(BuildContext context) {
return Transform.scale(
scale: scalingFactor,
child: RotationTransition(
turns: AlwaysStoppedAnimation(rotationAngle / 360),
child: AnimatedOpacity(
opacity: opacity,
duration: const Duration(milliseconds: 500),
child: Container(
color: Colors.amber,
width: double.infinity,
child: Stack(
alignment: Alignment.center,
children: [
if (textStrokeWidth != 0)
Text(
text,
textAlign: textAlign,
style: style.copyWith(
color: textStrokeWidth == 0
? textColor.withOpacity(opacity)
: null,
letterSpacing: letterSpacing,
height: lineHeight,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = textStrokeWidth
..color = textStrokeColor,
fontSize: fontSize,
backgroundColor: backgroundColor,
shadows: [
Shadow(
offset: Offset.fromDirection(
radians(shadowAngle), shadowDistance),
blurRadius: 2.0,
color: shadowColor,
),
],
),
),
Text(
text,
textAlign: textAlign,
style: style.copyWith(
color: textColor.withOpacity(opacity),
letterSpacing: letterSpacing,
height: lineHeight,
fontSize: fontSize,
shadows: [
if (isShadowSet)
Shadow(
offset: Offset.fromDirection(
radians(shadowAngle), shadowDistance),
blurRadius: 2.0,
color: shadowColor,
),
],
),
),
],
),
),
),
),
);
}
}
This is the widget on canvas
CustomSingleChildLayout(
delegate:
CustomDelegate(offset: model.positionOffset),
child: GestureDetector(
onDoubleTap: () {
Get.back();
Get.to(() => const AddText());
},
child: EditableTextWidget(
rotationAngle: model.lastTextRotationAngle,
opacity: model.selectedTextColourOpacity,
textAlign: model.lastTextAlign,
text: text,
style: model.currentFont,
textColor: model.selectedTextColor,
textStrokeColor: model.lastTextStrokeColor,
textStrokeWidth: model.lastTextStrokeWidth,
letterSpacing: model.lastTextLetterSpacing,
lineHeight: model.lastTextLineHeight,
fontSize: model.lastTextFontSize,
shadowAngle: model.lastTextShadowAngle,
shadowDistance: model.lastTextShadowDistance,
shadowColor: model.lastTextShadowColor,
backgroundColor:
model.lastApplyTextBackgroundColor
? model.lastTextBackgroundColor
: Colors.transparent,
isShadowSet: model.isShadowColorSet,
scalingFactor: model.scalingFactor,
backGroundColorTakesFullWidth: false,
),
),
),
This is the same widget overlaid on the tshirt:
CustomSingleChildLayout(
delegate: CustomDelegate(
offset: addModel.positionOffset,
),
child: Container(
color: Colors.red,
width: double.infinity,
child: EditableTextWidget(
key: textKey,
scalingFactor: 0.5,
rotationAngle:
addModel.lastTextRotationAngle,
opacity:
addModel.selectedTextColourOpacity,
textAlign: addModel.lastTextAlign,
text: addModel.lastText,
style: addModel.currentFont,
textColor: addModel.selectedTextColor,
textStrokeColor:
addModel.lastTextStrokeColor,
textStrokeWidth:
addModel.lastTextStrokeWidth,
letterSpacing:
addModel.lastTextLetterSpacing,
lineHeight: addModel.lastTextLineHeight,
fontSize: addModel.lastTextFontSize,
shadowAngle:
addModel.lastTextShadowAngle,
shadowDistance:
addModel.lastTextShadowDistance,
shadowColor:
addModel.lastTextShadowColor,
backgroundColor: addModel
.lastApplyTextBackgroundColor
? addModel.lastTextBackgroundColor
: Colors.transparent,
isShadowSet: addModel.isShadowColorSet,
backGroundColorTakesFullWidth: true,
),
),
),
Is there anyway to fix the issue so that the text doesn’t wrap to next line?
2
Answers
Text widget has maxLines parameter
Use an ellipsis to indicate that the text has overflowed.