Flutter - How to load images in from assets correctly? - image

Question

So I have this code that loads images from assets, correctly:
ClipRRect getUserCard(int index) {
double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
return ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Stack(
children: [
//IMAGE (and Name Overlay)
Container(
width: screenWidth,
height: screenHeight,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(lstUsers[index]["imageUrl"][0]),
fit: BoxFit.cover),
),
//NAME OVERLAY
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
//NAME AND AGE
Container(
//alignment: Alignment.center,
height: 80,
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.6),
//borderRadius: BorderRadius.circular(15),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
lstUsers[index]["name"] + ", ",
style: const TextStyle(
color: Colors.white,
fontSize: 24,
),
textAlign: TextAlign.center,
),
Text(
lstUsers[index]["age"],
style: const TextStyle(
color: Colors.white,
fontSize: 20,
),
textAlign: TextAlign.center,
),
],
),
Text(
lstUsers[index]["profession"],
style: const TextStyle(
color: Colors.white,
fontStyle: FontStyle.italic,
fontSize: 18,
),
textAlign: TextAlign.center,
),
],
),
),
const Divider(),
//SWIPE BUTTONS
Row(mainAxisAlignment: MainAxisAlignment.center, children: [
FloatingActionButton(
child: const Icon(
Icons.close_outlined,
color: Colors.black,
size: 32,
),
backgroundColor: Colors.white,
onPressed: () {
setState(() {
cardController.triggerLeft();
});
},
),
const SizedBox(
width: 25,
),
FloatingActionButton(
child: const Icon(
Icons.favorite_border_outlined,
color: Colors.black,
size: 32,
),
backgroundColor: Colors.white,
onPressed: () {
setState(() {
cardController.triggerRight();
});
},
),
]),
const Divider(),
],
),
//),
),
// ),
],
),
);
}
However, this causes the app to crash every few minutes. After googling I realized its because I am loading the images in the main thread. What is the right way to load the images. Do I need to use async / Future here. If so, how?
List lstUsers = [
{
"id": "p1",
"name": "John Doe",
"age": "44",
"imageUrl": [
"assets/images/anastasia-vityukova-unsplash-blackandwhiteimage.png",
"assets/images/anastasia-vityukova-unsplash.png",
],
"profession": "Financial Consultant"
},
{
"id": "p2",
"name": "John Doe 2",
"age": "42",
"imageUrl": [
"assets/images/good-faces-hiba-unsplash-blackandwhiteimage.png",
"assets/images/good-faces-hiba-unsplash.jpg",
],
"profession": "Financial Consultant"
}
];
EDIT: It wasn't crashing till I used only one image url; meaning the image url was just another key like the other properties. Now that I have included multiple images, it crashes.

Answer 1

Try this AssetImage alternate and see if the problem persists,
...
//IMAGE (and Name Overlay)
Container(
width: screenWidth,
height: screenHeight,
child: Image.asset(
lstUsers[index]["imageUrl"][0],
fit: BoxFit.cover,
),
),
...

Answer 2

You need to remove assets from assets/images/anastasia-vityukova-unsplash-blackandwhiteimage.png,
Like images/anastasia-vityukova-unsplash-blackandwhiteimage.png.
Demo output with structure, Flutter 2.5.0
Here are details about assets-and-images.
Does it solve the issue?

Answer 3

Turns out it was a problem with the emulator; I ran it on a device and it was working fine.