Flutter i need to show slider image like this
I use Carouselslide butnot able to achieve same like as i show
my code is
Container(
width: double.infinity,
child: CarouselSlider(
options: CarouselOptions(
disableCenter: true,
enableInfiniteScroll: false,
viewportFraction: 0.7,
enlargeCenterPage: false,
height: Height * 0.21,
),
items: list
.map((item) => Container(
child: Image.asset(item),
))
.toList(),
)),
Its showing like this
I need to show as show in above image. Or is it not possible by Carousel slider ?
Try this code
Padding(
padding: EdgeInsets.only(left: 0, right: 0, top: 0),
child: Container(
child: CarouselSlider(
options: CarouselOptions(
height: Height * 0.21,
autoPlay: true,
viewportFraction: 1.0,
disableCenter: true,
enableInfiniteScroll: false,
),
items: list
.map((item) => Container(
child: Image.network(item, fit: BoxFit.cover, width: 400),
))
.toList(),
)),
)
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(),
I am trying to enable autoscroll to a cards . it should scroll in a vertical .i want Autoscroll work without any user action.
and autoScroll in 5 second .
this is part pf my code i want to scroll:
Container(
width: 3000,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: CarouselSlider(
options: CarouselOptions(height: 150.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: greenHex),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(
top: 0, right: 10, left: 0, bottom: 8),
),
],
),
);
},
);
}).toList(),
),
),
),
can anyone help me please ?
You need to enable autoPlay and set autoPlayInterval in Carousel Slider Options.
Example:
CarouselSlider.builder(
options: CarouselOptions(
.
.
.
autoPlay: true,
autoPlayInterval: const Duration(seconds: 4),
enableInfiniteScroll: true,
),
),
try below code hope its help to you. refer documentation here try yo set autoplay true
options: CarouselOptions(
autoPlay: true,
),
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 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
),
)