Horizontal scroll Text in 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.

• Diwyansh: Your code is working fine and it's scrollable too.

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