Home > Back-end >  How to make a long text horizontally scrollable to avoid Renderflex overflow in Flutter
How to make a long text horizontally scrollable to avoid Renderflex overflow in Flutter

Time:01-14

As you can see in my application, the second Text() widget is too long and overflows the screen.
What I wanna implement is to have an animation on that Text() that automatically scrolls horizontally and continuously, so that the user can read it.

Note that the animation should be implemented only on the widgets that overflows the screen (in my case on the second text widget).

enter image description here

Here is my code:

InkWell(
  onTap: () {/* do something */},
  child: Container(
    width: 500.0,
    child: Row(
      children: [
        Icon(icon),
        const SizedBox(width: 20.0),
        Text(title, style: const TextStyle(fontSize: 25.0)),
      ],
    ),
  )

CodePudding user response:

I can't leave a comment yet but I believe enter image description here

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [
      Text(veryLongText),
    ],
  ),
)

CodePudding user response:

Wrap with SingleChildScrollView to make it scrollable and then wrap it with Expanded to get available size.

InkWell(
    onTap: () {/* do something */},
    child: Container(
      width: 500.0,
      child: Row(
        children: const [
          Icon(Icons.ac_unit),
          SizedBox(width: 20.0),
          Expanded(
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              // primary: false, // may needed
              child: Text(
                "title lonmggggggggggggssssssssssasdasdaasdasds323423sss756g",
                style: TextStyle(fontSize: 25.0),
              ),
            ),
          ),
        ],
      ),
    ))
  •  Tags:  
  • Related