I want to align the text over the image to the bottomLeft corner, but even aligning it to the bottomLeft it still stays at topLeft corner. So, help me to know what's wrong or missing in my code to acheive the following image text layout.
My output
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget>[
Container(
width: 300,
height: 220,
alignment: Alignment.bottomLeft,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/image1.png'),
fit: BoxFit.cover),
),
child: Column(
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),
),
],
),
),
Container(
width: 300,
height: 220,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/image3.png'),
fit: BoxFit.cover),
),
),
],
),
),
Use a stack with fixed height and width, then use a Positioned/Align/ any absolute positioning widgets to place anywhere in the box. Beware the stack order is last child is first on screen
The Stack widget will place widgets on top of each other with no responsiveness to each other only to the parent Stack - like Absolute child to relative parent in CSS/HTML
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(
bottom: 0,
left: 0,
child: Column(
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),
),
],
),
),
],
),
),
],
),
)
Related
I want to display the text under the images. I am able to see the Images and text, but My text is overflowing. I want to display it on each text under each image. Below is my code.
What should I do to solve this situation.
Widget firstStyleRow(String ImgPath1, String ImgPath2, String avatarImg) {
return Container(
height: 250.0,
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Row(
children: [
Container(
height: 250.0,
width: (MediaQuery.of(context).size.width - 30.0) / 2,
child: Column(
children: [
Container(
height: 125.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage(ImgPath1),
fit: BoxFit.cover,
),
),
),
SizedBox(
height: 15.0,
),
Text(
'i like the wy to show more item',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
height: 30.0,
width: 30.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: AssetImage('assets/chris.jpg'),
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'mon hll',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
Text(
'10:28 pm',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
],
),
],
),
],
),
),
SizedBox(
width: 10.0,
),
Container(
height: 350,
width: (MediaQuery.of(context).size.width - 30.0) / 2,
child: Container(
height: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage('assets/letter.jpeg'),
fit: BoxFit.cover,
),
),
),
),
SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
'i hvxxxx',
style: TextStyle(
fontSize: 50,
),
),
),
],
),
);
}
Try below code hope its help to you.add your inside row widget wrap it with Expanded or Flexible, just change my images with your images
Container(
height: 250.0,
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Row(
children: [
Expanded(
child: Container(
height: 250.0,
width: (MediaQuery.of(context).size.width - 30.0) / 2,
child: SingleChildScrollView(
child: Column(
children: [
Container(
height: 125.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: NetworkImage(
'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png'),
fit: BoxFit.cover,
),
),
),
SizedBox(
height: 15.0,
),
Text(
'i like the wy to show more item',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Container(
height: 30.0,
width: 30.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: NetworkImage(
'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png'),
),
),
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'mon hll',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
Text(
'10:28 pm',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
],
),
),
),
),
SizedBox(
width: 10.0,
),
Container(
height: 350,
width: (MediaQuery.of(context).size.width - 30.0) / 2,
child: Container(
height: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: NetworkImage(
'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png'),
fit: BoxFit.cover,
),
),
),
),
SizedBox(
height: 5,
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
'i hvxxxx',
style: TextStyle(
fontSize: 50,
),
),
),
),
],
),
),
Your result screen->
I have used a FittedBox() for Text widget and the issue is I could not set font size of my choice. I have tried some specific font sizes but the font remains same. Here is the screenshot of UI I am talking about Image1, highlighted with blue color.
This is the code snippet.
Container(
color: Colors.black,
width: double.infinity,
constraints: BoxConstraints(minHeight: 30),
padding: EdgeInsets.symmetric(horizontal: 5),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
color: Colors.blue,
child: FittedBox(
fit: BoxFit.contain,
child: Text(
'Qty',
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.white,
),
),
),
),
),
Container(
width: 10,
child: VerticalDivider(
color: Colors.white,
),
),
Expanded(
flex: 2,
child: Container(
alignment: Alignment.center,
// color: Colors.blue[200],
child: FittedBox(
fit: BoxFit.contain,
child: Text(
'Description',
style: TextStyle(
color: Colors.white,
// fontSize: textSize,
),
),
),
),
),
Container(
width: 10,
child: VerticalDivider(
color: Colors.white,
),
),
Expanded(
child: Container(
//width: MediaQuery.of(context).size.width * 0.07,
alignment: Alignment.center,
child: FittedBox(
fit: BoxFit.contain,
child: Text(
'Price',
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
),
),
),
),
Container(
width: 10,
child: VerticalDivider(
color: Colors.white,
),
),
Expanded(
child: Container(
// width: MediaQuery.of(context).size.width * 0.07,
alignment: Alignment.center,
child: FittedBox(
fit: BoxFit.contain,
child: Text(
'Extend',
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
),
),
),
),
],
),
),
I have also tried to reduce the widget height using BoxConstraints property but it is also not working. Anyone help me please to solve this issue.
I want to make my text centered inside of a Stack widget. This is what I have attempted so far. Right now, it's to the left on top of the image and that's not where I want it to be. I've tried using the Align widget and the Center widget but to no avail. What am I doing wrong?
Flexible(
child: Padding(
padding: const EdgeInsets.only(left: 8,top: 8,bottom: 8,right: 8),
child: Stack(
children: <Widget>[
Wrap(
children: <Widget>[
Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
height: 100,
),
],
),
Container(
width: MediaQuery.of(context).size.width/2,
height: 100,
child: Center(
child: Wrap(
children: <Widget>[
Center(
child: Container(
height: 100,
width: MediaQuery.of(context).size.width/2,
child: Align(
alignment: Alignment.center,
child: Text(
"BOOKS AND BOOKLETS",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
),
),
],
),
),
),
Any option to make this text in center
Expanded(child: Card(
child: Container(
child: Center(
child: Stack(
children: <Widget>[
Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
height: 100,
),
SafeArea(child: Text("asdad"))
],
),
),
),
))
Problem identifed if text size is small (means "abc") it is working but if text size is large(measn "abc abc abc acb acb abc") it is not workgingHow to solve this issue?
You can try it:
Container(
width: 500,
height: 100,
child: Stack(
children: <Widget>[
Image.network(
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
height: 100,
width: 500,
),
Align(
alignment: Alignment.center,
child: Text(
"BOOKS AND BOOKLETS",
style: TextStyle(
color: Colors.white,
fontSize: 11,
fontWeight: FontWeight.bold),
),
)
],
),
)
Solved
Expanded(
child: Card(
child: Container(
child: Center(
child: Stack(
children: <Widget>[
Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
height: 100,
),
Positioned.fill(
child:Center(child:Align(
child: Text("BOOKS AND BOOKLETS",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18,color: Colors.white),textAlign: TextAlign.center,),
alignment: Alignment.center,
)
),
)
],
),
),
),
),
),
I want at it by a different approach, what if you used a Container widget and decorate it using a background image? Then, you can avoid using a Stack widget altogether.
Here's the minimal code:
return Padding(
padding: const EdgeInsets.all(8),
child: Container(
height: 500,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
),
),
),
child: Center(
child: Text(
"hi",
style: TextStyle(color: Colors.white, fontSize: 56),
),
),
),
);
Use textAlign: TextAlign.center inside your Text Widget
using alignment: Alignment.center inside your Container Widget could also help
No need to use so many widgets just put Text widget inside Container Widget
and use alignment property of both widgets
that should resolve the issue.
Container(
width: MediaQuery.of(context).size.width/2,
height: 100,
alignment: Alignment.center,
child: Text(
"BOOKS AND BOOKLETS",
textAlign: TextAlign.center
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
)
I want this result:
I am unable to get the background text to look how I want.
I have tried overflow.clip and other overflows. I am getting overflow error if I try to do that.
My current code produces this:
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
color: Color(0xFF86C232),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(15.0)),
height: 130,
width: 250,
//color: Color(0xFF86c232),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Students',
style: TextStyle(fontSize: 28)),
Text('256',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold)),
Text(
'256',
style: TextStyle(
fontSize: 154, fontWeight: FontWeight.bold),
overflow: TextOverflow.clip,
softWrap: false,
maxLines: 1,
)
],
),
),
),
I'd rather use CustomPainter, but as a quick solution this works:
Container(
height: 200,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.red,
),
child: Stack(
overflow: Overflow.clip,
fit: StackFit.expand,
alignment: Alignment.center,
children: <Widget>[
Positioned(
child: Text(
'test',
style: TextStyle(fontSize: 120, color: Colors.black.withOpacity(0.2)),
),
bottom: -60,
),
Center(
child: Text('test', style: TextStyle(fontSize: 40))
),
],
),
)
I want to align the text to the center inside the image as shown in the image.
I recently started working with flutter please help me to achieve the layout.
Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.fromLTRB(24, 20, 24, 0),
child: Stack(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Image.asset(
'assets/images/car.jpg',
fit: BoxFit.cover,
),
),
Positioned.fill(
child: Align(
alignment: Alignment.center,
child: Text(
'Cars',
style: TextStyle(
fontFamily: 'Welcome',
fontSize: 30,
color: Colors.white),
),
),
)
],
),
)
With the help of the above code, the text is appearing in the bottom-center instead of the center.
return Container(
width: MediaQuery
.of(context)
.size
.width,
margin: EdgeInsets.fromLTRB(24, 20, 24, 0),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Image.asset(
Images.image1,
fit: BoxFit.cover,
),
),
Text(
'Cars',
style: TextStyle(
fontFamily: 'Welcome',
fontSize: 30,
color: Colors.white),
)
],
),
);