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
Related
I wonder how to manage to do this kind of widgets.
I couldn't figure out how to describe and google it.
in this image how to positioned filter and sorting widgets floats on blue world image and background and aligned for perfect i mean responsive
or in this image expand arrow positioned on the edge of column
You can use MediaQuery to get the screen size and use Positioned inside the Stack to adjust the location of the buttons, here's an example i just made:
double screenHeight = MediaQuery.of(context).size.height;
double topContainerHeight = screenHeight / 3;
double buttonLocation = topContainerHeight - 40;
return Stack(
alignment: Alignment.topCenter,
children: [
Container(
color: Colors.red,
),
Container(
height: topContainerHeight,
decoration: const BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
),
),
),
Positioned(
top: buttonLocation,
child: Row(
children: [
Container(
height: 80,
width: 160,
color: Colors.white,
),
const SizedBox(width: 30.0),
Container(
height: 80,
width: 160,
color: Colors.white,
),
],
),
),
],
);
The black container in the top uses 1/3 of the screen height and i know my buttons have an height of 80 so i just remove half of the height of my buttons from 1/3 of the screen to position them in the stack.
Here's how it looks:
Here is my code. This produces a rectangle image.
return Container(
width: 325,
height: 245,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
child: FadeInImage.assetNetwork(
placeholder: AppAssets.eventPlaceholder,
image: tempPhoto,
fit: BoxFit.cover,
),
);
I expect the photo's corners to be cut because the parent has rounded corners.
You can wrap the widget with a ClipRRect to get rounded corners:
A widget that clips its child using a rounded rectangle.
In your case:
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
width: 325,
height: 250,
color: AppColors.white,
child: FadeInImage.assetNetwork(
placeholder: AppAssets.eventPlaceholder,
image: tempPhoto,
fit: BoxFit.cover,
),
),
);
Here is a YouTube video by the Google team explaining ClipRRect.
I would like to get rid of the whitespace. The result currently is as below:
The white image is taking extra space and doesn't fit into the container.
Below is my code:
Container(
height: 180,
width: 160,
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.network(book.pic == null ?
'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Book-icon-bible.png/900px-Book-icon-bible.png'
:book.pic),
),
),
You can use fit: BoxFit.cover. Also you don't need to use ClipRRect in this case, you can just use the container's own property to make the edges smoothed out like the example bellow.
Container(
height: 180,
width: 160,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
),
child: Image.network(
book.pic == null
? 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Book-icon-bible.png/900px-Book-icon-bible.png'
: book.pic,
fit: BoxFit.cover,
),
),
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.
I am learning Flutter development. I want to display some rounded square shaped containers with short text in a row. However, the possible shapes are either a circle or rectangle. So I decided to set the width and height of the rectangle so that they would be equal.
The following is the code I used to create the Container
Container(
width: double.maxFinite,
height:
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: ThemeProvider.themeOf(context).data.primaryColor,
borderRadius: BorderRadius.circular(10),
),
child: Text(keyText),
),
When I set the shape in Box decoration alone, the Container resized to the size of the text. When I set the width property of the Container, I was able to divide the available width of the screen among the containers, which ensures flexibility of size if the screen was smaller or bigger, instead of hard coding it. Now I want to make the height the exact same size that the width turns out to be, thus obtaining a square container. Any idea how I could do that?
EDIT: I tried the following code and this is how the containers are looking like in both cases:
Container(
alignment: Alignment.center,
width: double.maxFinite,
height: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: ThemeProvider.themeOf(context).data.primaryColor,
borderRadius: BorderRadius.circular(10),
),
Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: ThemeProvider.themeOf(context).data.primaryColor,
borderRadius: BorderRadius.circular(10),
),
After using MediaQuery.of(context).size.width for height property or both
Here is a solution without using MediaQuery:
AspectRatio(
aspectRatio: 1,
child: Container(
width: double.infinity,
child: Text(),
),
)
Use MediaQuery. MediaQuery.of(context).size.width gives you the Screen width size value.
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: ThemeProvider.themeOf(context).data.primaryColor,
borderRadius: BorderRadius.circular(10),
),
child: Text(keyText),
)
check this quick example that I made just for you!
// This function is just an example
List<Widget> buildContainers(BuildContext context, int containerCount) {
// Here you get the width of all your containers
final containerWidth = MediaQuery.of(context).size.width / containerCount;
// Make height = width for squares!
final containerHeight = containerWidth;
// We will gather all containers in this list
List containerList = <Container>[];
for (var i = 0; i < containerCount; i++) {
containerList.add(
Container(
// Use the predefined width and height here!
width: containerWidth,
height: containerHeight,
// Random color to differentiate each container
// You could replace this with your child widget
color: Color(
Random().nextInt(0xFFFFFFFF),
),
),
);
}
return containerList;
}
#override
Widget build(BuildContext context) {
return Container(
child: Row(
children: [
// If you are wondering what are these dots (...)
// they are called "spread operators" and you can find more about them here:
// https://dart.dev/guides/language/language-tour#spread-operator
...buildContainers(context, 7),
],
),
);
}
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: ThemeProvider.themeOf(context).data.primaryColor,
borderRadius: BorderRadius.circular(10),
),
child: Text(keyText),
),