Develop Reference

Aligning Rows and Columns in Flutter with Overflowing Long Text

I am styling a card and have these multiple icon elements and text in it. I am having issues arranging the rows and columns to solve this problem here;
Image 1
And this is what I am trying to achieve;
Image 2
Here is my code for that row giving me issues;
Row(
children: [
ClipRect(
child: Container(
height: 11,
width: 11,
child: Image.asset('assets/info.png'),
),
),
Container(
height: 48,
child: Column(
children: [
Text(
"Now that you've finished a plan, it's essential to measure your growth. We've included assessments and activities to do just that.",
style: GoogleFonts.poppins(
textStyle: TextStyle(
color: Color(0x80484848),
fontWeight: FontWeight.w400,
fontSize: 8,
),
),
),
],
),
),
],
),
I thought that text always align properly if fit into a column. I want the overflowing text to go over to the next line.

EDIT: to make the text wrap to the next line, wrap your Column with an Expanded():
Row(
children: [
ClipRect(
child: Container(
height: 11,
width: 11,
child: Image.asset('assets/info.png'),
),
),
Expanded(
child: Column(
children: [
Text(
"Now that you've finished a plan, it's essential to measure your growth. We've included assessments and activities to do just that.",
style: TextStyle(
overflow: TextOverflow.visible,
color: Color(0x80484848),
fontWeight: FontWeight.w400,
fontSize: 30,
),
),
],
),
),
],
)
To avoid an overflow, wrap your Container() with a Flexible() and your Text() with a FittedBox().
The docs on FittedBox():
Scales and positions its child within itself according to fit.
So, fittedBox will scale the font size to fit accordingly.
Your code should look like this:
Row(
children: [
ClipRect(
child: Container(
height: 11,
width: 11,
child: Image.asset(
'assets/info.png'),
),
),
Flexible(
child: Container(
height: 48,
child: Column(
children: [
FittedBox(
child: Text(
"Now that you've finished a plan, it's essential to measure your growth. We've included assessments and activities to do just that.",
style: TextStyle(
color: Color(0x80484848),
fontWeight: FontWeight.w400,
fontSize: 30,
),
),
),
],
),
),
),
],
)
Result (notice the text size scales):
As an alternative, you can also use a TextOverflow instead of FittedBox() which will add an ellipsis (...) to the overflowing text:
Row(
children: [
ClipRect(
child: Container(
height: 11,
width: 11,
child: Image.asset(
'assets/info.png'),
),
),
Flexible(
child: Container(
height: 48,
child: Column(
children: [
Text(
"Now that you've finished a plan, it's essential to measure your growth. We've included assessments and activities to do just that.",
style: TextStyle(
overflow: TextOverflow.ellipsis,
color: Color(0x80484848),
fontWeight: FontWeight.w400,
fontSize: 30,
),
),
],
),
),
),
],
)
Result (notice the elipsis):

How to change the expanded height in flutter?

I am new to flutter learning a flutter UI build from youtube. While I am using the expanded widget, I found the output is not what I want, just wanna ask is there any way to limit the height of the expanded widget.
This is my current UI looks like.
SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: Container(
alignment: Alignment.center,
height: 52,
width: 52,
decoration: BoxDecoration(
color: Color(0xFFF2BEA1),
shape: BoxShape.circle,
),
child: SvgPicture.asset("icons/icons/menu.svg"),
),
),
Text(
"\t\tMake Cents out of \n\t\tSolar",
style: Theme.of(context).textTheme.subtitle1!.copyWith(
fontWeight: FontWeight.w900,
fontSize: 38,
color: Colors.blueGrey[900]),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(29.5),
),
child: TextField(
decoration: InputDecoration(
hintText: "Search",
icon: SvgPicture.asset("icons/icons/search.svg"),
border: InputBorder.none,
),
),
),
),
Expanded(
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: .85,
children: <Widget>[
CategoryCard(
title: "Promotion of the day",
svgSrc: "icons/icons/Hamburger.svg",
press: () {},
),
CategoryCard(
title: "Promotion of the day",
svgSrc: "icons/icons/Hamburger.svg",
press: () {},
),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(20.0, 0, 0, 0),
child: Text(
"Solar Panel",
style: Theme.of(context).textTheme.subtitle1!.copyWith(
fontWeight: FontWeight.w900,
fontSize: 20,
color: Colors.black),
),
),
],
I wanna know is there any way to control the height of the expanded widget so that my container with text can connect right below the custom Category Card. Or should I use another widget instead of using the expanded widget?

