Unable to wrap Text inside Container in Flutter

pew 0
Viewed 44

I have the following tree: Scaffold > Column > Row > Container > Text. I want the Text to wrap, and The Great Google in most cases told me that Expanded is what i need, but none of the below cases worked for me:

  • Row wrapped inside Expanded
  • Container wrapped inside Expanded
  • Text wrapped inside Expanded

All of the above have the same result.

Here's my code for the page's body:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF282B32),
      body: Column(
        children: <Widget>[
          createRow(
            context,
            "https://i.stack.imgur.com/6Utrc.jpg?s=256&g=1",
            "GuildProtect is a powerful, baterries-included moderation bot for your *safe* server!"
          ),
          createDivider(),
          createRow(
            context, 
            "https://cdn.discordapp.com/avatars/967406876029501462/bd3c60dcf55c83fba41b15fba89f798a.webp?size=256", 
            "This is a very beatiful (because it's pink) avatar of this shitty website creator, enjoy!"
          )
        ]
      )
    );
  }

  Row createRow(BuildContext context, String imageUrl, String text) {
    const containerHeight = 256.0;

    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Container(
          alignment: Alignment.centerLeft,
          height: containerHeight,
          padding: const EdgeInsets.only(left: 50, top: 25, bottom: 25),
          child: Image.network(imageUrl),
        ),
        Container(
          alignment: Alignment.centerRight,
          height: containerHeight,
          padding: const EdgeInsets.only(right: 50, top: 25),
          child: Text(
            text,
            style: TextStyle(
              color: const Color(0xFFFFFCF9),
              fontWeight: FontWeight.bold,
              fontSize: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 1.3).fontSize,
            ),
          ),
        ),
      ]
    );
  }

  Divider createDivider() {
    return const Divider(
      color: Color(0xFF131518),
      indent: 30,
      endIndent: 30,
      thickness: 1,
      height: 20,
    );
  }
}

I also saw some answers on SO recommending to cut the text or show ellipsis, but i dont need this behaviour, i need the text to actually wrap. This video's second solution shows exactly what i want to achieve (and no, the solution from there didn't help).

Any help is appreciated!

flutter-layout dart flutter
3 Answers

In createRow(), wrap the second Container() with Flexible().

Flexible(
  child: Container(
    alignment: Alignment.centerRight,
    height: containerHeight,
    padding: const EdgeInsets.only(right: 50, top: 25),
    child: Text(
      text,
      style: TextStyle(
        color: const Color(0xFFFFFCF9),
        fontWeight: FontWeight.bold,
        fontSize: DefaultTextStyle.of(context)
            .style
            .apply(fontSizeFactor: 1.3)
            .fontSize,
      ),
    ),
  ),
)

Lemme know if it worked for your use case.

saqib shafin0

Why are you seeing this?.

Well, this is because the width of the widgets which you are trying to put, is greater then the screen size.

Possible solutions:

  • Try to add width property to the second Container in the Row
  • try to use .fit property, which will fit the image in it's father widget size.
  • I don't think that wrapping the container in Expanded wouldn't fix the situation as I see the text is too long (the screen has overflowed by 260 pixels).
  • Try to use TextOverflow as mentioned in link.

Please, let me know if any of my solutions works.

Ammar Hammoud0

Anywhere you want to use a text and its length is not specified, you may encounter a folding error. My suggestion is to use Expanded.

This is the output of your code snippet in my simulator your code Output in mobile

It is enough to wrap the second Container with an Expanded widget (createRow) :

Row createRow(BuildContext context, String imageUrl, String text) {
const containerHeight = 256.0;

return Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Container(
      alignment: Alignment.centerLeft,
      height: containerHeight,
      padding: const EdgeInsets.only(left: 50, top: 25, bottom: 25),
      child: Image.network(imageUrl),
    ),
   --> Expanded(
      child: Container(
        alignment: Alignment.centerRight,
        height: containerHeight,
        padding: const EdgeInsets.only(right: 50, top: 25),
        child: Text(
          text,
          style: TextStyle(
            color: const Color(0xFFFFFCF9),
            fontWeight: FontWeight.bold,
            fontSize: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 1.3).fontSize,
          ),
        ),
      ),
    ),
  ]
);
}

and output:

--> after Wrap Container with Expanded Widget

It is noteworthy that this part of your work is not responsive. Probably, the texts are too big in my emulator because of the difference made by the DefaultTextStyle.of(context) class. Anyway, I hope it solved your problem.

full code:

I used MediaQuery for setting fontSize Because no details are provided from the content of the defaultTextStyle class.

 import 'package:flutter/material.dart';

class TstPage extends StatelessWidget {
const TstPage({super.key});

@override
 Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: const Color(0xFF282B32),
  body: Column(
    children: <Widget>[
      createRow(
        context,
        "https://i.stack.imgur.com/6Utrc.jpg?s=256&g=1",
        "GuildProtect is a powerful, baterries-included moderation bot for 
   your *safe* server!"
      ),
      createDivider(),
      createRow(
        context,     


"https://cdn.discordapp.com/avatars/967406876029501462/bd3c60dcf55c83fba41b15fba89f798a.webp?size=256", 
            "This is a very beatiful (because it's pink) avatar of this shitty 
 website creator, enjoy!"
      )
    ]
  )
);
}

Row createRow(BuildContext context, String imageUrl, String text) {
const containerHeight = 256.0;

return Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Container(
      alignment: Alignment.centerLeft,
      height: containerHeight,
      padding: const EdgeInsets.only(left: 50, top: 25, bottom: 25),
      child: Image.network(imageUrl),
    ),
    Expanded(
      child: Container(
        alignment: Alignment.centerRight,
        height: containerHeight,
        padding: const EdgeInsets.only(right: 50, top: 25),
        child: Text(
          text,
          style: TextStyle(
            color: const Color(0xFFFFFCF9),
            fontWeight: FontWeight.bold,
            fontSize: MediaQuery.of(context).size.width*0.04,
          ),
        ),
      ),
    ),
  ]
);
}

  Divider createDivider() {
   return const Divider(
   color: Color(0xFF131518),
  indent: 30,
  endIndent: 30,
  thickness: 1,
  height: 20,
);
}
  }

Alikheiri0
Related