I want to add text inside circular box decoration. I have the following code but it the text is half inside and half outside the circle. How can I tweak it to ensure that the text always stays inside the circle? Also, how can I make the circle big?
child: Container(
padding: const EdgeInsets.all(12),
child: Text(
title,
style: TextStyle(fontWeight: FontWeight.bold,fontSize: 16),
),
decoration: BoxDecoration(
shape:BoxShape.circle,
image: DecorationImage(
image: returnImage(id),
fit: BoxFit.fill,
colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.5), BlendMode.dstATop),
),
),
),
Wrap your Text in a ClipRRect
Container(
width: 100,
height: 100, // height should be equal to width
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50), // half of the width
image: DecorationImage(),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(50), // same as the Container
child: Text(),
),
);
if you want to increase size of container, I suggest you to increase size of parent widget first.
But for proper solution, Please provide parent widget structure.
Related
I'm having issues getting the positioned container to match the width of the first container. Essentially, I want the original container to be as wide as possible hence the width is set to double.infinity. The positioned container is meant to be an overlay to help with the visibility of the text that is stacked on top of the original container. However, the issue here is if I set the width of the overlay container to double.infinity I get an error saying BoxConstraints forces an infinite width. So right now I set the width to the size of the screen...but we can see that the border radius isn't drawn because it's too large.
How do I get the overlay container to match the original container containing the image?
Stack activityDetails(BuildContext context) {
var smallRadius;
return Stack(
children: <Widget>[
ClipRRect(
borderRadius: smallRadius,
child: Container(
width: double.infinity,
height: 200,
child: CachedNetworkImage(
imageUrl: image,
fit: BoxFit.cover,
),
),
),
Positioned(
top: 0,
left: 0,
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0),
bottomLeft: Radius.circular(0),
bottomRight: Radius.circular(0),
),
),
child: Text(
category.toUpperCase(),
),
),
),
],
);
}
If the sole goal is to only have the above display then I would suggest you replace the contents of your Positioned with this code and remove the entire ClipRRect chunk
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
image: const DecorationImage(
image:NetworkImage('src'),
fit:BoxFit.cover,
),
),
width: double.infinity,
height: 200,
child: Row(
crossAxisAlignment:CrossAxisAlignment.start,
children:const[
Text('Events'),
],
),
),
Remember to put it inside the Positioned() and edit the necessary parts like Cached and the Text() removing the const flag
However, if you still want to stick to this approach then I would suggest you try moving the Positioned top down by a few pixels
I have a Container with a Row inside.
Container(
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
//mbx
Container(
width: 40.0,
height: 40.0,
decoration: new BoxDecoration(
color: AppColors.grisMovMap,
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: AssetImage(
'assets/sports/MBX.png')))),
SizedBox(
width: 5,
),
//motocross
Container(
width: 40.0,
height: 40.0,
decoration: new BoxDecoration(
color: AppColors.grisMovMap,
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: AssetImage(
'assets/sports/motocross.png')))),
],
),
)
The Row contains two other Containers with a circular asset image inside.
The issue is that both image are not filling the circle space, they are cut on some parts of the border.
I would like to put both images completely inside the circles, just as adding a padding value.
EDIT:
Here you have both full images to compare with the app output:
CircleAvatar(
radius: 100,
child: Padding(
padding: EdgeInsets.all(10),
child: Image.asset(
"assets/images/w3lk3.png",
),
),
backgroundColor: Colors.purple,
),
Output:
Use fit:BoxFit.contain to fit the image fully inside the container.
Since you are using circle image I would suggest using the native flutter solution for circle images as found here in the official documentation. https://api.flutter.dev/flutter/material/CircleAvatar-class.html
In terms of code:
CircleAvatar(
backgroundImage: NetworkImage(userAvatarUrl),
)
If I understood correctly you want a certain color around the circle?
Use double CircleAvatar widget. It may not be the correct way but it accomplishes the task.
CircleAvatar(
radius: 70,
backgroundColor: Colors.red,
child: CircleAvatar(
backgroundImage:
AssetImage('assets/sports/motocross.png'),
radius: 50,
),
),
Since it creates two circles just make sure the first one is bigger than the second one and set the color of your choice.
I'm trying to create color overlay for Image to make it a bit gray. I'm using the following code:
Container(
padding: EdgeInsets.only(bottom: 20.0),
decoration: new BoxDecoration(
color: const Color(0xff7c94b6),
image: new DecorationImage(
fit: BoxFit.fitWidth,
colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop),
image: new AssetImage("assets/sunset.jpg"),
),
),
)
However without a Container child, color overlay takes all the screen.
[Result is the following][1]
I expect the Image to be on Top with overlay on Image only
[like this but with overlay][2]
Any thoughts, what am I'm missing?
[1]: https://i.stack.imgur.com/ifPEu.png
[2]: https://i.stack.imgur.com/4P0Cb.png
The overlay is over the whole screen because the Container has no constraints and therefore the parent's constraints (which in your case probably the screen size) are being used. When Container has a child, it uses its constraints.
The Column is not really necessary but if you want to have the image stuck to the top I assume you want to add other stuff below.
Column(
children:[
Container(
child: Image.asset(
"assets/images/sunset.JPG",
colorBlendMode: BlendMode.dstATop,
color: Colors.black.withOpacity(0.2),
),
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
),
),
],
)
This is what I want to achieve:
I know that there's a colorBlendMode on the image widget, but it doesn't allow me to color a part of the image, just the whole. Is it possible to overlay color for a percentage of the image?
For color overlay, you could simply use Container with color that has opacity. Then if you put your image and Container in Stack you could get same result as you have.
EDIT:
If you want to use multiply blending only option that comes to my mind is take two picture one with colorFiler, second(cutted in half) without and put them together. But it's definitely not clean or somehow nice solution.
Code for similar result as your image:
Column(children: <Widget>[
Stack(children: <Widget>[
Image(
image: NetworkImage('https://picsum.photos/600?image=9'),
colorBlendMode: BlendMode.multiply,
color: Colors.green),
AspectRatio(
aspectRatio: 2 / 1,
child: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
fit: BoxFit.fitWidth,
alignment: FractionalOffset.topCenter,
image: NetworkImage(
'https://picsum.photos/600?image=9',
))))),
]),
Stack(children: <Widget>[
Image(
image: NetworkImage(
'https://www.solidbackgrounds.com/images/1920x1080/1920x1080-white-solid-color-background.jpg'),
height: 100,
fit: BoxFit.fitWidth,
width: MediaQuery.of(context).size.width,
colorBlendMode: BlendMode.multiply,
color: Colors.green),
Center(
child: Text('5',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 40)))
])
])
I would definitely consider looking into the Stack Widget, which allows you to overlay children on top of one another. You could have your base image on the bottom, and that filter just above it.
I'm playing around with Flutter framework, and got stuck with this problem. I have an image, and I'm adding a decoration to it, but the decoration is being drawn in the center of the screen, while the image is aligned to the left.
Here's the code for the card:
final pokemonThumbnail = new Container(
decoration: new BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle,
),
margin: new EdgeInsets.symmetric(
vertical: 16.0
),
alignment: FractionalOffset.centerLeft,
child: new Image(
image: new AssetImage('assets/img/' + pokemon.id.toString() + '.png'),
height: Theme.Dimens.pokemonHeight,
width: Theme.Dimens.pokemonWidth,
),
);
And here's the image of how it's being rendered.
The pokemons are the image elements, and the grey circle in the middle is its decoration. I was expecting that the decoration was rendered centered to it's owner, which is the image. Am I assuming something wrong here?
You can make the Image inside a FittedBox and after that apply the decoration to the child
final pokemonThumbnail = new Container(
margin: new EdgeInsets.symmetric(vertical: 16.0),
alignment: FractionalOffset.centerLeft,
child: new FittedBox(
child: new Container(
decoration: new BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle,
),
child: new Image(
image: new AssetImage('assets/img/' + pokemon.id.toString() + '.png'),
height: Theme.Dimens.pokemonHeight,
width: Theme.Dimens.pokemonWidth,
),
),
),);