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'),
],
))
],
),
Related
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),
),
),
),
],
),
),
],
),
),
In my mobile app I am expecting the tennis ball image to be there in right top corner
Image Expected
But currently it looks like this,
Image Current
the code is as below,
Expanded(
flex: 9,
child: Column(
children: [
Container(
height: 66,
decoration: BoxDecoration(
color: const Color(0xff3e4982),
borderRadius: BorderRadius.circular(12),
image: DecorationImage(
image: AssetImage(
'assets/transperent_tennis_ball_icon_green.png'),
),
),
),
]
),
)
Please advise how can I get this done?
Try below code hope its help to you. You used Stack widget and Positioned Widget for that. just replace my image with your image.
Center(
child: Stack(
children: [
Container(
padding: EdgeInsets.all(20),
height: 100,
width: 200,
decoration: BoxDecoration(
color: const Color(0xff3e4982),
borderRadius: BorderRadius.circular(12),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Submit Score',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
'Game Report',
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
],
),
),
Positioned(
right: -30,
top: -30,
child: Image.network(
'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
height: 100,
width: 80,
),
),
],
),
),
Your result screen->
you can use stack
Expanded(
flex: 9,
child: Column(
children: [
Container(
height: 66,
decoration: BoxDecoration(
color: const Color(0xff3e4982),
borderRadius: BorderRadius.circular(12),
),
child: Stack(
children: [
Positioned(
top:-25,
right:-25,
child: Container(
height: 66,
width:66,
decoration: BoxDecoration(
shape:BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage("https://picsum.photos/500/300?random=1"),
),
),
)
)
])
)]
),
),
just use stack widget to achive this design .
I want to make a design like following
I build the base layout with background image. Following is the code to achieve that. Now i want to put "Grocery store" Text on top of this image and other widgets. How can i do that ?
Widget build(BuildContext context) {
return Container(
height: 190.0,
width: size.width,
margin: const EdgeInsets.symmetric(
horizontal: 16.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(https://www.exampledomain.com/images/background.jpg),
fit: BoxFit.cover,
),
),
// child: ????
),
),
],
),
),
],
),
);}
child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(https://www.exampledomain.com/images/background.jpg),
fit: BoxFit.cover,
),
),
child: Text('Grocery store'),
//padding: <-- Using to shift text position a little bit for your requirement
),
Stack/Align is your friend.
Take a look here https://api.flutter.dev/flutter/widgets/Stack-class.html
Here is a basic example (based in your code):
Widget build(BuildContext context) {
return Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
alignment: Alignment.center,
color: Colors.red,
height: 190.0,
width: size.width,
margin: const EdgeInsets.symmetric(
horizontal: 16.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(
"http://www.exampledomain.com/images/background.jpg"),
//fit: BoxFit.cover,
),
),
),
),
],
),
),
],
),
),
),
Align(
alignment: Alignment.center,
child: Text("Grocery store"))
]
);
}
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'),
)
I have an image like this
and i need to add widgets upon this image. It should look like the contents are just on the mobile screen. I tried searching for a way but i dint get any. I tried using stack like this:
Container(
child: Stack(
children: <Widget>[
Positioned(
child: Container(
padding: EdgeInsets.fromLTRB(60, 110, 60, 90),
//body
),
),
Container(width: 1000,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/Images/transparentMobile.png'),
fit: BoxFit.fill)),
),
],
),
),
It worked correctly on my phone:
but on other phone it looks very different. How do i write a single code for multiple screens?
Finally i got a way to do it. Instead of working hard on the code, i just cropped the image into 3 parts :
top :
body:
bottom:
and added them to columns like this:
AspectRatio(
aspectRatio: 1/2,
child: Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/Images/Mobile/mobileTop.png'),
fit: BoxFit.fill
)
),
),
),
Expanded(
flex: 7,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/Images/Mobile/mobileBody.png',),
fit: BoxFit.fill
)
),
height: 100,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
automaticallyImplyLeading: false,
title: Text('My Application'),
),
body: Center(
child: Text(
'Hello World!',
style: TextStyle(color: Colors.black),
),
),
backgroundColor: Colors.white,
),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/Images/Mobile/mobileBottom.png'),
fit: BoxFit.fill
)
),
),
),
],
),
),
),
and the image now looks much similar on most of the devices now:
Thanks for your help!