How do I parse images from a json file using flutter in which my images are local?

Question

I'm currently hard coding my images inside a list that takes in an imageUrl like this:

final slideList = [
  Slide(imageUrl: 'assets/images/dog1.jpeg'),
  Slide(imageUrl: 'assets/images/dog2.jpeg'),
  Slide(imageUrl: 'assets/images/dog3.jpeg')
];

I have an assets folder with an images folder nested inside, as well as a json file. I'm trying to figure out how to parse the json so I can avoid hard coding every single image I'll have in the future in said list. The json file looks like this:

[
  {
    "images": [
        "assets/images/dog1.jpeg",
        "assets/images/dog2.jpeg",
        "assets/images/dog3.jpeg"
    ]
  }
]

The images I'm using are located inside of my images folder, therefore I'm not using an api to grab images from the web. I want to be able to parse the json file and store the images in the list in the above code snippet rather than hard coding 100 different imageUrl's.

Any help would be much appreciated!

Answer 1

Assuming you are using json given above your Slide class will look like this

class Slide {
  String imageUrl;

  Slide(this.imageUrl);

  factory Slide.fromJson(dynamic json) {
    return Slide(json['Image'] as String);
  }

  @override
  String toString() {
    return '{ ${this.imageUrl} }';
  }
}

So to parse the json to the slide object you can use following code which will map JSON object to the Slide Object

void main() {
  String jsonString = '[{"Image":"assets/images/dog1.jpeg"},{"Image":"assets/images/dog2.jpeg"},{"Image":"assets/images/dog3.jpeg"}]';

  var mySlideJson = jsonDecode(jsonString) as List;

  List<Slide> slideObjs = mySlideJson.map((slideJson) => Slide.fromJson(slideJson)).toList();
}

Hope this helps to achieve your goal.

Answer 2

You can copy paste run full code below
Step 1: parse with Payload class , you can see full code below

final payload = payloadFromJson(jsonString);

Step 2: use List<Slide>.generate

 var slideList = new List<Slide>.generate(3, (i) {
      return Slide(
        imageUrl: payload[0].images[i],
      );
    });

output

I/flutter (10200): assets/images/dog1.jpeg
I/flutter (10200): assets/images/dog2.jpeg
I/flutter (10200): assets/images/dog3.jpeg
I/flutter (10200): [Instance of 'Slide', Instance of 'Slide', Instance of 'Slide']
I/flutter (10200): assets/images/dog1.jpeg
I/flutter (10200): assets/images/dog2.jpeg
I/flutter (10200): assets/images/dog3.jpeg

full code

import 'package:flutter/material.dart';
// To parse this JSON data, do
//
//     final payload = payloadFromJson(jsonString);

import 'dart:convert';

List<Payload> payloadFromJson(String str) => List<Payload>.from(json.decode(str).map((x) => Payload.fromJson(x)));

String payloadToJson(List<Payload> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class Payload {
  List<String> images;

  Payload({
    this.images,
  });

  factory Payload.fromJson(Map<String, dynamic> json) => Payload(
    images: List<String>.from(json["images"].map((x) => x)),
  );

  Map<String, dynamic> toJson() => {
    "images": List<dynamic>.from(images.map((x) => x)),
  };
}


class Slide {
  final String imageUrl;

  Slide({this.imageUrl});
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget { 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(        
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  String jsonString = '''
  [
  {
    "images": [
        "assets/images/dog1.jpeg",
        "assets/images/dog2.jpeg",
        "assets/images/dog3.jpeg"
    ]
  }
]
  ''';

  void _incrementCounter() {
    final payload = payloadFromJson(jsonString);
    print( payload[0].images[0] );
    print( payload[0].images[1] );
    print( payload[0].images[2] );

    var slideList = new List<Slide>.generate(3, (i) {
      return Slide(
        imageUrl: payload[0].images[i],
      );
    });

    print(slideList.toString());
    print(slideList[0].imageUrl);
    print(slideList[1].imageUrl);
    print(slideList[2].imageUrl);
    setState(() {    
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {    
    return Scaffold(
      appBar: AppBar(        
        title: Text(widget.title),
      ),
      body: Center(        
        child: Column(          
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}