So am trying to change image opacity using the opacity property i found in Image() widget, this is a short code to be clear :
Padding(
padding: EdgeInsets.all(10.0),
child: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: Image(
image: NetworkImage(challengeImage),
fit: BoxFit.cover,
height: 150,
width: 350,
opacity: //not sure how to use
),
),
),
),
the image is a network image i retrieved from Firestore and am not sure what is the value i should put if its not double in order to apply opacity on the image. i thought to create a stack and insert asset image as a layer above my image and use the filter property but i would really like to know how the opacity can work with my code above, Thank you.
You can use AlwaysStoppedAnimation or create an Animation<double>
Image(
image: NetworkImage(""),
opacity: AlwaysStoppedAnimation(.1),
),
Another solution : wrap the widget with Opacity Widget
it accepts a double value in range [0,1] where 1 is fully displaying and 0 is not
Related
I am looking for a way to put random-sized network images into a fixed size area. The issue is the pictures can be random sizes. Is there a way to get images resized to fit a certain area? Any suggestions? I thought about expanded or aspect ratio but I don't really know how to take this approach.
This is my code so far:
child: Expanded(
child: Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(7.0)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Image.network('https://picsum.photos/250?image=9'),
)
],
),
),
),
Image(
fit: BoxFit.cover, //or BoxFit.fill
image: NetworkImage(
'https://picsum.photos/250?image=9',
),
),
With BoxFit you can fit your image to any size you want.
https://api.flutter.dev/flutter/widgets/FittedBox-class.html
If you want to set the borderRadius of a photo, you can use ClipRRect.
To make an Image fill its parent, simply wrap it into a FittedBox:
FittedBox(
child: Image.asset('foo.png'),
fit: BoxFit.fill,
)
FittedBox restricts its child widgets from growing its size beyond a
certain limit. It re-scales them according to the size available. For
instance, if the text is displayed inside a container, and the text is
to be entered by the user. If the user enters a large string of text,
then the container would grow beyond its allocated size. But, if we
wrap it with FittedBox, then it would fit the text according to the
size available. For large string, it would shrink its size, hence
would fit in the container.
Sytnax
FittedBox({
Key key,
BoxFit fit: BoxFit.contain,
AlignmentGeometry alignment: Alignment.center,
Widget child
}
)
I want to make rive animation background and feel whole screen.
Changing height and width to MediaQuery... does not work. It changes size but proportion stays the same
This is how rive widget looks like for me:
Center(
child: _riveArtboard == null
? const SizedBox()
: Rive(artboard: _riveArtboard),
),
thank you in advance
edit:
SOLUTION
Container(
height: h,
width: w,
child: Center(
child: _riveArtboard == null
? const SizedBox()
: Rive(fit: BoxFit.fill, artboard: _riveArtboard),
),
),
Just adding height and width to his parent Container and add a fit(cover, fill, whatever you need) to your Rive widget
Container(
width: w,
height: h,
child: Rive(
fit: BoxFit.cover,
artboard: ctrl.globalArtboard!,
),
),
Context
Let's imagine I'm building an app for an amusement park like Disney World or something. There's a tab where I want to display the map of the place so the visitor can find his way/position. I want the map to be huge for it is more easy to look at.
What I have
I'm displaying an image that exceed the width of my phone screen (on purpose) using InteractiveViewer to span and zoom in and out. With spanning the image I'm able to access every pixel of the image. It currently looks like this (I replaced my map with a pikachu image) :
What I want
What I would like is that when I land onto this page, the pikachu is automaticcaly displayed centered, like this, where I'd be able just like before to span left and right and zoom to access every desired pixel of the image :
My code
Container(
height: 650,
width: 420,
child: InteractiveViewer(
constrained: false,
panEnabled: true,
child : Container(
width: 830,
height: 650,
child: ClipRRect(
borderRadius:BorderRadius.circular(5) ,
child: Image.asset(
'assets/images/pikachu.png',
fit: BoxFit.cover,
),
),
)
),
)
Question
Is there a way to achieve this without relocating the Container ? The only solution I can imagine is to move the Container to the left, beginning before my phone screen.
You should try below code just change your image name and app bar name(Dashboard) replace by my
image name
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Dashboard'),
),
body: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Image.asset(
'assets/images/log.png',
fit: BoxFit.cover,
),
),
),
);
}
}
Your Output look like this
I would like to have a banner widget, probably a VideoPlayer (from the video_player plugin) or else just an image.
Depending on the size of the screen/window I want my banner to follow like this:
https://i.imgur.com/YADZSrV.mp4
Imagine that the scaling in the video is the window size changing.
Basically:
If aspect gets wider than the original -> show less on top and bottom (kinda zooming in)
If aspect gets taller than the original -> show less on the sides (kinda cropping while centering)
I got something to work partially. It works when making the window wider, but when it gets slimmer it just starts to scale everything down, it doesn't keep the full height while showing less on the sides.
Here is my work in progress:
return ClipRect(
child: OverflowBox(
maxWidth: double.infinity,
maxHeight: double.infinity,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: VideoPlayer(_controller),
),
),
);
This can be solved very easily by using the FittedBox widget and the BoxFit enum.
FittedBox(
fit: BoxFit.cover,
child: Container(
width: 960,
height: 360,
child: VideoPlayer(_controller),
),
)
Using the VideoPlayer widget as a child of a Container where I set the size to the original size of the video.
Example using an image:
FittedBox(
fit: BoxFit.cover,
child: Image(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
),
)
You can use LayoutBuilder to get the size of its content and render differently accordingly:
https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html
In you case, it would be something like this :
return ClipRect(
child: OverflowBox(
maxWidth: double.infinity,
maxHeight: double.infinity,
child: LayoutBuilder(
builder: (context, constraints) {
if (constaints.bigger.width > constaints.bigger.height) {
return Text('More width than height');
}
else {
return Text('More height than width');
}
}
)
),
);
I have a circleavatar within a card widget but the image is not displaying as intended, how can I fill the card with the image rather than getting this eyeball effect?
Card with image
[Card(
shape: CircleBorder(),
elevation: 10.0,
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 75.0,
child: ClipOval(
child: FadeInImage.assetNetwork(
placeholder:
'lib/screens/shared/defaultprofile.png',
image: userData.profilephoto,
fit: BoxFit.fill,
),
),
),
),
you are using ClipOval class A widget that clips its child using an oval.
By default, inscribes an axis-aligned oval into its layout dimensions and prevents its child from painting outside that oval, but the size and location of the clip oval can be customized using a custom clipper.You can remove it to have your desired view.
CircleAvatar(
Backgroundimage: NetworkImage(url)
...
Also see hw to add assets to you flutter app