Make scrollable Text inside container in Flutter

Question

I'm trying to create a scrollable Text inside a view:

// other widgets,

SingleChildScrollView(
  child: Container(
    height: 200,
    child: Text(
      "Long text here which is longer than the container height"))),

// other widgets

The text is longer than the height of its parent container, but for some reason the text is not scrollable although it is wrapped inside SingleChildScrollView. Any idea what I'm doing wrong?

score 41 · Accepted Answer · edited Jul 02 '20 at 21:38

41

Try to add scrollDirection (horizontal):

SingleChildScrollView(
scrollDirection: Axis.horizontal,
  child: Container(
      height: 200,
      child: Text(
          "Long text here which is longer than the container height")))

Default is vertical.

Or if you want to have with your height then you have to change the order (SingleChildScrollView inside Container):

Container(
    height: 200,
    child: SingleChildScrollView(
        child: Text(
            "Long text here which is longer than the container height")))

edited Jul 02 '20 at 21:38

Juan Carlos Mendoza

5,736
7
25
50

answered Apr 04 '19 at 12:13

Stonek

643
9
14

thanks but I want it vertically. Interestingly though it works horizontally as you describe. It's just not what I want. – supersize Apr 04 '19 at 12:21
Why is the order different in this case though? I'd like to understand – supersize Apr 04 '19 at 12:38
2

Because the Container height is constant and it is visible on the screen so the scroll isn't needed. The Text is limited by Container, so if the Text is outside the Container then the Text need to be scrolled. Clear? :) – Stonek Apr 04 '19 at 12:45

score 1 · Answer 2 · answered Jun 03 '22 at 12:49

1

To achieve vertical text scrolling, try putting Text widget directly inside SingleChildScrollView, instead of using a container.

answered Jun 03 '22 at 12:49

Márcio Valim

2,459
3
10
21

Make scrollable Text inside container in Flutter

2 Answers2

Linked