Horizontal scroll Text in flutter - flutter

Question

I am trying to display a long text on one line without clipping or ellipsing on a flutter web application. To do so, I want to make it horizontally scrollable. I have found this code from https://www.geeksforgeeks.org/flutter-scrollable-text/
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,
),
),
),
),
),
);
}
}
But it didn't work for me.The text was clipped but not scrollable. I tried to add overflow: TextOverflow.visible to the Text widget but without result.I don't have any other idea because wrapping a Text in a SingleChildScrollView is the easiest thing I can think about for this problem.

Answer 1

The issue is happening because of Expanded widget. Remove this and it will work just fine,
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,
),
),
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,
),
),
),
),
);
}
}

Answer 2

First of all, for flutter to detect items under a scroll, you have to use ListView as of now. Add a listview widget and under that keep your text or other widgets and essentially flutter will detect your scroll widgets perfectly.
in ListView widget theres a property called scrollDirection: and you can set the value to Axis.horizontal, that does the trick.
For further references please check this out : How to create a horizontal list in flutter
tip : avoid geeksforgeeks on the go for learning flutter, learned it the hard way