I have a profile page layout as its seperated by 2 and 1 positioned for avatar picture. my down container color, ı cant set it seems not working ıdk why. here is my code below:
body: new Stack(
children: <Widget>[
new Column(
children: <Widget>[
new Container(
height: topWidgetHeight,
decoration: BoxDecoration(
image: new DecorationImage(image: new AssetImage("assets/9.jpg"),
fit: BoxFit.cover)
),
),
new Container(
color: Colors.red,
)
],
),
new Positioned(
child: new Container(
height: 150,
width: 150,
decoration: BoxDecoration(
image: new DecorationImage(image: new AssetImage("assets/0.jpg"),
fit: BoxFit.cover),
borderRadius: BorderRadius.all(Radius.circular(75.0)),
boxShadow: [
BoxShadow(blurRadius: 7.0, color: Colors.black)
],
),
),
left: (MediaQuery.of(context).size.width/2) - avatarRadius,
top: topWidgetHeight - avatarRadius,
)
],
)
the container is not appearing because you have not given any height and to container
please give it height and width and then try
Related
so i have a container that displays an image, and the image fitted to the container with fit:BoxFit.cover, here is the code:
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(
"assets/images/MojitoImage.png"),
),
),
),
the result of the code will looks like this
i just want to change the position of the image down a little bit to the bottom, so it can be looks like this (there is a little black space above the leaf)
any solution how to do that?
Try alignment: Alignment.topCenter
You can simply position the image with Stack and Position widget like this:
Container(
color: Colors.grey,
width: 80,
height: 80,
child: Stack(
alignment: AlignmentDirectional.center,
children: <Widget>[
Positioned(
bottom: 10.0,
right: 10,
left: 10,
child: Icon(Icons.receipt,
size: 50.0, color: Colors.greenAccent[400]), //Icon
),
],
),
),
I'm trying to create a list view which includes custom rows. Below is the source code I used to generate each List Tile. Somehow Container has unnecesary paddings.
return Container(
child: Row(
children: [
Column(
children: [
Container(
height: 100,
width: 100,
color: Colors.orange,
child: Image(
image: AssetImage('assets/images/poligon.png'),
)
),
// Line
Transform.rotate(
angle: 0.022218565326719023,
child: Container(
width: 1,
height: 37.99062075760125,
decoration: BoxDecoration(
border: Border.all(
color: const Color(0xff33ac0c),
width: 2
)
)
)
)
],
),
],
),
);
I am wondering if it is possible to resize an image that is inside of a BoxDecoration container and called by the AssetImage().
My code is:
Flexible(
child: Container(
height: size.height * .75,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
image: DecorationImage(
image: AssetImage('assets/img/washing.png'),
fit: BoxFit.scaleDown,
)),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
and follows...
The image is too big. I would like it small and in the top right corner.
Thank you.
Its size depends on your container Size. If you reduce of your container size then The image size automatically reduced. But you must use BoxFit.cover as fit
Here is the code sample -
return Scaffold(
appBar: AppBar(
title: Text('Help'),
),
body: Center(
child: Container(
height: MediaQuery.of(context).size.height * .5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
image: DecorationImage(
image: AssetImage(
'asset/images/download.jpg',
),
fit: BoxFit.cover,
),
),
),
),
);
If you want to developed it without Decorated image I can help you. Please share your sample UI, I will created for you
In my code, there is this CircleAvtar which I want to replace it with a big rectangular box. I am new to flutter I am finding it difficult to achieve this.
child: Card(
elevation: 3,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
child: Container(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(5),
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
10,
),
// border: Border.all(width: 0.5),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
color: whiteColor,
),
child: expertiseSearchModel.userImageURL.isEmpty
? CircleAvatar(
radius: 35,
child: SvgPicture.asset(
'assets/images/default_user_image.svg',
// height: screenUtil.setSp(80),
// width: screenUtil.setSp(80),
fit: BoxFit.contain,
),
)
: CircleAvatar(
radius: 35,
backgroundImage:
NetworkImage(expertiseSearchModel.userImageURL),
),
),
I want it to look like this :
If you can show us what your current code is giving the output maybe I can help you more. But As far as i understood this, you can simple use Image.Network() to show the image and remove the circular avatar
Try this, if it works if not lemme know I will edit it accordingly
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
color: whiteColor,
),
child: expertiseSearchModel.userImageURL.isEmpty
? CircleAvatar(
radius: 35,
child: SvgPicture.asset(
'assets/images/default_user_image.svg',
// height: screenUtil.setSp(80),
// width: screenUtil.setSp(80),
fit: BoxFit.contain,
),
)
: Image.network(expertiseSearchModel.userImageURL)
),
Inside your main container use the column as a child and put another container as a child and use the Image decoration property of the container to display pictures. You can change the border-radius of the child container to have those circular edges.
So I want to show a Pinterest style board in my app but without StaggeredGridList, but through the normal, Container and Row/Column widgets.
Here is an image:
So at first, I tried to use Expanded to make container with the higher height, take up the height and the other take up the width, but this approach doesn't work when you want pictures below each other. So please post your code as an answer below.
My Code:
Column(
children: [
Padding(
padding: const EdgeInsets.only(left: 20, right: 20, top: 15, bottom: 12),
// parent container housing all other widgets
child: Container(
height: 220,
child: Column(
children: [
// both the pics and colours
Expanded(
child: Row( // row
children: [
// vertical pic
Container( // first child
width: 180, // give it a width, it takes up the height of parent since it is wrapped with an expanded widget
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(
15.0,
),
image: DecorationImage(
image: NetworkImage(storiesList[0]),
fit: BoxFit.fill
)
),
),
// spacing between vertical pic and horizontal pic
SizedBox( // second child
width: 12,
),
// banner pic and colours
Expanded( // thrid child [consists a column with children ]
child: Column(
children: [
// banner pic
Container(
height: 165, // give it a height, it takes up the width of parent since it is wrapped with an expanded widget
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(
15.0,
),
image: DecorationImage(
image: NetworkImage(storiesList[1]),
fit: BoxFit.fitWidth
)
),
),
],
),
),
],
),
),
],
),
),
)
],
)
Thanks a lot!!