How to make Scrollable text in flutter?

Question

I have an image at the top of a Column widget after that there is heading which is Text widget and after that, there is one more Text widget which contains some description and that exceeds the screen and gives an error of rendering.

So I want to make that text view scrollable, so that it should be visible completely and scrollable too. And its size must be dynamic as the Data coming from API. I tried few of the approaches but unable to make it done. Here is the screenshot

Screenshot:

@override


 Widget build(BuildContext context) {
    var size = MediaQuery
        .of(context)
        .size;
    final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
    final double itemWidth = size.width;


return new Container(
  child: new Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      new Padding(
        padding: const EdgeInsets.fromLTRB(0.0, 24.0, 0.0, 0.0),
        child: new Image.asset(
          'assets/img/noconnection.png',
          height: 200.0,
          width: itemWidth,
        ),
      ),
      new Padding(
        padding: const EdgeInsets.all(12.0),
        child: new Text(
          "Some Heading Text",
          style: new TextStyle(
              fontSize: 28.0,
              color: Colors.black87,
              fontWeight: FontWeight.w600),
        ),
      ),
      new SingleChildScrollView(
        child: new Text(
          "Description that is too long in text format(Here Data is coming from API)",
          style: new TextStyle(
            fontSize: 16.0, color: Colors.black87,
          ),
        ),
      ),
    ],
  ),
);

}

Possible duplicate of [how to make text or richtext scrollable in flutter?](https://stackoverflow.com/questions/49617934/how-to-make-text-or-richtext-scrollable-in-flutter) — Raouf Rahiche, Apr 03 '18 at 20:25
new SingleChildScrollView( child: new Text( "Description that is too long in text formatt", style: new TextStyle( fontSize: 16.0, color: Colors.black87, ), ), ), Changed that 3rd child in column to the code above ...but not working :( — Vaibhav Miniyar, Apr 03 '18 at 20:30

score 65 · Accepted Answer · edited Jun 23 '20 at 17:50

You need to wrap your SingleChildScrollView in an Expanded widget and you will get what you are looking for.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var size = MediaQuery
        .of(context)
        .size;
    final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
    final double itemWidth = size.width;

    return new Container(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Padding(
            padding: const EdgeInsets.fromLTRB(0.0, 24.0, 0.0, 0.0),
            child: new Image.asset(
              'assets/rp1.jpg',
              height: 200.0,
              width: itemWidth,
            ),
          ),
          new Padding(
            padding: const EdgeInsets.all(12.0),
            child: new Text(
              "Some Heading Text",
              style: new TextStyle(
                  fontSize: 28.0,
                  color: Colors.white,
                  fontWeight: FontWeight.w600),
            ),
          ),
          new Expanded(
            flex: 1,
            child: new SingleChildScrollView(
              scrollDirection: Axis.vertical,//.horizontal
              child: new Text(
                "1 Description that is too long in text format(Here Data is coming from API) jdlksaf j klkjjflkdsjfkddfdfsdfds " + 
                "2 Description that is too long in text format(Here Data is coming from API) d fsdfdsfsdfd dfdsfdsf sdfdsfsd d " + 
                "3 Description that is too long in text format(Here Data is coming from API)  adfsfdsfdfsdfdsf   dsf dfd fds fs" + 
                "4 Description that is too long in text format(Here Data is coming from API) dsaf dsafdfdfsd dfdsfsda fdas dsad" + 
                "5 Description that is too long in text format(Here Data is coming from API) dsfdsfd fdsfds fds fdsf dsfds fds " + 
                "6 Description that is too long in text format(Here Data is coming from API) asdfsdfdsf fsdf sdfsdfdsf sd dfdsf" + 
                "7 Description that is too long in text format(Here Data is coming from API) df dsfdsfdsfdsfds df dsfds fds fsd" + 
                "8 Description that is too long in text format(Here Data is coming from API)" + 
                "9 Description that is too long in text format(Here Data is coming from API)" + 
                "10 Description that is too long in text format(Here Data is coming from API)",     
                style: new TextStyle(
                  fontSize: 16.0, color: Colors.white,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

doesn't solved the problem...using Expand as a parent of SingleChildScrollView displayes noting on the screen.. not even the image and heading text at the top.. it gives following error... — Vaibhav Miniyar, Apr 04 '18 at 07:10
`I/flutter ( 1653): Another exception was thrown: RenderFlex children have non-zero flex but incoming height constraints are unbounded. I/flutter ( 1653): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1446 pos 12: 'hasSize': is not true. I/flutter ( 1653): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1446 pos 12: 'hasSize': is not true.I/flutter ( 1653): Another exception was thrown: NoSuchMethodError: The method '<=' was called on null. ` — Vaibhav Miniyar, Apr 04 '18 at 07:10
A big thanks to you @jhon Wiese...It worked but still, I don't know what exactly the mistake that I was doing....anyways thank you so much :) — Vaibhav Miniyar, Apr 06 '18 at 10:50

score 2 · Answer 2 · answered Jan 09 '21 at 19:00

If you want to touch any part of the screen, and be able to scroll, use this example. I used colors yellow and green to show that the entire screen will scroll, not just the text area.

import 'package:flutter/material.dart';

class ShowFilePage extends StatefulWidget {
  @override
  _ShowFilePageState createState() => _ShowFilePageState();
}

class _ShowFilePageState extends State<ShowFilePage> {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
        backgroundColor: Colors.yellow,
        appBar: AppBar(
          title: Text('Text'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
                child: Container(
                    color: Colors.green,
                    child: SingleChildScrollView(child: Text('insert long text here')))),
          ],
        ));
  }
}

JerryZhou · Answer 3 · 2020-09-01T08:10:59.313

1

To be simple, just use 3rd pub: Marquee

Marquee(
  text: 'There once was a boy who told this story about a boy: "',
)

edited Sep 01 '20 at 08:10

answered Jan 14 '20 at 09:31

JerryZhou

3,359
3
27
44

Doing this gives me error, or in simple it doesn't let me use marquee, no matter what I use container, column etc. – An Android May 17 '21 at 10:14
1

@AnAndroid you can create issue on that lib's github page. – JerryZhou May 19 '21 at 06:38
The Author of Marquee already said that, he haven't worked on this package for a while and now as most of the things are new/changed so, now he is going to update it (the whole package and he needs time for that), this is all I know, that is why I came here to find out any other way! BTW Thanks! – An Android May 19 '21 at 09:11

score 1 · Answer 4 · answered Feb 18 '21 at 10:42

For scrolling Text vertically as well as horizontally I used the following code.

SingleChildScrollView(
    scrollDirection: Axis.vertical,
    child: SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Text('Your text.......')
    ),
  );

score 0 · Answer 5 · answered Dec 21 '20 at 07:21

0

Just put your root container in a SingleChildScrollView() widget.

SingleChildScrollView(
  child: Container() // your root container
)

answered Dec 21 '20 at 07:21

Abdul Qadir

113
8

How to make Scrollable text in flutter?

5 Answers5

Linked