I want to have a glass look background for my cards. When I pass the container in the card widget, the image is in the middle and too small.
Example:
Example of how it looks
My build method:
final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
return Card(
elevation: 6,
color: backgroundColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14),
),
child: InkWell(
onTap: () {},
child: Container(
width: width / 1.6,
height: height / 4,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/card/test.png'),
fit: BoxFit.fitWidth,
alignment: Alignment.topCenter,
),
),
child: Padding(
padding: const EdgeInsets.only(left: 16.0, right: 16.0, top: 15, bottom: 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(groupData.name, overflow: TextOverflow.ellipsis,),
Text(groupData.moduleId, overflow: TextOverflow.ellipsis,),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(child: Text(moduleData.name, overflow: TextOverflow.ellipsis,)),
Image.asset('assets/images/card/group_card_icon.png', height: 60, width: 60, fit: BoxFit.cover,)
],
)
],
),
),
),
),
);
Maybe it's not a code problem and your test.png image has empty transparent space surrounding the actual glass-like background, i just copy pasted your code but changed the fit to BoxFit.fill in your DecorationImage and it works well:
When you want to fill the image in a complete area you need to use fill, replace this with your decoration part of the decoration.
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/card/test.png'),
fit: BoxFit.fill,
alignment: Alignment.topCenter,
),
),
Related
I'm trying to create this design: https://www.uplabs.com/posts/public-transport-app-design?utm_source=extension&utm_medium=click&utm_campaign=muzli (the top of the first one)
But i'm having this issue: renderflex children have non-zero flex but incoming height constraints are unbounded
This is my code:
Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
child: Stack(
children: [
Positioned(
left: 0,
right: 0,
child: Container(
width: double.maxFinite,
height: MediaQuery.of(context).size.height / 1.5,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/abstract2.jpg"),
fit: BoxFit.cover)),
)),
Positioned(
left: 0,
top: 5,
child: SizedBox(
height: 20.0,
child: Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Expanded(child: TextField()),
Icon(Icons.person)
],
),
),
)),
The thing is when I remove replace the TextField() with Text(), the error disapear. I don't know what i'm doing wrong.
Can you help me please ? Thanks
try this.
Stack(
children: [
/// this is usefull cause it says that the stack will cover all of the screen
SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
///place your image here
Container(
height: MediaQuery.of(context).size.height*0.5,
decoration: const BoxDecoration(color: Colors.red),
// decoration: const BoxDecoration(
// image: DecorationImage(
// image: AssetImage("assets/images/abstract2.jpg"),
// fit: BoxFit.cover)),
),
///text field ned a width or to be flexible to work.
Positioned(
width: MediaQuery.of(context).size.width,
top: MediaQuery.of(context).size.height *0.3,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: TextFormField(
maxLines: 1,
keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
fillColor: StyleConstants.whiteColor,
filled: true,
border: StyleConstants.defaultBorder,
focusedBorder: StyleConstants.focusedBorder,
enabledBorder: StyleConstants.defaultBorder,
contentPadding: const EdgeInsets.symmetric(
vertical: 20.0, horizontal: 20.0),
),
),
), Icon(Icons.person)],
),
)
],
)
Try this buddy, I think the problem is caused by using expanded in sizedbox. I usually get this error when I use a TextField in a Row. In such cases, you need to wrap the TextField in a SizedBox or Container and define its width and height, or wrap it in a Flexible Widget. Then it is resolved.
child: SizedBox(
height: 20.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Expanded(child: TextField()),
Icon(Icons.person)
],
),
I have a problem, I want to add a background image for my quote app but when I try to add it the image not covering the whole screen even if I add the 'BoxFit.cover'.
That's what I have on the screen when I load:
And this is my code:
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("stuffandmore/Lwolf.jpg"),
fit: BoxFit.cover,
)
),
padding: EdgeInsets.only(left: 30,right: 30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Spacer(),
Image.asset(
"stuffandmore/quoteimg.png",
height: 30,
width: 30,
color: Colors.white,
),
SizedBox(
height: 30,
)
],
)
Someone can explain how can I fix that, I will be very greatful.
use both BoxFit.fill and container width double.infinte
Container(
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/test.jpg"),
fit: BoxFit.fill,
)),
I'm trying to make a home page and create this image container, of three images next to each other.
I tried doing it like this:
Container(
height: 100.0,
width: 150.0,
child: Row(
children:[
Image(image: AssetImage('')),
Column(
children:[
Image(image: AssetImage('')),
Image(image: AssetImage('')),
],
),
],
),
),
what I get looks like this
while what I want is this
Although the results are nothing like this. Any ideas on how to recreate my figma image?
On your Image widget, provide height and weight and also use fit: BoxFit.cover, for better view, then it will be good to go.
Your fine Container will be
Container(
height: 100.0,
width: 150.0 + 4, //for padding
color: Colors.green,
child: Row(
children: [
Padding(
// for rounded border
padding: const EdgeInsets.only(right: 2.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: const Image(
image: AssetImage('assets/images/p7_image_asset.jpeg'),
width: 150 / 2,
height: 100.0,
fit: BoxFit.cover,
),
),
),
Column(
children: [
Padding(
// space between items
padding: const EdgeInsets.only(left: 2.0, bottom: 2),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image(
image:
AssetImage('assets/images/p8_image_asset.jpeg'),
fit: BoxFit.cover,
height: 100 / 2 - 2, //-2 for padding
width: 150 / 2,
),
),
),
Padding(
padding: const EdgeInsets.only(left: 2.0, top: 2),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image(
image:
AssetImage('assets/images/p9_image_asset.jpeg'),
fit: BoxFit.cover,
height: 100 / 2 - 2, //-2 for padding
width: 150 / 2,
),
),
),
],
),
],
),
),
I will encourage to go flutter.dev and learn about these widgets. If you are wanting GridView checkflutter_staggered_grid_view
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 am making a drawer for my app and it has 2 containers in the column widget, there seems to be a line in between these containers that ruins the appearance, i have tried this for the upper container
margin: EdgeInsets.only(bottom: 0),
padding: EdgeInsets.only(bottom: 0),
and this for the lower container
margin: EdgeInsets.only(top: 0),
padding: EdgeInsets.only(top: 0),
still the line remains. How to remove that line, any help would be appreciated. Here is the code for the drawer:
Drawer(
child: Column(
children: <Widget>[
Container(
height: globals.heightofdevice * 0.30,
width: double.infinity,
margin: EdgeInsets.only(bottom: 0),
padding: EdgeInsets.only(bottom: 0),
child: Stack(
children: <Widget>[
Image.asset(
'./images/drawerbackground.jpg',
fit: BoxFit.fitWidth,
),
Positioned(
left: globals.widthofdevice * 0.07,
bottom: 20,
child: Text(
globals.username,
style: GoogleFonts.quicksand(
textStyle: TextStyle(
// fontWeight: FontWeight.w700,
fontSize: 32,
color: Colors.white,
),
),
),
)
],
),
),
Container(
height: globals.heightofdevice * 0.70,
margin: EdgeInsets.only(top: 0),
padding: EdgeInsets.only(top: 0),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.redAccent, Colors.white],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
child: Stack(children: <Widget>[
Image.asset(
'./images/uni.jpg',
fit: BoxFit.cover,
width: double.infinity,
),
Column(
children: <Widget>[
listTileBuilder(Icons.history, 'History'),
listTileBuilder(Icons.info_outline, 'About the app'),
listTileBuilder(Icons.account_circle, 'Logout'),
listTileBuilder(Icons.exit_to_app, 'Exit'),
],
),
]),
)
],
),
)
You can clearly see the problem in this picture
it must be something with the image or the stack
another example lets try
return Scaffold(
appBar: new AppBar(
title: new Text("Drawer"),
),
drawer: Drawer(
child: Column(
children: <Widget>[
Container(
color: Colors.yellow,
height: MediaQuery.of(context).size.height * 0.30,
width: double.infinity,
child: new Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("./images/drawerbackground.jpg"), fit: BoxFit.fill)),
child: new Align(
alignment: Alignment.bottomLeft,
child: new Padding (
padding: EdgeInsets.only(left: 20.0, bottom: 10.0),
child: Text(
"globals.username",
style: TextStyle(color: Colors.white),
),
),
),
),
),
Container(
height: MediaQuery.of(context).size.height * 0.70,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("./images/uni.jpg"), fit: BoxFit.fill),
gradient: LinearGradient(
colors: [Colors.redAccent, Colors.white],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
child: Column(
children: <Widget>[
listTileBuilder(Icons.history, 'History'),
listTileBuilder(Icons.info_outline, 'About the app'),
listTileBuilder(Icons.account_circle, 'Logout'),
listTileBuilder(Icons.exit_to_app, 'Exit'),
],
),
)
],
),
),
body: Container(
child: Text('Add Moka'),
),
);
The problem is most likely the fact that your top widget's image is set to fit: BoxFit.fitWidth,. Since it is trying to fill the horizontal plain fully it will stop once it has done so and not scale vertically to cover the remaining white space.
To fill the space of the container not taken by your image with a color so it isn't a white line you can try this (changes background to black):
Container(
height: globals.heightofdevice * 0.30,
width: double.infinity,
margin: EdgeInsets.only(bottom: 0),
padding: EdgeInsets.only(bottom: 0),
colors: Colors.black, // Added color
child: Stack(
...
),
),
Or to try and make the image take up all the available space of the container, regardless of the image's size and aspect ratio you can change the BoxFit to fill:
Image.asset(
'./images/drawerbackground.jpg',
fit: BoxFit.fill, // BoxFit fill
),