Align inside a stack gives me a result that I do not understand.
Here is the code:
Container(
height: totalHeight,
child: Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: Container(
width: avatarSize,
height: avatarSize,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
)
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: 35,
height: 20,
color: Colors.yellow,
),
)
],
),
);
The yellow container is always appearing at the bottom left, no matter what I do.
I want to have it in the bottom center.
avatarSize is greater than 35 of course. I put an outer container to let the stack expand to that outer parent. Seems all natural, but not working. Weird.
What do I miss here?
The best widget to align something inside a Stack is the Positioned widget. I think it can solve your problem
Positioned Widget
Related
How do I align one widget of a column in the center and put the rest around it?
If I had a Container or so that holds the three input fields and the button and another one that is the box above. How do I align the Container in the middle and put the box in the remaining space without moving the center container?
I tried using Expanded or Flexible but couldnt figure out how to align the widgets in that kind of way.
You can use Column like this:
Column(
children: [
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 40,
width: 40,
color: Colors.yellow,
),
)),
Container(
color: Colors.red,
height: 100,
width: double.infinity,
),
Expanded(
child: Align(
alignment: Alignment.topCenter,
child: Container(
height: 40,
width: 40,
color: Colors.green,
),
)),
],
),
I am trying to make this design from figma ui design and need to make the 2 pic inside each other but when i do it there is a space between them also the shaded part in the right pic how can i make it
but it did not work so It comes in this shape
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Row(
children: [
Expanded(
child: Container(
width: 235,
height: 235,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/back1.png',
),
fit: BoxFit.cover,
),
),
),
),
Expanded(
child: Container(
width: 279,
height: 279,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/back1.png',
),
fit: BoxFit.cover,
),
),
),
),
],
),
],
),
);
}
}
So what widget or things to add to make the 2 pic mixed
Use Stack and Positioned ,try this:
Stack(
children: [
Positioned(
top: 0,
right: 0,
child: Image.asset(
'assets/images/back1.png',
fit: BoxFit.cover,
width: 235,
height: 235,
),
),
Positioned(
top: 0,
left: 0,
child: Image.asset(
'assets/images/back1.png',
fit: BoxFit.cover,
width: 279,
height: 279,
),
),
],
),
use Row Widget and size the first image to have half screen using MediaQuery
then wrap the Row it's self to stack and add other one over the stack and position it wherever you want !
I think the best way is to export the two images together in Figma, forming a single image. You can do this by selecting both images > Group > Export. So you don't need almost any code to put them together. I know that's not the point, but it's a creative and valid solution for your case. I hope it helps.
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 am new in flutter. I want to make the transparent Circle in side the semi transparent rectangle. Look like below,
I have not idea about that. So please help me to make this type of widget in flutter.
Using ColorFiltered and Stack you can achieve this.
(I took the answer mentioned in the comment and edited to your needs)
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: [
Image.network(
'https://lh3.googleusercontent.com/proxy/_wrP_GRGOkGw0FLMiR3qeMzlyC-qN8Dd4sND89_xxLZMDIZh204g8PCccS-o9WaL1RKyiVOLGVS9QpodSkMMhOh8kbNh1CY492197-im-4vlFRRdsVqT2g4QbRlNgljDIg',
fit: BoxFit.cover,
), //Give your Image here
ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.5),
BlendMode.srcOut,
), // This one will create the magic
child: Stack(
fit: StackFit.expand,
children: [
Container(
decoration: BoxDecoration(
color: Colors.black,
backgroundBlendMode: BlendMode.dstOut,
), // This one will handle background + difference out
),
Align(
alignment: Alignment.center,
child: Container(
height: MediaQuery.of(context).size.width,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(
MediaQuery.of(context).size.width / 2,
),
),
),
),
],
),
),
],
),
);
}
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