How should I make a text box continous instead of making a new line after it completes a line in Flutter? - flutter

Question

I am new to flutter, and I want to put a textbox which only continues to take text without creating a new line after it reaches the screen size limit, like I want it to be scrollable in Horizontal direction if it reaches the screen size limit, so how to do that? Here is the code for only the textbox part
Expanded(
flex: 1,
child: Container(
child: Padding(
padding: EdgeInsets.fromLTRB(0, 0, 12, 25),
child: Text(
_input,
style: GoogleFonts.titilliumWeb(
fontSize: 50.0,
color: Colors.grey[800],
),
),
),
alignment: Alignment(1.0, 1.0),
),
)

Answer 1

Here is a solution for both a Text and a TextField:
Scrollable Text
In order to achieve this, place your scrollable content (here, your container) inside a SingleChildScrollView.
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Container(
color: Colors.amber.shade300,
padding: EdgeInsets.all(16.0),
child: Text(
'Fear is the path to the dark side. Fear leads to anger. Anger leads to hate. Hate leads to suffering.',
style: GoogleFonts.titilliumWeb(
fontSize: 24.0,
color: Colors.grey[800],
),
),
),
)
Scrollable TextField
Here, I used IntrinsicWidth to make the text centered with its prefixed icon and then scrollable.
Container(
height: 48.0,
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 0.0),
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.amber.shade300,
border: Border.all(
color: Colors.brown,
width: 3.0,
),
borderRadius: BorderRadius.circular(25),
),
child: Center(
child: IntrinsicWidth(
child: TextField(
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
prefixIcon: Icon(Icons.search),
hintText: 'Search',
border: InputBorder.none,
),
),
),
),
)
Full source code for easy copy-paste
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: HomePage(),
),
);
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Container(
color: Colors.amber.shade300,
padding: EdgeInsets.all(16.0),
child: Text(
'Fear is the path to the dark side. Fear leads to anger. Anger leads to hate. Hate leads to suffering.',
style: GoogleFonts.titilliumWeb(
fontSize: 24.0,
color: Colors.grey[800],
),
),
),
),
),
);
}
}