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?
Related
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.
In appBar I have a container which is responsible for displaying text (it could be 5 chars or even 100). And I want to adjust width of container based on text. For example for 5 chars container should show text and should be a little bigger than text (I will add paddings later), but for 100 chars container should take all possible space and show text with dots.
Currently I have two solutions:
The first one (Without spacer() in tree) is expanding container always to the biggest possible width (like I said, I don't need this big container for short texts)
The second one (with spacer() in tree) is always displaying container with 1/3 width of appbar (Did someone know why it's always the same width? It's kind of interesting).
return Scaffold(
appBar: AppBar(
titleSpacing: 10,
centerTitle: false,
automaticallyImplyLeading: false,
title: SizedBox(
width: MediaQuery.of(context).size.width,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(height: 40, width: 40, color: Colors.amberAccent),
const SizedBox(width: 10),
const Text("Some Text"),
const SizedBox(width: 10),
Expanded(
child: Container(
color: Colors.purpleAccent,
height: 40,
child: const Center(
child: Text(
"text",
overflow: TextOverflow.ellipsis,
softWrap: true,
),
),
),
),
],
),
),
),
body: Container(),
);
So, how can I adjust width of this container to text inside?
Update:
I don't know if I explained it correctly, because your answers weren't related with my question 😁 So I will try again:
I want the last one container to take full possible width if text is long and for shorten texts just width to cover background behind text.
Here is long text: (It should be like that)
Here is short text: (Container should be smaller)
You should use constraints: BoxConstraints(maxWidth:), property of Container.
Please go with below code.
Container(
color: Colors.red,
padding: const EdgeInsets.all(20.0),
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.7,
),
child: Text('Hello', style: TextStyle(color: Colors.black)),
),
Spacer(),
Flexible(
child: Container(
color: Colors.purpleAccent,
height: 40,
child: const Center(
child: Text(
"Long Textttttttttttttttttttt",
overflow: TextOverflow.ellipsis,
softWrap: true,
),
),
),
),
Your result will be like below screenshot.
I implement another text for checking dynamic width of container.
Container(
color: Colors.red,
padding: const EdgeInsets.all(20.0),
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.7,
),
child: Text('Hello World', style: TextStyle(color: Colors.black)),
),
Spacer(),
Flexible(
child: Container(
color: Colors.purpleAccent,
height: 40,
child: const Center(
child: Text(
"Long Textttttttttttttttttttt",
overflow: TextOverflow.ellipsis,
softWrap: true,
),
),
),
),
For This You can Use :
Flexible Widget:
Example:
Flexible(
child: Container(
color: Colors.green,
)
),
or Wrap Widget :
Example :
Card(
margin: const EdgeInsets.only(top: 20.0),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
Text(
'Categories',
style: TextStyle(fontFamily: 'MonteSerrat', fontSize: 16.0),
),
Wrap(
children: <Widget>[
_checkBox('Gaming'),
_checkBox('Sports'),
_checkBox('Casual'),
_checkBox('21 +'),
_checkBox('Adult'),
_checkBox('Food'),
_checkBox('Club'),
_checkBox('Activities'),
_checkBox('Shopping')
],
)
],
),
));
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 have a Grid Tile made by this code:
child: GridTile(
child: Hero(
tag: "${item}",
child: setIcon(item)
footer: Container(
padding: EdgeInsets.all(8.0),
height: 50,
color: Colors.white70,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
item.elemento == null
? item.video['nome']
: item.elemento.name,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Theme
.of(context)
.textTheme
.caption
.color,
),
),
],
),
),
),
),
It gives me this result :
How could I adapt my text to show the entire text (without '...')? As you can see, it shows only some characters, I wanna show all the word. How could I do this?
UPDATE
With this code it still equal the photo
footer: Container(
padding: EdgeInsets.all(8.0),
color: Colors.white70,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
item.elemento == null
? item.video['nome']
: item.elemento.name,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Theme
.of(context)
.textTheme
.caption
.color,
),
),
)
],
),
),
And with this code it throws line 1785 pos 12: 'hasSize'
footer: Container(
padding: EdgeInsets.all(8.0),
color: Colors.white70,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
item.elemento == null
? item.video['nome']
: item.elemento.name,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Theme
.of(context)
.textTheme
.caption
.color,
),
),
)
],
),
),
Check out this example
// Add this widget as a parent to the text widget.
Expanded(
child: Text(
'asdfbnasdfmlqkw asknfwa wfn iwqf wfnwf qwoif qwoif qwef wfoiqwefnwefwq ',
style: TextStyle(
color: Theme.of(context).textTheme.caption.color,
),
),
),
remove
overflow: TextOverflow.ellipsis,
from the text widget parameters
just add the expanded widget as a parent to the text widget as shown below
I strongly recommend AutoSizeText, loved the package
AutoSizeText(
text,
//dont set it, will resize the text to fit up to two lines
// overflow: TextOverflow.visible,
//set how many lines your text can have
maxLines: 2,
//set hoow big text can be
maxFontSize: 30,
//set how small the text can be..
minFontSize: 14,
),
I am trying to make my UI scrollable but when i add the SingleChildScrollView i get this white screen not showing anything at all.I should erase the Column from the begining?Use a container?I already search on internet but i don't know what to add.
Here is my code, please tell me what i can erase or add to make it work ..
class _UserProfilesState extends State<UserProfiles> {
#override
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Expanded(
child: Stack(
children: <Widget>[
Padding(
padding:
EdgeInsets.symmetric(horizontal: 10.0, vertical: 40.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back),
iconSize: 30.0,
color: Colors.black,
onPressed: () => Navigator.pop(context),
),
])),
Positioned(
left: 24,
top: MediaQuery.of(context).size.height / 6.5 - 28,
child: Container(
height: 84,
width: 84,
//profilepic
child: CircleAvatar(
radius: 10,
backgroundImage: NetworkImage(widget.avatarUrl != null
? widget.avatarUrl
: "https://icon-library.com/images/add-image-icon/add-image-icon-14.jpg"),
),
),
),
Positioned(
right: 24,
top: MediaQuery.of(context).size.height / 6.5 + 16,
child: Row(
children: <Widget>[
Container(
height: 32,
width: 100,
child: RaisedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => ChatScreen(
serviceProviderId:
widget.serviceProviderId,
userName: widget.userName,
avatarUrl: widget.avatarUrl,
)));
},
color: Colors.black,
textColor: Colors.white,
child: Text(
"Message",
style: TextStyle(fontWeight: FontWeight.bold),
)),
),
SizedBox(
width: 16,
),
Container(
height: 32,
width: 32,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://lh3.googleusercontent.com/Kf8WTct65hFJxBUDm5E-EpYsiDoLQiGGbnuyP6HBNax43YShXti9THPon1YKB6zPYpA"),
fit: BoxFit.cover),
shape: BoxShape.circle,
color: Colors.blue),
),
],
),
),
Positioned(
left: 24,
top: MediaQuery.of(context).size.height / 4.3,
bottom: 0,
right: 0,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(widget.userName,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 22,
)),
SizedBox(
height: 4,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
widget.address == "default"
? "No Address yet"
: "${widget.address}",
style: TextStyle(
color: Colors.black,
fontSize: 12,
),
)),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"${widget.categoryName}",
style: TextStyle(
color: Colors.black,
fontSize: 12,
),
)),
],
),
))
],
))
],
),
),
);
}
}
Using Spacer() might also cause this issue
The reason why your UI became white is that SingleChildScrollView allows it child to take as much space as possible. In your Column, one of your children is Expanded, Expanded tries to take as much space as possible. You are making your UI take an infinite amount of space because of that. That's the reason why you are seeing a white screen. The solution here would be to remove Expanded.
according to me and the knowledge I have this happened because the singlechildscrollview here tries to take as much height as it can take so It is creating an issue to solve this wrap the singlechildscrollview in a container and give height&width to the container it solved in my case
Thanks...
I faced similar issues, but after much research I got it working, by ensuring that the body of the scaffold be a Container that defines it's height and width, or Column. After which you can wrapped your any of these with a SingleChildScrollView.
However, in an attempt to insert an Expanded widget as child element, the expanded widget will look for bounded heights of it's parents/root element. And if it doesn't found any, it will thrown an error. A good example is if the root element is a column or a container with an unbounded height. Which is your case, looking at your code