Flutter Assets

Quick Tip – How to make Text Scrollable in Flutter

How to make Text Scrollable in Flutter

To make a piece of text scrollable in Flutter, you can wrap it in a SingleChildScrollView widget. This widget allows you to display a single widget, such as a block of text, in a scrollable view. You can also customize the scroll behavior by specifying the scroll direction, scroll physics, and other properties of the SingleChildScrollView widget.

SingleChildScrollView widget in Flutter

SingleChildScrollView is a widget in Flutter that allows you to scroll a single child widget within a larger container. It is often used when you have a single box that will normally be entirely visible, but you need to make sure it can be scrolled if the contents are too large to be displayed on the screen.

Here is an example of how you can use SingleChildScrollView to make a piece of text scrollable:

SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Text(
'This is a long piece of text that will be scrollable. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
style: TextStyle(fontSize: 16),
),
)

This will create a scrollable view that allows the user to scroll through the text if it exceeds the bounds of the screen. The SingleChildScrollView widget is useful when you have a single child that you want to make scrollable, rather than a list of items.

Here is another example with short but with large font text.

            const SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Text(
                'flutterassets.com',
                style: TextStyle(
                  fontSize: 60,
                  color: Colors.green,
                  fontFamily: "Genos",
                  fontWeight: FontWeight.w900,
                ),
              ),
            ),

Note that the SingleChildScrollView widget can only have a single child, so if you want to scroll multiple widgets, you can wrap them in a Column or Row widget (depending on the desired scroll direction).

Text Scrollable horizontally in Flutter

o make a Text widget scrollable horizontally in Flutter, you can wrap it in a SingleChildScrollView widget and set the scrollDirection property to Axis.horizontal.

Here’s an example:

SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Text(
'This is a long text that will be scrollable horizontally',
style: TextStyle(fontSize: 20),
),
)

If you want to enable scrolling for a multi-line Text widget, you can wrap it in a Scrollbar widget and set the scrollDirection property of the SingleChildScrollView to Axis.horizontal.

Here’s an example:

Scrollbar(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Text(
'This is a long text that will be scrollable horizontally. It is a multi-line text and will be scrollable vertically as well. You can use the Scrollbar widget to show a scrollbar and make it easier to scroll.',
style: TextStyle(fontSize: 16),
),
),
)

Text Scrollable vertically in Flutter

To make a Text widget scrollable vertically in Flutter, you can wrap it in a SingleChildScrollView widget and set the scrollDirection property to Axis.vertical.

Here’s an example:

SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: Text(
    'This is a long text that will be scrollable vertically',
    style: TextStyle(fontSize: 16),
  ),
)

If you want to enable scrolling for a multi-line Text widget, you don’t need to set the scrollDirection property, as it is set to Axis.vertical by default.

Here’s an example:

SingleChildScrollView(
  child: Text(
    'This is a long text that will be scrollable vertically. It is a multi-line text and will be scrollable vertically as well.',
    style: TextStyle(fontSize: 16),
  ),
)

You can also use the Scrollbar widget to show a scrollbar and make it easier to scroll.

Container(
height: 50,
child: Scrollbar(
child: SingleChildScrollView(
child: Text(
'This is a long text that will be scrollable vertically. It is a multi-line text and will be scrollable vertically as well. You can use the Scrollbar widget to show a scrollbar and make it easier to scroll.',
style: TextStyle(fontSize: 16),
),
),
),
)

How to make Text Scrollable inside Row in Flutter

First, wrap the Text widget in a SingleChildScrollView widget. Then, wrap the SingleChildScrollView widget in a Flexible or Expanded widget. Finally, add the Flexible or Expanded widget to the Row widget.

Make sure to use scrollDirection: Axis.horizontal inside the SingleChildScrollView widget.

By setting the scrollDirection property to Axis.horizontal, you can make the text scrollable horizontally. If you want to make the text scrollable vertically, you can set the scrollDirection property to Axis.vertical.

Row(
children: [
Flexible(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Text(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
style: TextStyle(fontSize: 18),
),
),
),
],
)

Another example with Expended widget.

Row(
children: [
Expanded(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Text(
'This is a very long text that will be scrollable inside the row',
style: TextStyle(fontSize: 20),
),
),
),
],
)

And one more example.

            Row(
              children: [
                Container(
                    padding: const EdgeInsets.all(10.0),
                    child: Icon(Icons.favorite, color: Colors.red, size: 40,)
                ),
                const Flexible(
                  child: SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Text(
                      'flutterassets.com',
                      style: TextStyle(
                        fontSize: 40,
                        color: Colors.green,
                        fontFamily: "Genos",
                        fontWeight: FontWeight.w900,
                      ),
                    ),
                  ),
                ),
                Container(
                    padding: const EdgeInsets.all(10.0),
                    child: Icon(Icons.favorite, color: Colors.red, size: 40,)
                ),
              ],
            ),

You can read more about the Text widget in this post: Flutter Basics – What is and how to use Text widget in Flutter