using this code i am getting text overflow error.
How to resolve this?
Scaffold(
backgroundColor: MyColor.bgLightColor,
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(20.0),
child:Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Row(
children: [
Container(
height: 20,
width: 24,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/current_outlet_icon.png'),
fit: BoxFit.fill,
)),
),
Text(
"Current Outlet",
style: textStyleWith12500(MyColor.darkGreyColor),
)
],
),
),
Expanded(
child: Row(
children: [
Image.asset(
"assets/location_pin.png",
height: 18,
width: 18,
color: MyColor.primaryRedColor,
),
Text(
"WTC Tower, Los Angeless sbdjkds jsbksdb kcbk", // here
style: textStyleWith12600(MyColor.blackColor),
),
],
),
)
],
)
],
)),
)
this is my text style and others textstyle is like this
TextStyle textStyleWith12500(Color color) {
return TextStyle(
fontWeight: FontWeight.w500,
fontSize: MyFontSizes.t12Size,
fontStyle: FontStyle.normal,
color: color);
This can be solve in two ways. One is using overflow attribute and another is wrapping with widget.
Overflow attribute with ellipse type will solve it with dots are end which means there are more text.
Wrapping with Flexible :
Flexible(
child: Text(
'WTC Tower, Los Angeless sbdjkds jsbksdb kcbk',
style: textStyleWith12600(MyColor.blackColor)
),
)
This will send long text to next line and will not get overflow issue. Hope it helps.
Related
i need to make a row inside of it i write the date in square then the tite of task and in the end of the row i added it a container in which i'm going to add the time .
but i get an error in the container
too many positional arguments: 0 expected, but 1 found.
can't we put a container inside the row ?
and as a design is it good ? how can i improve it i just need to show date task title and time
Widget build(BuildContext context) {
return Row(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(20.0), //or 15.0
child: Container(
height: 60.0,
width: 60.0,
color: Color(0xffFF0E58),
child:
Center(
child: Text('27 juillet ' ,
style:TextStyle(
fontWeight: FontWeight.bold,
fontSize:16, )
,),
)
),
),
SizedBox(
width: 20.0,
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Task tille',
style:TextStyle(
fontWeight: FontWeight.bold,
fontSize:16,
)
),
],
)
],
Container(
width: 40.0,
height: 20.0,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(30.0),
),
alignment: Alignment.center,
child: Text('8/34' , style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.bold,
),
),
) ,
No i just forget to close the ] of the row after the container that is the error
Okay, so your return type is Row(), that means, once the children: [Widgets here] is closed, you cannot add more widgets later. So my suggestion is to make the return type of 'Widget build' to Container() then add container's child as Column(), then use row within column's children.
I'm trying to fit text to the container with FittedBox, but it doesn't work. On device text goes to the right and it does not break to the next line. (On device I have right overflowed warning).
Do someone know what's wrong with this code? I think there is some issue with Row and Column combination so then FittedBox doesn't affect text, but I'm not sure.
Thanks.
class HomePage extends StatelessWidget {
final Greetings greetings = new Greetings();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
SafeArea(
child:
SizedBox(height: MediaQuery.of(context).size.height * 0.025)),
Center(child: greetings),
/*ListView(
children: [greetings],
)*/
],
),
);
}
}
class Greetings extends StatelessWidget {
#override
Widget build(BuildContext context) {
var bought = true;
var color;
if (bought) {
color = Colors.blue[700];
} else {
color = Colors.red;
}
return Container(
decoration: BoxDecoration(
color: color, borderRadius: BorderRadius.all(Radius.circular(10))),
height: MediaQuery.of(context).size.height * 0.40,
width: MediaQuery.of(context).size.width * 0.85,
child: Padding(
padding: new EdgeInsets.all(20),
child: Row(
//mainAxisAlignment: MainAxisAlignment.start, --> NOT NECESSARY
children: [
Column(
//mainAxisAlignment: MainAxisAlignment.start, --> NOT NECESSARY
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'hi',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
FittedBox(
fit: BoxFit.contain,
child: Text(
'kodsajhnidoasdoisahioasdohiasdhioúsadiophas',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.normal),
)),
],
)
],
)));
}
}
At first FittedBox does not break the text to the new line, it just decrease or increases the fontSize on it. secondly you are now providing any constraints for the FittedBox wrap it with a container and set its width.
Just use Flexible Widget to make it parent for Column
Flexible(
child: Column(
//...
));
Full Example:
Container(
decoration: BoxDecoration(
color: color, borderRadius: BorderRadius.all(Radius.circular(10))),
height: MediaQuery.of(context).size.height * 0.40,
width: MediaQuery.of(context).size.width * 0.85,
child: Padding(
padding: new EdgeInsets.all(20),
child: Row(
//mainAxisAlignment: MainAxisAlignment.start, --> NOT NECESSARY
children: [
Flexible(
child: Column(
//mainAxisAlignment: MainAxisAlignment.start, --> NOT NECESSARY
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'hi',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
FittedBox(
fit: BoxFit.contain,
child: Text(
'kodsajhnidoasdoisahioasdohiasdhioúsadiophas',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.normal),
)),
],
),
)
],
),
),
);
Row Widget causing the issue as it is taking full space horizontally, by adding Flexible it can shrink/grow according to text.
I'm trying to get my app polished and noticed an issue with the SliverChildList I'm using. When the Text inside is too long to be displayed I get an expection thrown.
How am I able to correctly wrap the Text (not cut)
As in my example most of the entries work just fine. For the elements that overflow I'd like to break the text to the next line and adapt the list element height.
Something simular to:
{ } Colombian White-Faced Capuchin
{ image } Monkey
{ } Cebus capucinus
I tried adding overflow: TextOverflow.ellipsis to the text element but it doesn't appear to work the way I'd like it to.
Code:
SliverList(
delegate: SliverChildListDelegate(
[
for (var animal in response)
GestureDetector(
onTap: () {
print('(DEBUG) Pressed on ${animal['id']} (${animal['name']})');
},
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 10),
child: Image.network(
animal['image_url'],
fit: BoxFit.cover,
width: 75,
height: 50,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(15, 10, 20, 10),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(animal['name'].toString(),
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold),
overflow: TextOverflow.ellipsis),
if (animal['latin_name'] != null)
Text(animal['latin_name'].toString(),
style: TextStyle(
fontStyle: FontStyle.italic)),
],
),
),
),
],
)),
],
),
)
Try wrapping your Text widget in a Flexible or Expanded widget.
I have this two items that once needs to appear in the middle but the other other needs to move to the bottom.
import 'package:flutter/material.dart';
class WelcomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'K',
style: TextStyle(
fontSize: 200,
color: Colors.white,
decoration: TextDecoration.none,
fontStyle: FontStyle.italic,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [Text('hello')],
)
],
),
);
}
}
This is how it looks.
I want to move the Hello Text to the bottom. How can I do that?
You need to use two things for that, to make it work more efficiently. These are:
Expanded Class -> This will provide space, that is, takes up the remaining space
Align class -> This will help you to align the item
Please Note: Align(), itself, cannot aligns, the item, unless space is given. If you just use the Align(), you will not see any change, cos Text('Hello') looks for space, but no space is there.
Code
Container(
width: double.infinity, // <-- Takes up total width of the device
height: double.infinity, // <-- Takes up the total height of the device
color: Colors.blue,
child: Column(
children: [
Expanded(
flex: 2, // <-- Flex takes care of the remaining space ratio
child: Center(
child: Text(
'K',
style: TextStyle(
fontSize: 200,
color: Colors.white,
decoration: TextDecoration.none,
fontStyle: FontStyle.italic,
),
)
)
),
Align(
alignment: Alignment.bottomCenter,
child: Text('Hello', style: TextStyle(color: Colors.white, fontSize: 17.0))
)
]
)
)
Result
If you don't want your K text to move on top, you would have to use Stack. This way, your widget inside can position themselves anywhere they want.
Stack(
alignment:Alignment.center,
children:[
Text("K"),
Align(
alignment:Alignment.bottomCenter,
child:Text("hello"),
),
]
),
Take a look at the stack widget here: https://www.youtube.com/watch?v=liEGSeD3Zt8
return Container(
color: Colors.blue,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Spacer(),
Text(
'K',
style: TextStyle(
fontSize: 200,
color: Colors.white,
decoration: TextDecoration.none,
fontStyle: FontStyle.italic,
),
),
Spacer(),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [Text('hello')],
)
],
),
);
how about this way? add two Spacer
I have a row with a steps and separators. Each step is wrapped in an Expand; the separator has a fixed size.
The Expanded causes the containers to have a fine white line between them
When i remove the Expanded, the lines are gone
Anybody know a fix or workaround?
The code looks similar to this
Row(
children: <Widget>[
Expanded(
child: Container(
height: height,
color: AppTheme.blue,
child: Center(
child: Text(
"Define",
style: TextStyle(
color: AppTheme.white,
fontSize: 13,
),
),
),
),
),
Container(
height: height,
width: height/2.0,
color: AppTheme.blue
),
Expanded(
child: Container(
height: height,
color: AppTheme.grey,
child: Center(
child: Text(
"Mix 1",
style: TextStyle(
color: AppTheme.black,
fontSize: 13,
),
),
),
),
),
Container(
height: height,
width: height/2.0,
color: AppTheme.grey
),
...
]
)
EDIT 1:
The reason why i am doing all this is that the final separator need to be custom pained.
I now do custom paint the steps, so the container is gone.
The code now looks similar to this
Expanded(
child: CustomPaint(
painter: StepPainter(
isActive: isActive,
height: height,
text: TextSpan(
text: text,
style: TextStyle(
color: isActive ? AppTheme.white : AppTheme.darkGrey,
fontSize: 13,
),
),
),
),
)
since you didn't provide the code of StepPainter, what if you just apply white border to the object?