Home > Software engineering >  I don't know how to wrap text in Flutter
I don't know how to wrap text in Flutter

Time:07-02

I am trying to create a common component with an image on the left and an introduction on the right. When the introduction is long, the component does not render well.

I know there is a commonly known method of wrapping Text in a Flexible Widget and have tried it. That did not work.

I have an example on dartpad. Can anyone tell me how to get it to display without overflow here?

https://dartpad.dev/?id=ee205a74591b34665c04abecc5012211

CodePudding user response:

In the column widget add a row. Then if you add a flexible widget the text will go down on overflow

Column(
  children : [
    Text("some small text here"),
    Row(
      children : [
        Flexible(
          child : Text("Really long text here"),
        )
      ]
    )
  ]
}

CodePudding user response:

 return GestureDetector(
    child: Row(children: [
  // alt image component
  SizedBox(
    height: 100,
    width: 100,
    child: Container(
      color: Colors.red,
    ),
  ),
  // item description
  Expanded(
    child: Column(
      children: [
        Text("user name"),
        Text(
            "user comment text: jump jump jump high jump high jump big jump big jump choo choo choo ya ya ya ri ri ri uh uh uh user comment text: jump jump jump high jump high jump big jump big jump choo choo choo ya ya ya ri ri ri uh uh uh"),
      ],
    ),
  ),
]));
  • Related