I am trying to make my app responsive and I noticed that there is a problem in some screen sizes , I'm already using Expanded for the Container that including the question
And I tried using Expanded for Answers too and flex: 2; for the question and that's what I got
appPic2
What it should be like
Expanded(
child: Container(
width: double.infinity,
height: 220.0,
margin: EdgeInsets.only(
top: 5, bottom: 0, left: 30.0, right: 30.0),
padding: EdgeInsets.symmetric(
horizontal: 0.0, vertical: 0.0),
child: Center(
child: Column(
children: [
Text(
_questions[_questionIndex]['question'],
textDirection: TextDirection.rtl,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
fontFamily: "Tajawal",
color: Colors.white,
fontWeight: FontWeight.w400,
),
),
Answer Code
...(_questions[_questionIndex]['answers']
as List<Map<String, Object>>)
.map(
(answer) =>
Answer(
answerText: answer['answerText'],
answerColor: answerWasSelected
? answer['score']
? Colors.green[400]
: Colors.red[400]
: null,
),
and this is for answer in another file
InkWell(
onTap: answerTap,
child: Container(
padding: EdgeInsets.all(15.0),
margin: EdgeInsets.symmetric(vertical: 5.0, horizontal: 30.0),
width: double.infinity,
child: Text(
answerText,
),
),
),
);
i think the problem is you providing a height for the container which has the text as a child
and the text is long
so if you want the container to be with fixed height then you should wrap the column widget with singleChildScrollView
or if you want the container to take the question space , then remove the height property from the container and wrap the column with Expanded
Add
mainAxisSize: MainAxisSize.min
To the column widget. Now the column has no bounds
Related
I have the following tree: Scaffold > Column > Row > Container > Text.
I want the Text to wrap, and The Great Google in most cases told me that Expanded is what i need, but none of the below cases worked for me:
Row wrapped inside Expanded
Container wrapped inside Expanded
Text wrapped inside Expanded
All of the above have the same result.
Here's my code for the page's body:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF282B32),
body: Column(
children: <Widget>[
createRow(
context,
"https://i.stack.imgur.com/6Utrc.jpg?s=256&g=1",
"GuildProtect is a powerful, baterries-included moderation bot for your *safe* server!"
),
createDivider(),
createRow(
context,
"https://cdn.discordapp.com/avatars/967406876029501462/bd3c60dcf55c83fba41b15fba89f798a.webp?size=256",
"This is a very beatiful (because it's pink) avatar of this shitty website creator, enjoy!"
)
]
)
);
}
Row createRow(BuildContext context, String imageUrl, String text) {
const containerHeight = 256.0;
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
height: containerHeight,
padding: const EdgeInsets.only(left: 50, top: 25, bottom: 25),
child: Image.network(imageUrl),
),
Container(
alignment: Alignment.centerRight,
height: containerHeight,
padding: const EdgeInsets.only(right: 50, top: 25),
child: Text(
text,
style: TextStyle(
color: const Color(0xFFFFFCF9),
fontWeight: FontWeight.bold,
fontSize: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 1.3).fontSize,
),
),
),
]
);
}
Divider createDivider() {
return const Divider(
color: Color(0xFF131518),
indent: 30,
endIndent: 30,
thickness: 1,
height: 20,
);
}
}
I also saw some answers on SO recommending to cut the text or show ellipsis, but i dont need this behaviour, i need the text to actually wrap. This video's second solution shows exactly what i want to achieve (and no, the solution from there didn't help).
Any help is appreciated!
In createRow(), wrap the second Container() with Flexible().
Flexible(
child: Container(
alignment: Alignment.centerRight,
height: containerHeight,
padding: const EdgeInsets.only(right: 50, top: 25),
child: Text(
text,
style: TextStyle(
color: const Color(0xFFFFFCF9),
fontWeight: FontWeight.bold,
fontSize: DefaultTextStyle.of(context)
.style
.apply(fontSizeFactor: 1.3)
.fontSize,
),
),
),
)
Lemme know if it worked for your use case.
Why are you seeing this?.
Well, this is because the width of the widgets which you are trying to put, is greater then the screen size.
Possible solutions:
Try to add width property to the second Container in the Row
try to use .fit property, which will fit the image in it's father widget size.
I don't think that wrapping the container in Expanded wouldn't fix the situation as I see the text is too long (the screen has overflowed by 260 pixels).
Try to use TextOverflow as mentioned in link.
Please, let me know if any of my solutions works.
Anywhere you want to use a text and its length is not specified, you may encounter a folding error.
My suggestion is to use Expanded.
This is the output of your code snippet in my simulator
your code Output in mobile
It is enough to wrap the second Container with an Expanded widget (createRow) :
Row createRow(BuildContext context, String imageUrl, String text) {
const containerHeight = 256.0;
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
height: containerHeight,
padding: const EdgeInsets.only(left: 50, top: 25, bottom: 25),
child: Image.network(imageUrl),
),
--> Expanded(
child: Container(
alignment: Alignment.centerRight,
height: containerHeight,
padding: const EdgeInsets.only(right: 50, top: 25),
child: Text(
text,
style: TextStyle(
color: const Color(0xFFFFFCF9),
fontWeight: FontWeight.bold,
fontSize: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 1.3).fontSize,
),
),
),
),
]
);
}
and output:
--> after Wrap Container with Expanded Widget
It is noteworthy that this part of your work is not responsive.
Probably, the texts are too big in my emulator because of the difference made by the DefaultTextStyle.of(context) class.
Anyway, I hope it solved your problem.
full code:
I used MediaQuery for setting fontSize Because no details are provided from the content of the defaultTextStyle class.
import 'package:flutter/material.dart';
class TstPage extends StatelessWidget {
const TstPage({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF282B32),
body: Column(
children: <Widget>[
createRow(
context,
"https://i.stack.imgur.com/6Utrc.jpg?s=256&g=1",
"GuildProtect is a powerful, baterries-included moderation bot for
your *safe* server!"
),
createDivider(),
createRow(
context,
"https://cdn.discordapp.com/avatars/967406876029501462/bd3c60dcf55c83fba41b15fba89f798a.webp?size=256",
"This is a very beatiful (because it's pink) avatar of this shitty
website creator, enjoy!"
)
]
)
);
}
Row createRow(BuildContext context, String imageUrl, String text) {
const containerHeight = 256.0;
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
height: containerHeight,
padding: const EdgeInsets.only(left: 50, top: 25, bottom: 25),
child: Image.network(imageUrl),
),
Expanded(
child: Container(
alignment: Alignment.centerRight,
height: containerHeight,
padding: const EdgeInsets.only(right: 50, top: 25),
child: Text(
text,
style: TextStyle(
color: const Color(0xFFFFFCF9),
fontWeight: FontWeight.bold,
fontSize: MediaQuery.of(context).size.width*0.04,
),
),
),
),
]
);
}
Divider createDivider() {
return const Divider(
color: Color(0xFF131518),
indent: 30,
endIndent: 30,
thickness: 1,
height: 20,
);
}
}
I am trying to figure out why my Text appears in the top Center of the container when i did not used the Center Widget as the parent widget for Text...
Card(
child: InkWell(
child: Container(
color: Colors.grey[700],
width: 380,
height: 100,
child: Column(children: [
Padding(
padding: EdgeInsets.only(top: 6),
),
Text(
'16:00 - 18:00',
style: TextStyle(
fontFamily: 'Spartan',
fontSize: 30,
color: Colors.yellow[600]),
),
])),
),
elevation: 2.0,
)
The Column widget has alignment on his own. Try changing it's crossAxisAlignment property to .start to align the Text to the left, or .end to do it to the right
Column(
...
crossAxisAlignment: CrossAxisAlignment.start,
...
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
I am very new to flutter development. Currently learning Row, Column, Expanded UI stuffs. I want the row to be in this fashion Image of Row I need to achieve and this is what I am getting currently Output of my code, this is my code :`
Widget drawerTiles(String tileIcon, String tileText, IconData tileRightIcon) {
return Padding(
padding: const EdgeInsets.only(top: 20, left: 16, right: 32.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CircleAvatar(
radius: 14,
backgroundColor: Hexcolor('#0565ac'),
child: Padding(
padding: EdgeInsets.all(0),
child: SvgPicture.asset(
tileIcon,
color: Colors.white,
),
),
),
Text(
tileText,
style: TextStyle(
fontSize: 12, fontWeight: FontWeight.w600, color: Colors.black),
),
Icon(tileRightIcon)
],
),
);
}
`
It is a custom widget as you can see and I am passing the necessary parameters for it. The issue is with alignment probably. How do I solve this?
you can achieve that easily using ListTile widget
ListTile widget
I need a Container with some text in to auto expand. I have an API call, which can be anything from 5 words to 500 words. I don't want to just have 1 fixed size that's huge, but contains 10 words.
I have tried Expanded() and SizedBox.Expand(), but I might be using them wrong
Card(
elevation: defaultTargetPlatform ==
TargetPlatform.android ? 5.0 : 0.0,
child: Column(
children: <Widget>[
Container(
margin: const EdgeInsets.all(0.0),
padding: const EdgeInsets.all(2.0),
decoration: BoxDecoration(color: Colors.black),
width: _screenSize.width,
height: 250,
child: Column(
children: <Widget>[
Container(
color: Colors.black,
width: _screenSize.width,
height: 35,
child: Padding(
padding: const EdgeInsets.only(
left: 15, top: 11),
child: Text("Title".toUpperCase(),
style: TextStyle(
color: Colors.white
),
),
),
),
Container(
color: Colors.white,
width: _screenSize.width,
height: 210,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8, bottom: 5),
child: Text("Title of expanding text", style: TextStyle(
fontSize: 25,
),
),
),
Text("Expanding text", style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.w800
),),
],
),
),
],
),
),
],
),
),
I just need the Container to expand, but stay small/get bigger
Have you tried not specifying height at all? The Container should wrap according to the child in this case.
Otherwise, the widget has a child but no height, no width, no
constraints, and no alignment, and the Container passes the
constraints from the parent to the child and sizes itself to match the
child.
Above is an extract from the official flutter documentation for Container.
Here is the official flutter documentation link.
You can use FittedBox, this will resize your text according to available area.
You can use it like this :
FittedBox(child: Text('...............Your text...............'));
I would suggest you to use Constraints...this will set Container height according to the Text child's requirement. Please see the example...
Container(
constraints: BoxConstraints(
maxHeight: double.infinity,
),
child: Column(
children: [
Text(
'Hello flutter...i like flutter...i like google...',
softWrap: true,
style: TextStyle(
color: Colors.white, fontSize: 20 , ),
),],),)
we just neeed to add mainAxisSize: MainAxisSize.min, properties inside child Column or Row where the child is set to Container
for example
AnythingYourWidget(
child: Container(
child: Column( // For Example Column
mainAxisSize: MainAxisSize.min, // these properties following the children content height available.
children: [
// YourWidget
]
)
)
),
I too had a container with a text widget inside that would not scale as the text increased in character count. Make the widget tree Container -> IntrinsicWidth -> Text/TextField and it seems to play nicely for me.
IntrinsicWidth will scale the size of the container to its child.