Как я могу проанализировать изображения из файла json, используя флаттер, в котором мои изображения являются локальными?

Question

В настоящее время я жестко кодирую свои изображения в списке, который принимает imageUrl следующим образом:

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

У меня есть папка ресурсов с вложенной папкой с изображениями, а также json файл. Я пытаюсь понять, как анализировать json, чтобы избежать жесткого кодирования каждого изображения, которое будет в будущем в указанном списке. Файл json выглядит следующим образом:

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

Используемые изображения находятся внутри папки с изображениями, поэтому я не использую API-интерфейс для получения изображений из Интернета. Я хочу иметь возможность анализировать файл json и сохранять изображения в списке в приведенном выше фрагменте кода, а не жестко кодировать 100 различных изображений ImageUrl.

Любая помощь будет высоко ценится!

Answer 1

Предполагая, что вы используете json, указанный выше, ваш класс Slide будет выглядеть следующим образом

class Slide {
  String imageUrl;

  Slide(this.imageUrl);

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

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

Таким образом, чтобы проанализировать json для объекта слайда, вы можете использовать следующий код, который отобразит JSON объект для Slide объекта

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();
}

Надеюсь, это поможет достичь вашей цели.

Answer 2

Вы можете скопировать и вставить полный код ниже
Шаг 1: проанализировать с классом Payload, вы можете увидеть полный код ниже

final payload = payloadFromJson(jsonString);

Шаг 2: использовать List<Slide>.generate

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

выход

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

полный код

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),
      ), 
    );
  }
}