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),
),
),
),
],
),
),
],
),
),
Related
This is my code..
I am getting error saying that 'BoxConstraints forces an infinite height.' and then a description and i am new to flutter i am not getting a way to solve this.
body:SingleChildScrollView(
child: Stack(
fit: StackFit.expand,
children: [
Image(
color: Colors.black12,
colorBlendMode: BlendMode.darken,
image: AssetImage('images/Alone.jpg'),
fit: BoxFit.cover,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Show('Alone is Stronger', 'y'),
],
)
],
),
),
This is my Show widget.
Widget Show(String x,String y){
return
Container(
margin: EdgeInsets.fromLTRB(10, 5, 10, 2),
width: 400,
decoration: BoxDecoration(
color: Colors.white10,
borderRadius: BorderRadius.circular(10),
),
padding: EdgeInsets.all(10),
child: Text(
'$x',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.yellowAccent,
),
),
);
}
Lot of questions already here with same problem but i am not getting where the problem is.
Thanks in advance
From your code-snippet, I can understand you are trying to have a background on body.
SingleChildScrollView provide infinite height and while Stack is its child and use parent size, it will get infinite height and through errors.
In your case, the widget structure will be
body: Stack(
fit: StackFit.expand,
children: [
Image(
color: Colors.black12,
colorBlendMode: BlendMode.darken,
image: AssetImage('images/Alone.jpg'),
fit: BoxFit.cover,
),
SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Show('Alone is Stronger', 'y'),
],
))
],
),
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'),
)
The problem I have is that BackdropFilter is applying the blur but on the top border of the child there is a white shadow (screenshot with black background).
The only way to remove it is to set sigmaY=0 but the blur is not homogeneous.
How can I fix it?
This is the code so far:
return Container(
color: Theme.of(context).accentColor,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(height: 5,),
SizedBox(
height: headerHeight,
child: Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: Image.network("https://coolbackgrounds.io/images/backgrounds/black/pure-black-background-f82588d3.jpg").image,//homeData.imageFromString.image,
fit: BoxFit.cover,
),
),
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 15.0),
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Row(),
),
CircleAvatar(
radius: 50,
backgroundColor: Colors.blueGrey,
backgroundImage: homeData.imageFromString.image,
),
SizedBox(
height: 10,
),
Text(
homeData.name,
style: TextStyle(fontSize: 30.0, color: Colors.white),
),
Expanded(
child: Row(),
),
],
),
),
),
),
),
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.
Hello, I'm using FadeInImage with a placeholder and an image, but the second image do not cover the complete parent, I'm using fit:BoxFit.cover but any way the result is not good. Anyone knows how to make it possible. This is my actual code. The 'document[_newsImage] is an URL took from CloudFirebase.
Widget _itemCard(BuildContext context, DocumentSnapshot document, int index) {
return new Padding(
padding: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 8.0),
child: new Card(
child: Column(children: <Widget>[
new Container(
height: 250.0,
child: new FadeInImage.assetNetwork(
placeholder: 'assets/images/esperanza.jpg',
image: document[_newsImage],
fit: BoxFit.cover,
)),
Container(
height: 150.0,
child: Padding(
padding: EdgeInsets.fromLTRB(16.0, 0.0, 16.0, 0.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
document[_newsTitle],
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 16),
),
Text(document[_newsDate])
]),
Text(
document[_textShortDescription],
style: TextStyle(color: Colors.grey, fontSize: 14),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
onPressed: () => onPressed(context, document),
child: Text(
_stringShowMore,
style: TextStyle(color: Colors.indigo),
)),
IconButton(icon: Icon(Icons.share), onPressed: null)
],
)
],
),
))
])));
}
Try these changes:
Size the container to fill the width
Add the height inside the FadeInImage
new Container(
width: MediaQuery.of(context).size.width,
child: new FadeInImage.assetNetwork(
placeholder: 'assets/images/esperanza.jpg',
image: document[_newsImage],
fit: BoxFit.cover,
height: 250.0,
)),