How to use carousel_slider with assets in flutter - flutter

Question

I have been trying to use the carousel_slider tool in flutter but it does not seem to load up my asset images. I works when I change it to network images though. Could someone please tell me why. the code is below:
import 'package:flutter/material.dart';
import 'package:carousel_pro/carousel_pro.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:mindfulness/components/anxiety2.dart';
final List<String> imgList = [
'assets/images/anxiety1.png',
'assets/images/anxiety2.png'
];
class anxiety extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
backgroundColor: Colors.pink[200],
),
body: Builder(
builder: (context) {
final double height = MediaQuery.of(context).size.height;
return CarouselSlider(
options: CarouselOptions(
height: height,
viewportFraction: 1.0,
enlargeCenterPage: false,
// autoPlay: false,
),
items: imgList.map((item) => Container(
child: Center(
child: Image.asset(item, fit: BoxFit.cover, height: height,)
),
)).toList(),
);
},
),
);
}
}

Answer 1

What I found was that there was no need for a builder, the only parameters necessary were a list and an options parameter, so you can use the list to supply the assets one by one
import 'package:flutter/material.dart';
import 'package:carousel_pro/carousel_pro.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:mindfulness/components/anxiety2.dart';
class anxiety extends StatelessWidget {
#override
Widget build(BuildContext context) {
return CarouselSlider(
options: CarouselOptions(
autoPlay: true,
aspectRatio: 2.0,
enlargeCenterPage: true,
),
items: [
Image.asset('assets/images/anxiety1.png'),
Image.asset('assets/images/anxiety2.png'),
],
);
}
}

Answer 2

How about you change your code to this:
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
class ImageCarouselExample extends StatefulWidget {
const ImageCarouselExample({ Key? key }) : super(key: key);
#override
_ImageCarouselExampleState createState() => _ImageCarouselExampleState();
}
class _ImageCarouselExampleState extends State<ImageCarouselExample> {
int _currentIndex = 0;
late CarouselSlider carouselSlider;
List imageList = [
'assets/images/loginimage.jpeg',
'assets/images/smartanalytics.png',
'assets/images/smartbiometrics.png',
'assets/images/smarthmis.png',
];
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CarouselSlider(
options: CarouselOptions(
height: 250.0,
initialPage: 0,
autoPlay: true,
reverse: false,
enlargeCenterPage: true,
enableInfiniteScroll: true,
scrollDirection: Axis.horizontal,
autoPlayInterval: Duration(seconds: 2),
autoPlayAnimationDuration: Duration(milliseconds: 2000),
onPageChanged: (index, reason) => _currentIndex = index,
// pauseAutoPlayOnTouch: Duration(seconds: 10),
// scrollDirection: Axis.horizontal,
),
items: imageList
.map(
(item) => Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
margin: EdgeInsets.only(
top: 10.0,
bottom: 20.0,
),
elevation: 6.0,
shadowColor: Colors.redAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
child: Image.asset(
item,
fit: BoxFit.fill,
),
),
),
),
)
.toList(),
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: imageList.map((urlOfItem) {
int index = imageList.indexOf(urlOfItem);
return Container(
width: 10.0,
height: 10.0,
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _currentIndex == index
? Color.fromRGBO(0, 0, 0, 0.8)
: Color.fromRGBO(0, 0, 0, 0.3),
),
);
}).toList(),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(padding: EdgeInsets.symmetric(vertical: 100)),
FloatingActionButton(
heroTag: "btn1",
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => MainMenu()));
},
child: Icon(Icons.apps),
backgroundColor: Colors.red.shade800,
),
],
),
],
),
),
);
}
}

Answer 3

Have you added them to pubspec.yaml? Watch out for indentantion, like here.
After that stop an app and run it again, assets won't load if you hot restart.

Answer 4

I try one of the examples in one demo app, and it works like this:
Image(image: AssetImage(item), fit: BoxFit.cover, width: 1000.0),
Of course, first look at the pubspec.yaml, and be sure you have added the images