i want to know, how let the container height depend on length of text and cover it in container not in picture 2 if i setting text too long the text is come over container then how to fix it
on message by b-akused02 : it's short and still in height :100,
on message by b-akused01 : it's long over container
on message by b-akused03 : it's short and still in height :100,
Widget _buildCommentItem({#required CommentDetail commentDetail}) {
return Container(
height: 100,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 20.0,
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
height: 45, //height, //155,
width: 45, //width, //155,
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: DecorationImage(
image: NetworkImage(
commentDetail.otherUserProfileImageUrl),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(12),
),
),
),
Expanded(
flex: 8,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Wrap(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
FittedBox(
fit: BoxFit.cover,
child: Text(
commentDetail.otherUsername,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
Text(
commentDetail.comment,
style: TextStyle(
color: Colors.black,
),
),
],
),
),
),
],
),
),
),
SizedBox(
height: 20,
)
],
),
),
);
}
Wrap the given container in a Column and remove the height parameter from within.
Complete Code
Widget _buildCommentItem({#required CommentDetail commentDetail}) {
return Container(
child: Container(
child: Wrap(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
height: 45, //height, //155,
width: 45, //width, //155,
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: DecorationImage(
image: NetworkImage(
commentDetail.otherUserProfileImageUrl),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(12),
),
),
),
Expanded(
flex: 8,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Wrap(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
FittedBox(
fit: BoxFit.cover,
child: Text(
commentDetail.otherUsername,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
Text(
commentDetail.comment,
style: TextStyle(
color: Colors.black,
),
),
],
),
),
),
],
),
),
),
],
),
),
);
}
only create a Container without height.
Container(
width: 200, //for example
child: Text('any Text'),
)
Related
Im trying to create a custom listTile which can expand if it has multiple lines and maintain photo centered but my problem is AutosizeText isn't working and if I wrap AutosizeText with Expand an error apears.
I can use listTile class if there is a method to know if is tree line or not
Can you help me to solve this?
here is my code:
Card(
elevation: 8,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
SizedBox(
width: 70.0,
height: 70.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset(
'assets/images/photo.jpg',
width: 70,
height: 70,
fit: BoxFit.cover,
),
),
),
SizedBox(
width: 24,
),
Column(
children: [
AutoSizeText(
'{otherUser.name! otherUser.lastName!}',
maxLines: 1,
style: Theme.of(context).textTheme.bodyText1!),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
margin: const EdgeInsets.symmetric(horizontal: 2),
child: Image(
image: AssetImage(
'assets/icons/icon2.png'),
height: 20,
),
),
AutoSizeText(
otherUser.country![0],
maxLines: 2,
style: Theme.of(context)
.textTheme
.subtitle2!
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
margin: const EdgeInsets.symmetric(horizontal: 2),
child: const FaIcon(
FontAwesomeIcons.locationDot,
size: 20,
color: Colors.black45,
),
),
AutoSizeText(
otherUser.location!,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: Theme.of(context)
.textTheme
.subtitle2!
),
]),
])
],
),
],
),
Row(
children: [Icon(Icons.star_half_outlined), Text("4.5")],
)
],
),
),
This may be due to the default minimum and maximum size in AutoSizeText widget. Change the minSize and maxSize parameter to some range that you need.
NB: If found helpful, do upvote and mark as right answer, thanks.
I'm trying to code a web site with Flutter.
I have a screen like this:
The text in the middle is just a little bit below. I want to take it a little higher. How can I do that?
Codes:
body: ListView(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("indexBackground.gif"),
colorFilter: ColorFilter.mode(Colors.blue.withOpacity(0.4), BlendMode.dstATop),
fit: BoxFit.cover,
),
),
height: MediaQuery.of(context).size.height - 55,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("3D Modelleme Hizmeti", style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold, color: Colors.black),),
),
),
],
),
),
],
),
Thanks in advance for your help.
One way would be to use the EdgeInsets.fromLTRB constructor. In this example I increased the bottom padding to 30.0 which will raise up the text, you should adjust it to what works best for you.
padding: const EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 30.0),
Try this:
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("indexBackground.gif"),
colorFilter: ColorFilter.mode(
Colors.blue.withOpacity(0.4), BlendMode.dstATop),
fit: BoxFit.cover,
),
),
height: MediaQuery.of(context).size.height - 55,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"3D Modelleme Hizmeti",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
),
],
),
),
],
),
),
i've a card like this.
Actual card
but i want a card like this
What i want
My code is:
return Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0),
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: Container(
padding: EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Example text'),
Text("20-06-2021 - 13:00",
style:
TextStyle(fontSize: 15, fontStyle: FontStyle.italic)),
Text("Example text"),
Text("Example text"),
],
),
Column(
children: <Widget>[
Flag(
'FR',
height: 40,
width: 40,
replacement: Text('Error'),
),
],
),
],
),
),
);
Now, i have fixed height and width, i'm not able to obtain what i want because each attempt enlarge the card in height.(I want to keep the same height as the card above).The icons comes from the package flags (Flags package)
Instead of wrapping a Container in a Card. Try to Wrap a Row with Expanded in the Card. (I just changed the Container into padding)
Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0),
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: Padding(
padding: EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Example text'),
Text("20-06-2021 - 13:00",
style: TextStyle(
fontSize: 15, fontStyle: FontStyle.italic)),
Text("Example text"),
Text("Example text"),
],
),
),
Expanded(
flex: 1,
child: Container(
height: 100,
color: Colors.red,
),
)
],
),
),
),
try this
to let it fit the width and the height:
Flag('AD', height: double.infinity, width: double.infinity, fit: BoxFit.fill)
or maybe this:
Flag('AD', height: null, width: null, fit: BoxFit.fill)
I recommend to make this flag Expandable widget inside the row
wrapped your Flag inside SizedBox if you know what fixed size it is like this.
SizedBox(
height: 65,
width: 140,
child: Flag(
'FR',
replacement: Text('Error'),
fit: BoxFit.cover,
),
)
More about SizedBox Here
How to achieve the following design in Flutter?
I wanted to implement
but I get this result
I have three Containers. Main container inside that two more container placed horizontally And I want to position Icon to the top right corner of the main Container.
Below is my code
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(
top: widget.index != 0 ? 18 : 0,
),
child: Row(children: <Widget>[
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Container(
width: 354,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 3.0,
),
],
border: Border.all(
color: Colors.white,
width: 1,
)),
padding: EdgeInsets.only(left: 3),
child: Row(
children: <Widget>[
Container(
height: 85.0,
width: 85.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
color: Colors.grey.shade50,
),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Image(
image: AssetImage(
'${widget.restaurantListModelObj.restImage}'),
),
),
),
SizedBox(
width: 10.0,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
widget.restaurantListModelObj.restaurantName,'),
),
Icon(Icons.bookmark_border_outlined,
color: Colors.orange, size: 17),// this
icon i wanted to top right corner of main container.
],
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
widget.restaurantListModelObj.foodCategory,
),
SizedBox(
width: 30,
),
Text(
'${widget.restaurantListModelObj.distance} Km',
),
],
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.star, color: Colors.orange, size: 17),
Text(
'${widget.restaurantListModelObj.restReview}',
),
SizedBox(
width: 35,
),
Icon(Icons.watch_later_outlined, size: 17),
Text(
'${widget.restaurantListModelObj.distanceFromLocation} Mins',
),
SizedBox(
width: 35,
),
Text(
widget.restaurantListModelObj.restStatus,
),
],
),
),
],
)
],
),
),
),
),
]),
);
}
I don't understand how to do this.
There are many ways for doing that. If you want to have full control over the exact location of your widget. wrap the container in a Stack widget. Then put your icon in another container, and put it in the same Stack widget.
Once you do that, you can control the exact location of your widget using the Align widget. Here's an example:
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(
top: 18,
),
child: Row(children: <Widget>[
Stack(
children: [
Container(
width: 354,
height: 400,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.white,
border: Border.all(
color: Colors.grey,
width: 1,
)),
padding: EdgeInsets.only(left: 3),
),
Container(
width: 354,
height: 400,
child: Align(
alignment: Alignment(1, -1),
//Alignment(1, -1) place the image at the top & far left.
//Alignment (0, 0) is the center of the container
//You can change the value of x and y to any number between -1 and 1
child: Icon(Icons.bookmark_border_outlined,
color: Colors.orange, size: 17),
),
),
],
),
]),
);
}
Wrap restaurant name with Expended widget
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
"Restaurant Name",
),
),
Icon(Icons.bookmark_border_outlined),
],
);
There are many ways to achieve this. I have done as follows. Design your items as per desired. I had only worked on layout placement.
Container(
padding: EdgeInsets.all(10),
height: 110,
width: MediaQuery.of(context).size.width,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 3.0,
),
],
border: Border.all(
color: Colors.white,
width: 1,
)),
padding: EdgeInsets.only(left: 3),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 85.0,
width: 85.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
color: Colors.grey.shade50,
),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Image(
image: NetworkImage(
'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
),
fit: BoxFit.contain,
// image: AssetImage(
// '${widget.restaurantListModelObj.restImage}'),
// ),
),
),
// ),
),
SizedBox(
width: 10.0,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
children: [
Text("Restaurant Name",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
)),
],
),
SizedBox(height: 5),
Row(children: [
Text("Fast Food"),
SizedBox(width: 15),
Text("21 Km"),
]),
SizedBox(height: 5),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Row(children: [
Icon(Icons.star),
SizedBox(width: 5),
Text("4.3")
]),
SizedBox(width: 5),
Row(children: [
Icon(Icons.timer),
SizedBox(width: 5),
Text("56 mins")
]),
SizedBox(width: 5),
Row(children: [
Icon(Icons.calendar_today),
SizedBox(width: 5),
Text("OPen")
]),
])
]),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: Alignment.topRight,
child: Icon(Icons.bookmark, color: Colors.orange)),
)
]),
))),
I want to align the text in bottom left inside a LinearGradient container, as in the image, but as I am placing the column widget as a child of a container, it gets placed in the center. So, whats the correct code I need to edit for the result in the image.
main.dart
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget>[
Container(
width: 300,
height: 220,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Image(
fit: BoxFit.cover,
image: AssetImage('assets/image1.png'),
),
Positioned(
left: 0,
bottom: 0,
child: Container(
width: 285,
height: 110,
margin: EdgeInsets.only(left:8, bottom: 30),
padding: EdgeInsets.only(),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
gradient: LinearGradient(
begin: FractionalOffset.center,
end: FractionalOffset.bottomCenter,
colors: [
const Color(0XFF000000).withOpacity(.0),
const Color(0XFF000000).withOpacity(0.8),
],
)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Jerusalem",
style: TextStyle(
fontFamily: 'AirbnbCerealBold',
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.white),
),
Text(
"1,243 Place",
style: TextStyle(
fontFamily: 'AirbnbCerealBook',
fontSize: 14,
color: Colors.white),
),
],
),
),
),
],
),
),
],
),
),
Have you tried with the
mainAxisAlignment: MainAxisAlignment.end,
with the Column
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
It works.