I have a background image as shown, it needs to overlap the edges as shown in the UI render and I'm not sure how best to go about it. I've tried cropping it and using BoxFit.fill but this just leads to a change in aspect ratio which I don't really want, especially on different sized screens. I'm thinking maybe having it overlap on the left and right by a fixed amount and then the size changes to accommodate that depending on the screen size but not really sure how to code that. I've played around with expanded widgets inside columns and all sorts like that but to no avail.
If you made the image a bit wider, you can use BoxFit.fitHeight instead. Here's a sample fitting a landscape image to a portrait view.
https://codepen.io/digitaljoni/pen/rNeMzdG
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fitHeight,
image: NetworkImage(
'https://images.unsplash.com/photo-1542362567-b07e54358753?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80',
),
),
),
),
);
}
}
Related
I am trying to have a welcome screen like this:
I have all the lines from the bottom and the orange and blue bubbles as asset images. How can I stack them all together and then use Text() widget for the writing part?
You can use the Stack widget to stack its children if that answers your question:
Stack(
children: [
your_images_here,
your_text_here,
],
);
You can do it without using stack by using the image property in container decoration.
Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/bg.png',
),
fit: BoxFit.cover,
)),
child: Column(
children: [
// your text widgets
])
),
So I had three images, and I couldn't use Imageprovider to use it as a background image of my main Container(). But, I decided to make a difference in my design by wrapping them all together using adobe photoshop and getting one image instead of three so that I can use ImageProvider instead of a stack. Then I used Decoration image and made the image the background of my page.
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
Because of that can't get a good view on different types of phones . I am trying to create an image using clip path library of flutter. Also i want to know whether there is any possibilities to add bootstrap and css to flutter?
You can not use Bootstrap or css in flutter.
To use a background image that fits the whole screen, you can use this :
Widget build(BuildContext context){
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/yourimage.jpg"),
fit: BoxFit.cover,
),
),
child: null /* add child content here */,
),
);
}
I have an image with a rectangle drown in it, I know the position and the size of the rectangle. I could have different images with different and multiple elements like this.
I want to position a Widget, in a way that perfecly overlaps the rectangle in the image background, this means that I need a way to map the position and scale of my rectangle to the flutter coordinates of my containing widget.
I came up with a Stack with the actual Image on the bottom, with a BoxFit.cover fit, and a Positioned with my Container inside on top of it.
It should work with every aspect ratio and pixel density.
I need some formula to fill those question marks.
Thank you.
class ImageWidget extends StatelessWidget {
static const Offset imageTargetStart = Offset(302, 281);
static const Size imageTargetSize = Size(441, 57);
#override
Widget build(BuildContext context) {
return Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset(
'assets/sample_image.png',
fit: BoxFit.cover,
),
Positioned(
// left: ??,
// top: ??,
child: Container(
// width: ??,
// height: ??,
decoration: BoxDecoration(border: Border.all(color: Colors.red), color: Colors.greenAccent),
),
)
],
);
}
}
i am doing my first steps with flare and flutter and right now its really nice to be able to put animations into flutter without coding them by hand. But i dont understand how to make the flare thingy responsive (how to support different screen sizes).
This is part of a splash screen:
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromRGBO(250, 224, 61, 1.0),
body: Center(
child: Container(
child: FlareActor(
"assets/flare/splash.flr",
callback: (nameOfAnimation) =>
Navigator.pushReplacementNamed(context, "/login"),
fit: BoxFit.none,
animation: "splash",
)),
));
}
This works well on my iPhone X because the animation is designed for that size. Is there any way how a smaller device can be able to use this same flare animation? Testing this with iPhone SE resulted in a clipped animation.
I hope there is another way than creating several animations for several screen sizes.
Just add your animation as a child of a SizedBox and give it a width/height and you’ll be fine.
You can also use the MediaQuery.of(context).size.width or height to get the viewport dimensions and set your SizedBox to use a % of the screen accordingly, if you want to.
you can use MediaQuery with the current context of your widget and get width or height in your container or sizedbox like this
width: MediaQuery.of(context).size.width * 0.65
height: MediaQuery.of(context).size.width * 0.65
else If you have a single widget you can use a FractionallySizedBox widget to specify a percentage of the available space to fill
FractionallySizedBox(
widthFactor: 0.7,
heightFactor: 0.3,
child:FlareActor(
"assets/flare/splash.flr",
callback: (nameOfAnimation) =>
Navigator.pushReplacementNamed(context, "/login"),
fit: BoxFit.none,
animation: "splash",
)),
);