CODEWITHSUNDEEP
flutterdartflutter-layout
CJW
CJW

Reputation: 1010

Use a Map with AssetImage

I have a scenario where I would like to load an image based on the text that is chosen to be displayed on the app.

For example, I have a map that looks like this:

final _activity = const [
    {'Activity': 'Rock Climbing','Image':'assets/images/rockclimbing.jpg'},
    {'Activity': 'Running','Image':'assets/images/running.jpg'},
];

If I want to display the text related to an Activity in a Text Widget I can do the following:

Text(
  activity[activityNumber]['Activity'],
),

However, I would also like to display the corresponding image, here is what I have tried that does not work:

decoration: BoxDecoration(
  color: const Color(0xff7c94b6),
  image: const DecorationImage(
    image:AssetImage (activity[activityNumber]['Image']),
    fit: BoxFit.cover,
),

I have also tried wrapping this in quotes, curly braces etc but I cannot make this work.

Upvotes: 0

Views: 392

Answers (1)

EdYuTo
EdYuTo

Reputation: 6864

The way you are doing should work:

Container(
        decoration: BoxDecoration(
          color: const Color(0xff7c94b6),
          image: DecorationImage(
            image: AssetImage(_activity[activityNumber]['Image']),
            fit: BoxFit.cover,
          ),
        ),
      );

Have you considered using Image.asset? Something like: Image.asset(_activity[activityNumber]['Image'])

Upvotes: 2

Related Questions