By definition, the Expanded widget will fill up all the remaining screen space. If you instead want to use a set size, you can use a Container or SizedBox with their width and height parameters.
To get a better understanding of constraints in general, I suggest you check out this flutter documentation page all about constraints.

To set a minimum and maximum size (width and height) for a widget you can use ConstrainedBox widget, learn more about it here

You can't control the height of the Expanded widget. It takes all the space that is available on the screen. I suggest you to use SizedBox and explicitly provide the required height and set width as double.infinity.

I had same issue. I suggest ConstrainedBox widget to set minimum and maximum heights.

Container changes only height

The Problem is when I change width of the container of the UserMessage it does not change it it changes only the height.
I got this container it is basically a where the live chat is in.
child: Listener(
onPointerDown: _chatTouchedTrue,
onPointerUp: _chatTouchedFalse,
child: Container(
width: 130, //it only changes when I edit it here
height: 230,
child: AnimatedList(
key: listKey,
controller: _listScrollController,
initialItemCount: names.length,
itemBuilder:
(context, index, animation) {
return slideMessage(
context, index, animation);
})))
This is the Animation for how the new messages should slide in.
Widget slideMessage(BuildContext context, int index, animation) {
String userName = names[index];
String message = messages[index];
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(0, 1),
end: Offset(0, 0),
).animate(animation),
child: UserMessage(
userName: userName,
message: message,
));
}
And this is the child of the Animation (UserMessage(..)) this is how the text message will look at the end.
Padding(padding: EdgeInsets.all(1.3),
child: Container(
width: 10, //it does not change the width here
height: 17,
child: Align(
child: RichText(
text: TextSpan(children: <TextSpan>[
TextSpan(
text: widget.userName,
style: TextStyle(
decoration: TextDecoration.none,
fontWeight: FontWeight.bold,
fontSize: 9,
color: Color.fromRGBO(255, 250, 250, 100)),
),
TextSpan(
text: widget.message,
style: TextStyle(
decoration: TextDecoration.none,
fontWeight: FontWeight.bold,
fontSize: 9,
color: Color.fromRGBO(220, 220, 220, 100)),
)
]),
),
alignment: Alignment.center,
),
decoration: BoxDecoration(
color: const Color.fromRGBO(1, 1, 1, 0.2),
borderRadius: BorderRadius.circular(9),
),
));

your problem is pretty clear and you can read about it in the official documentation for the container class: https://api.flutter.dev/flutter/widgets/Container-class.html
When the parent of the container widget doesn't provide bounded constraints then the container wraps around its child to be as small as possible.
So in order to fix the issue and get what you want simply add SizedBox for the parent of your container and set the width and height in the SizedBox.

Flutter/Dart, Switch: Another exception was thrown: A RenderFlex overflowed by 99640 pixels on the right

I am currently trying to add a switch to the setting page of my android application. However, when I add the code and try to view it on the emulator it throws the following error:
Another exception was thrown: A RenderFlex overflowed by 99640 pixels on the right.
Code:
Container(
decoration: BoxDecoration (
color: Colors.white,
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.grey)
),
),
constraints: BoxConstraints (
maxHeight: ((width * ratio) * 0.1),
minWidth: width,
maxWidth: width,
),
child: Row(
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.only(left: (width*ratio) * 0.025),
child: Text('Highlight Identical Numbers', style: TextStyle(color: Colors.black87, fontSize: fontTextTwoScale, fontFamily: 'Roboto'))
)
),
Container(
child: Switch(value: null, onChanged: null,)
),
],
),
),
I am trying to set it up so that there is text that is aligned to the left of the screen and the switch is aligned to the right. I don't understand how a widget can be 99640 pixels overflowed. I dont see a size options for the Switch.

This should easily do the job. Customize the ListTile or wrap it inside a Container for your own customization.
ListTile(
title: Text("Setting Text One Title"),
trailing: Switch(value: true, onChanged: (bool x) {}),
)

