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.

CodePudding user response：

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,
  ),
),
...

CodePudding user response：

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?