How do I soft wrap my Text widget in Flutter

Question

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).

Answer 1

Since you are getting vertical overflow, wrap the Column with Expanded to give maximum available width.

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),
        Expanded(   // wrap this Column with Expanded
          child: 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.
            ],
          ),
        ),
      ],
    ),
  );