Flutter - Scrollable Text
Last Updated :
15 Jan, 2021
In this article, we are going to make a Flutter application in which we will add a Text Widget that can be scrolled horizontally or vertically. These can have a wide range of applications depending upon the needs of the users. Here we will be implementing the simplest form of scrollable text.
We can make the text scrollable in flutter using these 2 widgets:
- Expanded Class: A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.
- SingleChildScrollView Class: A box in which a single widget can be scrolled.
We have to wrap the Text widget within SingleChildScrollView widget and further wrap the SingleChildScrollView widget within the Expanded widget like this :
Expanded(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Text(
"GeeksForGeeks : Learn Anything, Anywhere",
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 20.0,
),
),
),
);
Let's look into some example now:
Example 1: Horizontal Scrolling
Follow the below steps to implement horizontal scrolling in a Text Widget:
Step 1: Create a new flutter project in Android Studio.
Step 2: Make the layout using widgets
Go to the main.dart file and refer to the following code. Below is the code for the main.dart file.
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
//adding App Bar
appBar: AppBar(
backgroundColor: Color.fromRGBO(15, 157, 88, 1),
title: Text(
"GeeksForGeeks",
style: TextStyle(
color: Colors.white,
),
),
),
body: MyApp(),
),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
// adding margin
margin: const EdgeInsets.all(15.0),
// adding padding
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
// adding borders around the widget
border: Border.all(
color: Colors.blueAccent,
width: 5.0,
),
),
// SingleChildScrollView should be
// wrapped in an Expanded Widget
child: Expanded(
//contains a single child which is scrollable
child: SingleChildScrollView(
//for horizontal scrolling
scrollDirection: Axis.horizontal,
child: Text(
"GeeksForGeeks is a good platform to learn programming."
" It is an educational website.",
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 20.0,
letterSpacing: 3,
wordSpacing: 3,
),
),
),
),
),
);
}
}
Output:
Example 2: Vertical Scrolling
For vertical scrolling of the text follow Step 1 and Step 2 of the first example and change the scrolling direction to vertical as shown below:
scrollDirection: Axis.vertical
The main.dart file
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
// adding App Bar
appBar: AppBar(
backgroundColor: Color.fromRGBO(15, 157, 88, 1),
title: Text(
"GeeksForGeeks",
style: TextStyle(
color: Colors.white,
),
),
),
body: MyApp(),
),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
// adding margin
margin: const EdgeInsets.all(15.0),
// adding padding
padding: const EdgeInsets.all(3.0),
// height should be fixed for vertical scrolling
height: 80.0,
decoration: BoxDecoration(
// adding borders around the widget
border: Border.all(
color: Colors.blueAccent,
width: 5.0,
),
),
// SingleChildScrollView should be
// wrapped in an Expanded Widget
child: Expanded(
// SingleChildScrollView contains a
// single child which is scrollable
child: SingleChildScrollView(
// for Vertical scrolling
scrollDirection: Axis.vertical,
child: Text(
"GeeksForGeeks is a good platform to learn programming."
" It is an educational website.",
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 20.0,
letterSpacing: 3,
wordSpacing: 3,
),
),
),
),
),
);
}
}
Output:
Similar Reads
Flutter - Draggable Scrollable Sheet
In this tutorial, we are going to learn what the DraggableScrollableSheet widget is and how to implement it in Flutter. Table of ContentsWhat is FlutterDraggableScrollableSheetProject SetupProject CodeFlutter: Flutter is an open-source UI software development kit created by Google with which we can
7 min read
Flutter - Skeleton Text
In Flutter, the skeleton_text library is used to easily implement skeleton text loading animation. Its main application in a flutter app is to assure its users that the servers are working but running slow, but the content will eventually load. It also enhances the User Interface if the user connect
3 min read
Flutter - Slidable
Slidable in an application can be used to perform a wide range of tasks with just a simple swipe to either right or left on the tile. It not only makes the UI very user-friendly but also saves a lot of time in doing trivial tasks which if done in other ways can be hectic and redundant to design. In
4 min read
Flutter - SelectableText Widget
Many times you need to select or copy some text like when you are on a web browser it allows us to select or copy any of the text without any issue but on mobile applications, it is not possible. So at times, you need to manually copy or enter such texts. But in the Flutter, with the help of the Sel
3 min read
Flutter - Auto size text
An adaptive UI is an integral part of any application. As applications nowadays have to function on a wide range of devices ranging from tablets, PCs, and mobile with varying screen sizes. This is where the application needs to adjust itself according to the size of the screen irrespective of the si
3 min read
Flutter - StreamBuilder Widget
A StreamBuilder in Flutter is used to listen to a stream of data and rebuild its widget subtree whenever new data is emitted by the stream. It's commonly used for real-time updates, such as when working with streams of data from network requests, databases, or other asynchronous sources. In this art
5 min read
Flutter - Nested Scroll View
In Flutter, you can use a NestedScrollView widget to create a scrollable view with multiple scrolling sections that can scroll independently of each other. This is commonly used when you have a header that should remain visible while the content below it scrolls. In this article, we are going to imp
4 min read
Flutter - Custom Scroll View
A CustomScrollView in Flutter is a highly customizable scrolling widget that allows you to create complex scrolling effects and layouts. You can use it to create scrollable views with multiple slivers, each having its own behavior. In this article, we are going to implement the CustomScrollView widg
4 min read
Table Widget in Flutter
Table widget is used to display items in a table layout. There is no need to use Rows and Columns to create a table. If we have multiple rows with the same width of columns then Table widget is the right approach. SliverList or Column will be most suitable if we only want to have a single column. Th
3 min read
Flutter - Scroll Snap List
The scroll_snap_list package provides a wrapper that wraps around the ListView.builder widget to enable snapping event on List items. It can be modified to horizontal or vertical snapping based on the requirements. It is also important to note that it doesn't make use of less or no animation. In thi
4 min read