Text overflow error in flutter

Satheesh Guduri
2 min readMay 2, 2023

--

In this article, will know about how to fix the text over flow error when we use Text in the column.

First of all, will see with the simple example like below.

Row(
children: const [
Text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborumnumquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentiumoptio, eaque rerum! Provident similique accusantium nemo autem.")
],
),

here, Text with big string. If we run this code will get below out put.

To fix this issue we will be using Expanded widget like below.

Row(
children: const [
Expanded(child: Text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborumnumquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentiumoptio, eaque rerum! Provident similique accusantium nemo autem."))
],
),

Then the out put will like below.

Suppose, if we add the column in the row like below, then also we will be getting text overflow error though we added the expanded widget.

Row(
children: [
Column(children: const [
Text('Welcome'),
Text("Good morning, welcome to hyderabad"),
Expanded(child: Text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborumnumquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentiumoptio, eaque rerum! Provident similique accusantium nemo autem."))

],)
],
),

When you are using text with in the column, you need to add the expanded to the column not for the text like below.

Row(
children: [
Expanded(
child: Column(children: const [
Text('Welcome'),
Text("Good morning, welcome to hyderabad"),
Text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborumnumquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentiumoptio, eaque rerum! Provident similique accusantium nemo autem.")

],),
)
],
),

thanks for reading this article, if you like it please clap for me.

--

--

Satheesh Guduri
Satheesh Guduri

Written by Satheesh Guduri

Mobile App Developer and Trainer

No responses yet