Flutter – Scrollable Text

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: