Flutter Question posted in
The official Flutter documentation can be found here.

How to layout with flutter

I have a new UI with 2 items.
If the text in the first item is too long, I need to wrap it to a new line like the screenshot.
I don’t know how to do.
Does anyone have a solution?
Thanks for your suggestion.
[UI screenshot] (https://i.sstatic.net/kE1PCMrb.png)

I tried with Wrap widget but not working.
Here is current code:

 Row(
    crossAxisAlignment: CrossAxisAlignment.end,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Text("builder name"),
      widget()
    ]
Tags:

2

Answers


  1. 0

    Text widget with softWrap and overflow properties. Wrap widget is useful for managing multiple widgets but may not work correctly for long text within a line.

    Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(
      'builder name12345678901234567890123456789012345', // Your builder name here
      style: TextStyle(fontSize: 16), // Adjust font size as needed
      softWrap: true, // Allows text to wrap when it overflows
      overflow: TextOverflow.visible, // Ensures visibility of the overflowing text
    ),
    SizedBox(height: 4), // Adds some space between the text and the next row
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          '会社をフォローする',
          style: TextStyle(fontSize: 14),
        ),
        Icon(Icons.favorite_border), // Icon can be replaced with your favorite symbol
      ],
    ),
  ],
)
    • The Text widget uses softWrap: true to allow the text to wrap when it gets too long.
    • The Column widget ensures that the builder name can break into multiple lines when necessary.
    • The second Row holds the other text and the icon, ensuring they are aligned properly.
    Login or Signup to reply.
  2. 0

    Bind the text width so it knows when to wrap to the next line. To do this, I would recommend wrapping the Text Widget in an Expanded. As mentioned in the answer by Kasun you should also set softWrap to true. This should solve it for you.

     Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
  Expanded(child:Text("builder name", softWrap: true)),
  widget()
]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search