I wanted to make a carousel with some images along with some texts.So I put the images inside a container .But when I added a Text widget as the child of the container, the container shrinks to minimum width . Why ?
CarouselSlider(
items: [
//1st Image of Slider
Container(
child: Text("Diverse stories you'll love"),
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: AssetImage("images/welcomepage1.jpg"),
fit: BoxFit.cover,
),
),
),
//2nd Image of Slider
Container(
child: Text("Make friends and share your voice"),
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: AssetImage("images/welcomepage2.jpg"),
fit: BoxFit.cover,
),
),
),
],
//Slider Container properties
options: CarouselOptions(
height: 300.0,
enlargeCenterPage: true,
autoPlay: true,
aspectRatio: 16 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 0.8,
),
),
Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children. The width, height, and constraints arguments to the constructor override this.
From the Flutter documentation.
Related
image 1
i want to build image slider like this from the left start of phone
but i have getting issue in slider my slider is starting from center of the page in flutter
image 2
here is my code.
CarouselSlider.builder(
itemCount: serviceDataList?.length,
options: CarouselOptions(
height: 100.0,
enlargeCenterPage: false,
aspectRatio: 16 / 9,
autoPlayAnimationDuration: Duration(
milliseconds: 800),
),
itemBuilder: (context, i, id){
return Container(
width: 100,
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
sliderDataList.isEmpty ? '' : sliderDataList[i]['mslider_img']),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(10.0),
),
// child:
// Image(
// image: NetworkImage(
// sliderDataList[i]['mslider_img']),
// fit: BoxFit.cover,
// ),
);
}
),
I Just Want help In This Code
Change viewportFraction in CarouselOptions to smaller number that match container fixed width viewportFraction: 0.2 for example & add padEnds: false
I'm having issues getting the positioned container to match the width of the first container. Essentially, I want the original container to be as wide as possible hence the width is set to double.infinity. The positioned container is meant to be an overlay to help with the visibility of the text that is stacked on top of the original container. However, the issue here is if I set the width of the overlay container to double.infinity I get an error saying BoxConstraints forces an infinite width. So right now I set the width to the size of the screen...but we can see that the border radius isn't drawn because it's too large.
How do I get the overlay container to match the original container containing the image?
Stack activityDetails(BuildContext context) {
var smallRadius;
return Stack(
children: <Widget>[
ClipRRect(
borderRadius: smallRadius,
child: Container(
width: double.infinity,
height: 200,
child: CachedNetworkImage(
imageUrl: image,
fit: BoxFit.cover,
),
),
),
Positioned(
top: 0,
left: 0,
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0),
bottomLeft: Radius.circular(0),
bottomRight: Radius.circular(0),
),
),
child: Text(
category.toUpperCase(),
),
),
),
],
);
}
If the sole goal is to only have the above display then I would suggest you replace the contents of your Positioned with this code and remove the entire ClipRRect chunk
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
image: const DecorationImage(
image:NetworkImage('src'),
fit:BoxFit.cover,
),
),
width: double.infinity,
height: 200,
child: Row(
crossAxisAlignment:CrossAxisAlignment.start,
children:const[
Text('Events'),
],
),
),
Remember to put it inside the Positioned() and edit the necessary parts like Cached and the Text() removing the const flag
However, if you still want to stick to this approach then I would suggest you try moving the Positioned top down by a few pixels
The short version:
GridView without enough items inside a Container doesn't fill up the rest of the screen.
The long version:
My flutter app has a Column that should be scrollable, the Column has the following children:
Container with an Image
A SizedBox for spacing
A Container with a GridView (for styling)
If the items inside my GridView are not enough, the color of the container (that contains the GridView) doesn't get applied to the end of the screen.
This my code structure:
return Scaffold(
backgroundColor: Color(0xFF0f2447),
body: Container(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
// First Column Item
Container(
height: 250,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/ise.png'),
fit: BoxFit.cover,
),
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomLeft,
colors: [
Colors.black.withOpacity(0.0),
Colors.black.withOpacity(0.2),
],
),
),
),
),
// Second Column Item
SizedBox(
height: 20,
),
// Third Column Item
Container(
// What I have tried
// height: double.infinity, (Error: BoxConstraints forces an infinite height.)
// height: 500, (Works, but depends on the device height (can't be static) )
// height: "the remaining height of the screen whatever it is"
margin: EdgeInsets.only(left: 10, right: 10),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
),
child: GridView.count(
physics: BouncingScrollPhysics(),
shrinkWrap: true,
crossAxisCount: 3,
children: currentList
.map(
(item) => ItemIcon(
label: item['title'],
icon: AssetImage(item['iconPath']),
changeView: changeView,
itemId: item['itemId'],
),
)
.toList(),
),
),
],
),
),
),
);
ItemIcon is a custom widget, it has an image with a fixed size and a Text with some padding.
Current list is simply as follows: (Just to avoid long code)
final List<Map<String, Object>> examples = [
{
'title': 'Test',
'itemId': 0,
'iconPath': 'assets/icons/icon.png',
},
...
]
Apologies for the confusing title.
Try to wrap the third container in Expanded class, and it will do your job.
Expanded takes up the remaining spaces in Row/Column.
Code
Expanded(
child: Container(
// What I have tried
// height: double.infinity, (Error: BoxConstraints forces an infinite height.)
// height: 500, (Works, but depends on the device height (can't be static) )
// height: "the remaining height of the screen whatever it is"
margin: EdgeInsets.only(left: 10, right: 10),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
),
child: GridView.count(
physics: BouncingScrollPhysics(),
shrinkWrap: true,
crossAxisCount: 3,
children: currentList
.map(
(item) => ItemIcon(
label: item['title'],
icon: AssetImage(item['iconPath']),
changeView: changeView,
itemId: item['itemId'],
),
)
.toList(),
),
)
)
Alternative
You can anyway rely on the previous code, and just play with the height using MediaQuery class. This will keep the height uniformed to different device
Container(
// play with the floating number to get the desired height
height: MediaQuery.of(context).size.height * 0.61,
margin: EdgeInsets.only(left: 10, right: 10),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
),
child: GridView.count(
physics: BouncingScrollPhysics(),
shrinkWrap: true,
crossAxisCount: 3,
children: currentList
.map(
(item) => ItemIcon(
label: item['title'],
icon: AssetImage(item['iconPath']),
changeView: changeView,
itemId: item['itemId'],
),
)
.toList(),
),
)
Another Workaround for Landscape view
You can use Stack class for achieving uniformity. Make use of the third widget as is. Just use the Stack to align the items for your landscape view.
Please read about Positioned class, which help you align your items in the view
So the view will be
Stack(
Container with an Image
// the last one comes on top of the first view
// no sizedbox required since you can align the item using Positioned
Positioned(
top: use media_query_dimension,
left: use media_query_dimension,
right: use media_query_dimension,
bottom: use media_query_dimension.
child: A Container with a GridView (for styling)
)
)
Hi I'm loading my profile pics from my server in Image.network and showing it in a pageview to show next pictures. But when my image load from the internet it become a glitch as shown in the picture.
But when i open the same link in google chrome there is no glitch in my profile pic
This is the code is what i used to list
photos.forEach((photo) {
profileImages.add(
Container(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Image(
image: NetworkImage(
APis().imageApi(
photo.photoName,
),
),
filterQuality: FilterQuality.low,
fit: BoxFit.cover,
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
gradient: LinearGradient(colors: [
Colors.black12,
Colors.transparent,
Colors.black,
], stops: [
0.25,
0.75,
1.0
], begin: FractionalOffset.topCenter, end: FractionalOffset.bottomCenter)),
),
],
),
),
);
});
print("profileImages :${photos.length} ${profileImages.length}");
}
And this is what i displaying in pageview
PageView.builder(
controller: pageController,
onPageChanged: onPageChanged,
itemCount: profileImages.length,
itemBuilder: (context, position) {
return profileImages[position];
})
So my question is do i have to change anything or do i have to put placeholder?
The way I've handled it is by using a placeholder, so I use a Stack, i put the placeholder image underneath it and then once it loads, it just shows on top.
See the before and after:
And the code just pretty much looks like this:
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Image.asset('assets/placeholder.jpg',
fit: BoxFit.cover,
width: 600.0,
height: 900.0
),
Image.network(imgPath,
fit: BoxFit.cover,
width: 600.0,
height: 900.0
)]))
I am learning about carousel in flutter. I want to give the carousel image the full screen width. But the width is automatically taken by the carousel itself. Is there any way to give the image the full screen width inside carousel?
Here I have used both carousel_pro and carousel_slider, neither works as I expected. Please help.
List _images = [
Image.network(
"https://stimg.cardekho.com/images/carexteriorimages/630x420/Lamborghini/Lamborghini-Huracan-EVO/6731/1546932239757/front-left-side-47.jpg?tr=w-456,e-sharpen"),
Image.network(
"https://auto.ndtvimg.com/car-images/big/lamborghini/aventador/lamborghini-aventador.jpg?v=5"),
Image.network(
"https://www.lamborghini.com/sites/it-en/files/DAM/lamborghini/gateway-family/few-off/sian/car_sian.png"),
Image.network(
"https://www.topgear.com/sites/default/files/styles/16x9_1280w/public/images/news-article/2018/01/38eba6282581b285055465bd651a2a32/2bc8e460427441.5a4cdc300deb9.jpg?itok=emRGRkaa"),
Image.network(
"https://blog.dupontregistry.com/wp-content/uploads/2013/05/lamborghini-egoista.jpg"),
];
List _images2 = [
"https://stimg.cardekho.com/images/carexteriorimages/630x420/Lamborghini/Lamborghini-Huracan-EVO/6731/1546932239757/front-left-side-47.jpg?tr=w-456,e-sharpen",
"https://auto.ndtvimg.com/car-images/big/lamborghini/aventador/lamborghini-aventador.jpg?v=5",
"https://www.lamborghini.com/sites/it-en/files/DAM/lamborghini/gateway-family/few-off/sian/car_sian.png",
"https://www.topgear.com/sites/default/files/styles/16x9_1280w/public/images/news-article/2018/01/38eba6282581b285055465bd651a2a32/2bc8e460427441.5a4cdc300deb9.jpg?itok=emRGRkaa",
"https://blog.dupontregistry.com/wp-content/uploads/2013/05/lamborghini-egoista.jpg",
];
Carousel(
images: _images,
autoplay: true,
boxFit: BoxFit.fitWidth,
dotBgColor: Colors.transparent,
dotSize: 3,
dotColor: Colors.red,
dotIncreasedColor: Colors.red,
autoplayDuration: Duration(seconds: 3),
animationCurve: Curves.fastOutSlowIn,
),
),
SizedBox(height: 20),
CarouselSlider(
items: _images2
.map(
(x) => Container(
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(x, scale: 1),
),
),
),
)
.toList(),
autoPlay: true,
height: 200.0,
),
CarouselSlider(
options: CarouselOptions(
viewportFraction: 1,
This is example, hope it works for you
List<String> imgList;
CarouselSlider(
items: map<Widget>(
imgList,
(index, i) {
return Container(
margin: EdgeInsets.all(5.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Stack(children: <Widget>[
InkResponse(
child: Image.network(i,
fit: BoxFit.cover, width: 1000.0),
onTap: //....
this simple example from me
CarouselSlider(
items: _products
.map(
(p) => Image.network(
p.foto,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
)
.toList(),
options: CarouselOptions(
viewportFraction: 1.0,
enlargeCenterPage: false,
initialPage: 0,
onPageChanged: (index, reason) {
setState(() {
currentIndex = index;
_product = _products[index];
});
},
),
),
use padEnds Property of CarouselSlider,
also assign full width for image
CarouselSlider(
items: photoList
.map(
(e) => SizedBox(
width: double.maxFinite,
child: Image.network(
e,
fit: BoxFit.fitWidth,
),
),
)
.toList(),
options: CarouselOptions(
autoPlay: false,
initialPage: 0,
enableInfiniteScroll: false,
padEnds: false, // take full width, remove padding from all size
),
)