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