Related
I am using carousel slider package with smooth page indicator package to display the list of post items in Listview.builder.
I have successfully showing both the post and indicator in UI.
But my problem is while i swipe the images in first item, the dot indicator for all the items are moving along with it.
This is the code.
final CarouselController _controller = CarouselController();
CarouselSlider(
carouselController: _controller,
options: CarouselOptions(
height: 160.h,
enlargeCenterPage: false,
autoPlay: false,
aspectRatio: 16 / 9,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
},
autoPlayCurve: Curves.easeInBack,
enableInfiniteScroll:
dList[index].postUrl!.length == 1
? false
: true,
autoPlayAnimationDuration:
Duration(seconds: 10),
viewportFraction: 1.2,
),
items: name.map((item) {
return Padding(
padding: EdgeInsets.zero,
child: Container(
height: 200.h,
width: 350.w,
margin:
EdgeInsets.symmetric(vertical: 0),
child: InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder:
(BuildContext context) {
return Scaffold(
// backgroundColor: Colors.black,
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor:
Colors.transparent,
),
body: CarouselSlider(
carouselController:
_controller,
options: CarouselOptions(
height:
MediaQuery.of(context)
.size
.height,
enlargeCenterPage: true,
autoPlay: false,
aspectRatio: 16 / 9,
onPageChanged:
(index, reason) {
setState(() {
_current = index;
});
},
autoPlayCurve:
Curves.easeIn,
enableInfiniteScroll:
dList[index]
.postUrl!
.length ==
1
? false
: true,
viewportFraction: 1.0,
),
items: name.map((item) {
return Padding(
padding: EdgeInsets.zero,
child: Container(
height: MediaQuery.of(
context)
.size
.height,
width: MediaQuery.of(
context)
.size
.width,
margin: EdgeInsets
.symmetric(
vertical: 0),
child:
InteractiveViewer(
child: getRectangleImageForQRCode(
item.toString()),
),
),
);
}).toList(),
),
);
}));
},
child: getRectangleImageForQRCode(
item.toString()),
),
),
);
}).toList(),
),
dList[index].postUrl!.length == 1
? Container()
: Align(
alignment: Alignment.center,
child: AnimatedSmoothIndicator(
activeIndex: _current,
count:
dList[index].postUrl!.length <= 2
? 2
: 3,
effect: JumpingDotEffect(
dotHeight: 10.h,
dotWidth: 10.h,
jumpScale: .7,
verticalOffset: 20,
activeDotColor: Colors.red,
dotColor: Colors.grey),
),
)
What wrong in this code? Please help friends.
how to put on image like the design. I was learn on youtube but tutorial have only outside, I try to use Carousel_Pro but it's can't use because it's not nullSafety .
Center(
child: CarouselSlider(
carouselController: _carouselController,
options: CarouselOptions(
initialPage: 0,
height: MediaQuery.of(context).size.height * 0.23,
viewportFraction: 1.0,
enlargeCenterPage: false,
onPageChanged: (index, reason) =>
setState(() => activeIndex = index)
// autoPlay: false,
),
items: imageList
.map((item) => Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: SizedBox(
height:
MediaQuery.of(context).size.height *
1,
width:
MediaQuery.of(context).size.width * 1,
child: Image.network(
item,
fit: BoxFit.cover,
height:
MediaQuery.of(context).size.height *
1,
))),
))
.toList(),
)),
buildIndicator(),
Use the Stack widget : https://api.flutter.dev/flutter/widgets/Stack-class.html
It will help you to stack widget one on another instead of one under another
Center(
child: CarouselSlider(
carouselController: _carouselController,
options: CarouselOptions(
initialPage: 0,
height: MediaQuery.of(context).size.height * 0.23,
viewportFraction: 1.0,
enlargeCenterPage: false,
onPageChanged: (index, reason) =>
setState(() => activeIndex = index)
// autoPlay: false,
),
items: imageList
.map((item) => Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: SizedBox(
height:
MediaQuery.of(context).size.height *
1,
width:
MediaQuery.of(context).size.width * 1,
child: Image.network(
item,
fit: BoxFit.cover,
height:
MediaQuery.of(context).size.height *
1,
))),
))
.toList(),
)),
imageList.lenght> 0? buildIndicator() : SizedBox(),
Is there a way to find the index of a carousel item so I can use it to retrieve the related text and link associated with the items shown??
So I have 3 lists, a list for images, a list for text, and a list for urls.
Is there a way to find the associated index/key to reuse??
child: Container(
child: CarouselSlider(
options: CarouselOptions(
enlargeCenterPage: true,
enableInfiniteScroll: true,
autoPlay: true,
// pageSnapping: true,
),
items: listThumbs.map((e) => ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Stack(
//fit: StackFit.expand,
children: <Widget>[
Image.network(e,
width: 1050,
height: 350,
fit: BoxFit.cover,
),
Text(videObj.results[INDEX].name),
] ),
)).toList(),
)),
You can try using the builder method.
CarouselSlider example
CarouselSlider.builder(
itemCount: 15,
itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) =>
Container(
child: Text(itemIndex.toString()),
),
)
This method will give the index of every item.
You can call 'indexOf' in the map iteration area.
int idx = listThumbs.indexOf(e);
child: Container(
child: CarouselSlider(
options: CarouselOptions(
enlargeCenterPage: true,
enableInfiniteScroll: true,
autoPlay: true,
// pageSnapping: true,
),
items: listThumbs.map((e) {
// Here you can find item index.
int idx = listThumbs.indexOf(e);
return ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Stack(
//fit: StackFit.expand,
children: <Widget>[
Image.network(e,
width: 1050,
height: 350,
fit: BoxFit.cover,
),
Text(videObj.results[INDEX].name),
]),
);
}
)).toList(),
)),
I have a carousel, two iconButtons in a Positioned Layout, gridView and 2 other positioned layouts All Inside A Stack Layout.
The onPressed() functions on the iconButtons specifically or on any of the elements general do not get triggered. I figured out that the issue is because of the Parent Stack Layout because when place them outside of it the onPressed works.
I need the Stack Layout for the design so im wondering if there is an alternative for it.
Here's an example of the code:
child: Stack(
children: <Widget>[
Container(
child: Column(
children: <Widget>[
carouselSlider = CarouselSlider(
height: 270.0,
initialPage: 0,
viewportFraction: 1.0,
aspectRatio: 1.0,
enlargeCenterPage: false,
autoPlay: true,
reverse: false,
enableInfiniteScroll: true,
autoPlayInterval: Duration(seconds: 2),
autoPlayAnimationDuration:
Duration(milliseconds: 2000),
pauseAutoPlayOnTouch: Duration(seconds: 10),
scrollDirection: Axis.horizontal,
onPageChanged: (index) {
setState(() {
current = index;
});
},
items: carouselImages.map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
child: GestureDetector(
// behavior:
// HitTestBehavior.translucent,
child: Image.asset(
i,
fit: BoxFit.cover,
),
onTap: () {
// Navigator.push<Widget>(
// context,
// MaterialPageRoute(
// builder: (context) => ImageScreen(i),
// ),
// );
}));
},
);
}).toList(),
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children:
map<Widget>(carouselImages, (index, url) {
return Container(
width: 10.0,
height: 10.0,
margin: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: current == index
? Color.fromRGBO(221, 40, 42, 0.7)
: Colors.white,
),
);
}),
),
],
),
),
Positioned(
right: 5,
top: 10,
child: IconButton(
icon: Icon(Icons.menu),
color: Color.fromRGBO(221, 40, 42, 0.7),
iconSize: 20.0,
onPressed: () {
print('Clicked');
scaffolddKey.currentState.openDrawer();
},
),
),
The solution is to wrap all of your widgets that are not supposed to receive tap events in IgnorePointer widget.
If your CarouselSlider is not supposed to receive tap events then wrap it and all other widgets that are not supposed to receive tap events in IgnorePointer widget.
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
),
)