this is my first flutter question and I am trying to get an animation to play above the background image in a stack. if I remove the image then I can see the animation playing but with the image in there no animation plays and I can see it for a split second before the image is put in there so im guessing the animation is behind the image.
return Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned.fill(child: new Image.asset(
colors[_Element.image],
width: size.width,
height: size.height,
fit: BoxFit.fill),),
Positioned.fill(child: Container(
child: AnimatedBuilder(
animation: CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn),
builder: (context, child){
return Stack(
alignment: Alignment.center,
children: <Widget>[
_buildContainer(150 * _controller.value),
_buildContainer(200 * _controller.value),
_buildContainer(250 * _controller.value),
_buildContainer(300 * _controller.value),
_buildContainer(350 * _controller.value),
],
);
},
),
),),
Widget _buildContainer(double radius) {
return Container(
width: radius,
height: radius,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue.withOpacity(1 - _controller.value),
),
);
}
thank you for your time
Hey there is a bug reported with you problem you can follow it here #44845 for temporary workaround you can wrap the Image widget in a RepaintBoundary.
Related
I am creating a profile page, i want top like this
here is my code
Widget build(BuildContext context) {
return Scaffold(
appBar: new MyAppBar(title: Text("My Profile")
),
drawer:drawer(),
body:
SingleChildScrollView(
child:Stack(children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: 150,
color: Colors.blue[500],
child: Align(
alignment:Alignment(-1.4,4.0),
child:Container(
//margin: EdgeInsets.all(20),
width: 400,
height: 125,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage('https://patientcaremedical.com/wp-content/uploads/2018/04/male-catheters.jpg'),
),
),
))),
])));
}
}
and here is its output
it is round from the bottom, can u please help where i am doing wrong.
You mean the bottom of your circle looks flat? That has nothing to do with your code. It's because the image you're using has white at the bottom. Take a look for yourself. If you change the backgroundColor: of your Scaffold to Colors.red or something other than white, you will see what I am talking about. All you need to do is use a different image that doesn't have white at the bottom, or crop your current one.
I wish to make my logo with rounded corners and did that with ClipRRect from Flutter. I also wanted a set height and width to my image. These together make it seem if the image was never rounded. When I remove the set height and width from the image, ClipRRect makes the image rounded, but very large.
The code:
body: Container(
padding: EdgeInsets.all(20),
child: Column(children: [
ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Image.asset('assets/images/logo.png', width: 300, height: 150),
),
])));
Thank you, all help is appreciated.
Clear padding for the container and use fit property for the image widget.
Example
ClipRRect(
borderRadius: BorderRadius.circular(75.0),
child: Image.network(
'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
height: 150.0,
width: 150.0,
fit: BoxFit.cover,
),
),
Update for Container with column widget tree:
Container(
child: Column(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(75.0),
child: Image.network(
'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
height: 150.0,
width: 150.0,
fit: BoxFit.cover,
),
),
],
),
),
I am just trying to display the camera's preview and align the user to take a selfie.
I have the following snippet of code and I would like to make the person's image transparent (not white) and fill the surrounding area with color.
but the problem that I am facing, if I set the SVG with transparent color, it will display the color of the parent (container),
I need to make the person's image totally transparent to see the camera's preview with filling the surrounding area with color.
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Stack(
children: [
Container(
height: MediaQuery.of(context).size.height,
child: Center(
child: _cameraPreviewWidget(),
),
),
Container(
height: MediaQuery.of(context).size.height,
color: Colors.grey[700].withOpacity(0.8),
child: Align(
alignment: Alignment.bottomCenter,
child: SvgPicture.asset(
'assets/svg/selfie_person.svg',
alignment: Alignment.bottomCenter,
fit: BoxFit.cover,
color: Colors.white,
),
),
),
Container(
height: MediaQuery.of(context).size.height,
child: Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.05,
bottom: MediaQuery.of(context).size.height * 0.15,
),
child: Column(
children: [
ListTile(
leading: InkWell(
onTap: () {
Navigator.pop(context, null);
},
child: FaIcon(
FontAwesomeIcons.arrowLeft,
color: Colors.white,
),
),
title: Center(
child: Text(
"Take a selfie",
style: Theme.of(context).textTheme.subtitle2,
),
),
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: MediaQuery.of(context).size.width * 0.05,
),
child: Text(
"Take a quick selfie so we know it's you, this is never public",
style: Theme.of(context).textTheme.subtitle2,
overflow: TextOverflow.ellipsis,
maxLines: 3,
textAlign: TextAlign.center,
),
),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: _captureButton(),
),
),
],
),
),
),
],
),
),
);
I don't understand your question well, but i think you should try Opacity class .. wrap your SVG with Opacity
You can check it :
https://api.flutter.dev/flutter/widgets/Opacity-class.html
Im trying to change the height of an image but when i change height only size of the container changes but the height of image stays the same.
Container(
color: Colors.white,
height: 250,
child: Row(
children: <Widget>[
Expanded(
flex: 3,
child: Container(
color: Colors.red,
// child: Padding(
// padding: const EdgeInsets.all(5.0),
child: Image(
height: 150,
// width: 100,
image: AssetImage("images/MiddleEarthWp.jpg"),
),
// ),
)),
Expanded(
flex: 7,
child: Container(
color: Colors.amber,
),
)
],
),
),
Before changing height of image and After changing a height
you're having this because your image is a child of the container and because you didnt specify the fit of the image , you can try this code :
Container(
// background to this Container.
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('images/background.png'),
fit: BoxFit.cover,
),
),
I'm trying to make a circular image box, but after using shape: Boxshape.circle, it is working properly on my current image. I'm sure that the shape property doesn't depend on the image pixel or any sort of thing.
I have this code:
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 40.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
height: 144.0,
width: 144.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage('MY_IMAGE')
)
)
)
]
)
)
],
);
I have read about the Boxdecoration from this link: Flutter - BoxDecoration. I'm confident that the shape should work but in my case, it is not working.
This is the result which I'm getting right now:
Use a ClipRRect inside a SizedBox :
Container(
child: new SizedBox(
height: 144.0,
width: 144.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(72.0),
child: new Image.asset('MY_IMAGE'),
),
),
),
Try this code
Container(
color: Colors.amber,// this is just for detection, rounded or not
child: Center(
child: new Container(
height: 144.0,
width: 144.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(72),
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage('assets/img1.png')))),
),
)
Use the same code that you have posted in the question. But, instead of BoxFit.contain or BoxFit.fill, try using BoxFit.cover.
As it is mentioned in the comment by Mazin Ibrahim in the above answer, the actual height of your image must be less than the radius of the circular container, so even though the container is circular in shape you are not able to see it.
Check this link for more details.
For me it works using ClipOval in the child, and increasing a bit the image size with Transform.scale
Container(
decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(40))),
child: ClipOval(
child: Transform.scale(
scale: 1.6,
child: Image.asset(
"my asset image",
width: 80,
height: 80,
fit: BoxFit.cover,
),
),
),
)
For my case it worked like that -
Container(
height: (20.0),
width: (20.0),
decoration: const BoxDecoration(
shape: BoxShape.circle,
),
child: ClipOval(
child: SvgPicture.asset(
'assets/icons/$icon.svg',
fit: BoxFit.cover,
color: color,
),
),
)