I am building a flutter web app, and I want to have a carousel slider widget with images. For this I use the carousel_pro package. I want the size to be the width of my carouselslider, which takes up the whole screen's width, and then set the size accordingly, to be the exact size needed. Is there a way to do this?
Now I am settling for a less option, which looks like this:
Flexible(
child: Container(
color: CustomColours.midBlue,
constraints: BoxConstraints(maxHeight: height / 2),
//height: height / 2,
width: width,
child: Carousel(
dotBgColor: Colors.transparent,
autoplayDuration: Duration(seconds: 5),
boxFit: BoxFit.cover,
images: [
AssetImage(
'lib/assets/create-esports-poster-design-in-48-hours.png'),
//AssetImage('lib/assets/Image from iOS.jpg'),
// AssetImage('lib/assets/banner.png'),
],
),
),
),
And I know I could not add a height for a container for it to work, but since this is in a column, it has to have a height. This solution would be good for me, however now the slider has grey lines on top and below it, like this: Is there a way to 1) do what I originally wanted or 2) fix this issue? Thank you very much!
Related
I've implemented an animation of images, what I wanted to do was create a custom circular spinner with images that switch to give this effect, the problem is that with AnimatedSwitcher for a little fraction of time there's a black space between one image and another.
Here's the code of the animation:
AnimatedSwitcher(
duration: Duration(milliseconds: 200),
child: Image.asset(
values[_index % values.length],
key: UniqueKey(),
height: 50,
width: 50,
),
)
Is there a way to solve this issue or an alternative to AnimatedSwitcher?
The second image might need some time to be loaded into memory. I had the similar issue before but solved it with a workaround. I used a FadeInImage with a transparent placeholder on top of the previous image:
import 'package:transparent_image/transparent_image.dart';
Stack(
children: [
Image(
image: previousImage,
),
FadeInImage(
fadeInDuration: Duration(milliseconds: 300),
placeholder: MemoryImage(kTransparentImage),
image: currentImage,
)
],
),
transparent_image was a dependency I added in pubspec.yaml.
I think precacheImage would be help you. https://api.flutter.dev/flutter/widgets/precacheImage.html
I write a same function like you, but I have not get a black space between image. But if I do not set the Key of Image, then I would got a black space.
I am using flutter numberpicker to build a mobile app. The default size of the widget is 50px by 100px. The size is too large for small screens. How should I make it automatically resize by specifying the right height and width?
Thanks. Any ideas and thoughts are appreciated.
You can use a combination of SizedBox and FittedBox to achieve any kind of scale manipulation of Widgets.
For your case, you can use it like this,
SizedBox(
width: 75,
child: FittedBox(
fit: BoxFit.contain,
child: NumberPicker(
value: _currentValue,
minValue: 0,
maxValue: 100,
onChanged: (value) => setState(() => _currentValue = value),
),
),
),
If you use it normally or don't give the width param in above code, tt looks like this.
But if you give a width of 75 like in the code above, it looks like this.
i m a beginner to flutter and I was trying to Implement some image inside a Container in my app.
Here is my code :
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
child: Container(
width: 200,
height: 200,
child: FittedBox(
child: Image.asset(
'assets/images/' + i.toString() + ".jpg"),
fit: BoxFit.fill,
),
),
),
My image showed up and it did filled the Container , but it looks horrible . It is super stretched , I tried changing the fit: BoxFit to something like fit : BoxFit.contain but it won't work.
Here is how my UI Looks :
The picture (Display properly but just stretched)
How do I make this image fit without stretching it.
Any answer would be appreciated , and thanks for helping.
When we use Boxfit.fill, the image will take up the complete space of parent container. Aspect ratio here would be secondary. That is why the image looks stretched.
Try Boxfit.cover. Another option would be to equal Container width to double.infinity and adjust the height, as needed.
BoxFit.fill will stretch the image to fill the space.
You should use BoxFit.cover to fill the space without stretching the image.
If you want to make sure the full width of the image is visible, use BoxFit.fitWidth.
If you want to make sure the full height of the image is visible, use BoxFit.fitHeight.
I have a custom build widget for grid view, in which i am either sending Icon or image to display along with Text (label). Now when i send icon i can display the test below icon, but when i am trying image i am not sure if the below approach is correct to display text or not, i am trying to put EdgeInsets in the container. I think it might fail due to pixel overload, but in my emulator, it seems to be fine.. Is there any better option for this scenario or the approach I am following is ok?
if (image != null) ...[
Container(
margin: EdgeInsets.only(top:150.0),
),
] else ...[
child ?? Container(),
],
Text('$label',
style: TextStyle(
color: AppColors.lightBlue,
fontSize: 20,
),),
If I am getting your problem well, then the solution is to use Alignment Class Flutter, in the Container. What this will do, is it allows the child of the Container to be aligned the way we want to align it. Since your requirement is to align the text at the bottom center, hence we would use the Alignment property, Alignment.bottomCenter.
Please Note: This will tell you how to align the content which will not be disturbed as per the device size, with a background image
SOLUTION 1 [EFFICIENT]
Container(
height: MediaQuery.of(context).size.height * 0.3, // ignore this, cos I am giving height to the container
width: MediaQuery.of(context).size.width * 0.5, // ignore this, cos I am giving width to the container
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage('https://i.pinimg.com/originals/0c/96/b1/0c96b19dc89ffdaa7ff737cfc04a095f.png')
)
),
alignment: Alignment.bottomCenter, // This aligns the child of the container
child: Padding(
padding: EdgeInsets.only(bottom: 10.0), //some spacing to the child from bottom
child: Text('Hello', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold))
)
)
The output would look like this now:
You can check this piece of code in any of the device, and it will show up just fine.
SOLUTION 2 [NOT RECOMMENDED]
Now, if you really want the margin, there is a cleaner way to do it, and that is using MediaQuery, as you can see in the above code also for giving out height and width.
Now, the question arises, what MediaQuery is, you can find it here, or in a simpler statement, it takes care of the size of the device. Now, whenever, we are concerned about the size of the device with the content alignment, we can use MediaQuery, and what it does, is it will adjust the margin/height/width/padding etc according to the Device size, and will look the same everywhere
How we can do that, I will just use your code only, and since you want the text to come at the bottom with the use of margin. Here, how you can do that
Container(
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width * 0.5,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage('https://i.pinimg.com/originals/0c/96/b1/0c96b19dc89ffdaa7ff737cfc04a095f.png')
)
),
child: Container(
margin: EdgeInsets.only(top: MediaQuery.of(context).size.height * 0.25),
child: Text('Hello', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold))
)
)
OUTPUT
MediaQuery.of(context).size.height = device height, and when we multiply, it does the math according to the device, and align the content. Similarly for MediaQuery.of(context).size.width= device width
I would suggest SOLUTION 1 only, since it is clean, and would not let you do a lot in nested child. I hope that clears your doubt. Let me know. Thanks :)
Good Evening,
I have been searching for many hours and can not find a solution.
I have set a full screen image and with a Stack I have Positioned several GestureDetectors.
I have succeeded to be able to press on a GestureDetector and call a Function.
The problem is that when the screen size changes, either to a new or older phone then the Image responds and covers the full screen but the Positioned() of course stay at the same place, thus the Image mappings are not correct any more.
Is there a way to make the Positioned be responsive? or Maybe a total different way achieving the desired outcome?
Please help me :)
class Overview extends StatelessWidget {
#override
Widget build(BuildContext context) {
double sh = MediaQuery.of(context).size.height;
double sw = MediaQuery.of(context).size.width;
return Scaffold(
drawer: AppDrawer(),
body: Stack(
children: <Widget>[
Container(
height: sh,
width: sw,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/ang7.png'),
fit: BoxFit.cover)),
),
Positioned(
left: 10,
top: 50,
child: IconButton(
icon: Icon(Icons.menu),
iconSize: 30,
color: Colors.white,
onPressed: () => Scaffold.of(context).openDrawer(),
),
Positioned(
left: left,
top: top,
child: GestureDetector(
// child: Icon(Icons.add_circle),
onTap: () => Navigator.push(context, MaterialPageRoute(
builder: (context) {
return Amenities(
tText[page][0],
tText[page][1],
tText[page][2],
);
},
)),
child: Container(
height: 35,
width: 50,
color: Colors.blue,
),
));
),
Posting my comment as an answer just in case it works and there are no better answers provided. Please up vote and mark as answered if it does. :-)
You could try experimenting with MediaQuery.of to determine the size of the device (height and width) and then use those values to scale the Positioned widgets position parameters up or down from your 'baseline' sizes. In theory that should (may) match how the background image has been scaled. Would probably need to scale the size of the Positioned widgets as well.
Update regarding your comment:
Not really. What I mean is that you would need to run MediaQuery.of on the device that you are happy with the UI layout, and record that device's width and height. You then use this width and height in your app and compare these 'baseline' values with what values you get when you run the app on other devices.
So:
Divide other-device-width by baseline-device-width to get your width scaling factor.
Divide other-device-height by baseline-device-height to get your height scaling factor.
Then use these scaling factors to 'scale' the Positioned widgets width (positioned-widget-width multiplied by width-scaling-factor) and height (positioned-widget-height multiplied by height-scaling-factor) and position on the screen (you would have to play around with the positioning values).
Sounds messy but it is just a bit of simple math.
Like I say, might not work or might not be the most elegant solution. There are so many different devices out there you will never really be able to completely test this. Might need to rethink you UI. Maybe some other people have ideas around that.