Flutter Multiline for text

All I need is my text to be multi-line. Am giving the property of maxLines but its still getting RenderFlex overflowed error to the right as the next is not going to 2nd line,
Align( alignment: Alignment.bottomCenter,
child: new ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(20.0),
child: new Text(
"This is a very bigggggggg text !!!",textDirection: TextDirection.ltr,
style: new TextStyle(fontSize: 20.0, color: Colors.white),
maxLines: 2,
),
)
],
),
)

Short answer
All that is required for multi-line text, is that your Text() widgets' width is limited by a parent widget. For example:
SizedBox(
width: 150,
child: Text(
"This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
),
),
Long answer
Minimal working example + explanation:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold( //Text widgets, multi-line or not, need a Scaffold widget somewhere up the widget tree.
body: Row( //Widgets which help to display a list of children widgets are the 'culprit', they make your text widget not know what the maximum width is. In OP's example it is the ButtonBar widget.
children: [
Container(
width: 100, //This helps the text widget know what the maximum width is again! You may also opt to use an Expanded widget instead of a Container widget, if you want to use all remaining space.
child: Center( //I added this widget to show that the width limiting widget doesn't need to be a direct parent.
child: Text(
"This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
),
),
),
],
),
),
);
}
}
Extra
You also mentioned maxlines. This property limits the
maximum amount of lines. If this is what you want, I recommend you also play with the overflow property.
SizedBox(
width: 100,
child: Text(
"This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
UPDATE
I came across this video on the official Flutter channel which explains this issue quite well. They recommend using a LimitedBox widget.

Just wrap your text widget with Expanded as below
Expanded(
child: Text('data', maxLines: 4,
overflow: TextOverflow.ellipsis,
textDirection: TextDirection.rtl,
textAlign: TextAlign.justify,),
),

try this:
Expanded(
child: Text(
'a long text',
overflow: TextOverflow.clip,
),
),
in my implementation I put this inside a row and surrounded it with sized boxes on each side so that I have some space between my elements, why using expanded you may ask, well it's used to take as much space as possible so the text would look good in portrait or landscape mode.
and here is a full example on how to make it even react vertically not just horizontally:
Card(
child: InkWell(
onTap: (){},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
SizedBox(
height: 70, // default\minimum height
),
Container(
height: 44,
width: 44,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(22))),
),
SizedBox(
width: 15,
),
Expanded(
child: Text(
'the very long title',
overflow: TextOverflow.clip,
),
),
SizedBox(
width: 10,
),
Text(
'value', //some other text in the end of the card or maybe an icon instead
),
SizedBox(
width: 30,
),
],
),
),
),
)

I think you forgot to add overflow type.
You can use something like this:
Text(
"TOP ADDED",
textAlign: TextAlign.justify,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 18.0),
maxLines: 2,)

Use Expanded widget with column to achieve multiline text.
Expanded(child:
Column(crossAxisAlignment: CrossAxisAlignment.start ,
children: [
Text(food.title),
Text(food.price)
]
))

Just wrap the text widget in Flexible. As it only use space that it need.
After maxLines, it just cut to ellipsis.
If you want unlimited lines, just remove maxLines attribute. With the help of Flexible, it uses space which widget needs.
Flexible(
child: Text('Long Text', maxLines: 3,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.justify,
),
),

Best way to handle this:
Expanded(
child: Text(document['content'],
textAlign: TextAlign.start,
overflow: TextOverflow.ellipsis,
maxLines: 20,
))

You can use this trick.
Text( ''' This is very big text''' ),
Just wrap a text around three single quotes and flutter will format a text as per its length . No need to use max lines and text field.

Maybe try using TextField:
new TextField(
keyboardType: TextInputType.multiline,
maxLines: 2,
)

wrap your Text widget with AutoSizeText widget and also Flexible widget.
AutoSizeText adjust your text size as per the screen size
Flexible control your widget not to overflow outside
for get AutoSizeText you have to add dependency.
auto_size_text: ^3.0.0 - Example

Maxline is used for set how many lines you want to set or see.
Text(
"Name Safal Bhatia",
style: TextStyle(fontSize: 16),
maxLines: 3,)