I have tried all that I know to get the text to softwrap. I have looked at other people's codes and solutions. Nothing seems to work. Is there something I am missing?
I have tried wrapping it in an Expanded() and a Row() widget, but these only make the whole text disappear. I have tried Containers() with varying sizes, Padding() Wrap(). I just need help, please.
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPostTapped,
child: Row(
children: [
userProfilePicture == null
? Image.asset(
'assets/images/UserImage.png',
height: 40,
width: 40,
fit: BoxFit.cover,
)
: Image.network(userProfilePicture!),
const SizedBox(width: 8),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Text(
'New follower',
style: LabelText.normal(
size: 14,
color: AppColors.dark1,
height: 1.2,
fontWeight: FontWeight.w500),
),
SizedBox(width: 10),
Container(
height: 8,
width: 8,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
color: AppColors.info),
),
],
),
Text(
time != null ? time.toString() : '08:23',
style: LabelText.Small(
size: 12,
color: AppColors.dark2,
height: 0,
fontWeight: FontWeight.w400,
letterSpacing: 0.06),
),
],
),
// This widget does not soft wrap.
Text(
userName == null
? 'Shola Aremu just started following you. Say hi!'
: '$userName just started following you. Say hi!',
softWrap: true,
style: TextStyles.bodySmall(
color: AppColors.dark1,
size: 14,
fontWeight: FontWeight.w400,
height: 0),
),
// This widget above does not softwrap.
],
),
],
),
);
This bit of code above is called here. Where NewFollowerNotification() is the name of the class being called.
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(top: 16, left: 25, right: 25),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.only(right: 4.0),
child: Text(
'Notifications',
style: TextStyles.heading5(
color: AppColors.dark2,
size: 20,
height: 0,
fontWeight: FontWeight.w500),
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
color: AppColors.info),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8, vertical: 4),
child: Text(
'8',
style: LabelText.extraSmall(
color: Colors.white,
size: 10,
fontWeight: FontWeight.w500,
letterSpacing: 0.05,
height: 0),
),
),
)
],
),
Text(
'Clear all',
style: TextStyles.bodySmall(
color: AppColors.mainColor,
fontWeight: FontWeight.w400,
size: 14,
height: 0),
),
],
),
Padding(
padding: EdgeInsets.only(top: 24, bottom: 16),
child: Text(
'Today',
style: TextStyles.heading6(
size: 16,
height: 0,
color: AppColors.dark2,
fontWeight: FontWeight.w500),
),
),
// The class is called here
NewFollowerNotification(),
// The class is called here
],
),
);
I want the Text widget to softwrap. It overflows instead. I expect the part beyond the screen to come down beneath the rendered text (softwrap).
Since you are getting vertical overflow, wrap the Column with Expanded to give maximum available width.