xxxxxxxxxx
Widget slider() {
return Scaffold(
body: CarouselSlider.builder(
itemCount: imgList.length,
itemBuilder: (BuildContext context, int index , int J) {
return GestureDetector(
onTap: () {
print("Tapped " + imgList[index]);
},
child: Container(
height: 300,
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: NetworkImage(
imgList[index].toString(),
),
fit: BoxFit.cover,
),
),
),
);
}
,
options: CarouselOptions(
height: 320.0,
enlargeCenterPage: true,
autoPlay: true,
aspectRatio: 16 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 0.8,
),
)
);
}
}
xxxxxxxxxx
Widget slider() {
return Scaffold(
body: CarouselSlider(
items: [
ListView.builder(
itemCount: imgList.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
print("Tapped " + imgList[index]);
},
child: Container(
height: 300,
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: NetworkImage(
imgList[index].toString(),
),
fit: BoxFit.cover,
),
),
),
);
})
],
options: CarouselOptions(
height: 320.0,
enlargeCenterPage: true,
autoPlay: true,
aspectRatio: 16 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 0.8,
),
)
);
}
xxxxxxxxxx
carousel_slider: ^4.0.0
import 'package:carousel_slider/carousel_slider.dart';
List imgList = [
'https://picsum.photos/500/300?random=1',
'https://picsum.photos/500/300?random=2',
'https://picsum.photos/500/300?random=3',
'https://picsum.photos/500/300?random=4',
'https://picsum.photos/500/300?random=5',
];
CarouselSlider.builder(
itemCount: imgList.length,
itemBuilder: (context, index, realIndex) {
print(index);
return Container(
// height: 200,
child: Image.network(imgList[index]),
);
},
options: CarouselOptions(
enlargeCenterPage: true,
autoPlay: true,
),
),
xxxxxxxxxx
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'package:flutter/services.dart';
class CustomSlider extends StatefulWidget {
const CustomSlider({Key? key}) : super(key: key);
@override
_CustomSliderState createState() => _CustomSliderState();
}
class _CustomSliderState extends State<CustomSlider> {
late ui.Image customImage;
double sliderValue = 0.0;
Future<ui.Image> loadImage(String assetPath) async {
ByteData data = await rootBundle.load(assetPath);
ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
ui.FrameInfo fi = await codec.getNextFrame();
return fi.image;
}
@override
void initState() {
loadImage('images/star.png').then((image) {
setState(() {
customImage = image;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return SliderTheme(
data: SliderThemeData(
trackHeight: 28,
inactiveTrackColor: Colors.grey.shade300,
activeTrackColor: const Color(0xFFFFE900),
thumbShape: SliderThumbImage(customImage),
),
child: Slider(
value: 50,
min: 0,
max: 100,
onChanged: (value) {},
),
);
}
}
class SliderThumbImage extends SliderComponentShape {
final ui.Image image;
SliderThumbImage(this.image);
@override
Size getPreferredSize(bool isEnabled, bool isDiscrete) {
return const Size(0, 0);
}
@override
void paint(PaintingContext context, Offset center,
{required Animation<double> activationAnimation,
required Animation<double> enableAnimation,
required bool isDiscrete,
required TextPainter labelPainter,
required RenderBox parentBox,
required SliderThemeData sliderTheme,
required TextDirection textDirection,
required double value,
required double textScaleFactor,
required Size sizeWithOverflow}) {
final canvas = context.canvas;
final imageWidth = image.width;
final imageHeight = image.height;
Offset imageOffset = Offset(
center.dx - (imageWidth / 2),
center.dy - (imageHeight / 2),
);
Paint paint = Paint()..filterQuality = FilterQuality.high;
canvas.drawImage(image, imageOffset, paint);
}
}