Как отобразить изображения из файла JSON в карусели (слайдер) во Flutter

Question

У меня есть локальный файл json assets/properties.json, в котором в ключе «image» хранятся [5 разных изображений] с другими ключами, а также с именем, местом и т. Д. Я хочу, чтобы эти изображения отображались в carouselSlider.

Я искал, но не могу найти что-то конкретное для того, что я пытаюсь сделать.

import 'package:flutter/material.dart';
import 'package:carousel_pro/carousel_pro.dart';
import 'package:flutter_test_app/test_page.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'dart:convert';
import 'dart:async';
import 'package:flutter_test_app/propery_details_widget.dart';

class PropertyDetails extends StatefulWidget {
  @override
  _PropertyDetailsState createState() => _PropertyDetailsState();
}

class _PropertyDetailsState extends State<PropertyDetails> {
  List properties;
  Future<String> loadJsonData() async {
    var jsonText = await rootBundle.loadString("assets/properties.json");
    setState(() {
      properties = json.decode(jsonText);
    });
    return 'success';
  }
  int index = 1;

  List<String> listaTela = new List();

  CarouselSlider instance;

  @override
  void initState() {
    super.initState();
    this.loadJsonData();

    listaTela.add("assets/images/houses/house.jpg");
    listaTela.add('assets/images/houses/house1.jpg');
    listaTela.add('assets/images/houses/house2.jpg');
    listaTela.add('assets/images/houses/house3.jpg');
    listaTela.add('assets/images/houses/house4.jpg');
  }

  @override
  Widget build(BuildContext context) {
    instance = new CarouselSlider(
      autoPlay: true,
      autoPlayDuration: new Duration(seconds: 2),
      items: listaTela.map((it) {
        return new Container(
          width: MediaQuery.of(context).size.width,
//          margin: new EdgeInsets.symmetric(horizontal: 5.0),
          decoration: new BoxDecoration(

//            color: Colors.amber,
          ),
          child: new Image.asset(it),
        );
      }).toList(),
      height: 200,
    );

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Test App"),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Column(
          children: <Widget>[
            instance,
            Flexible(
              fit: FlexFit.tight,
              child: Container(
                child: Details(),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Вместо того, чтобы вызывать изображения из ассетов listaTela.add("assets/images/houses/house.jpg");, как это, я хочу вызывать их с помощью моего ключа изображенияв файле JSON.вне моей карусели я могу назвать мои изображения по properties[index]["image"][0],

Answer 1

Попробуй это. (Существует вероятность, что map не будет работать, потому что он будет иметь неправильный тип. Я не думаю, что вы включили весь JSON, так как вы индексируете его по index, но вы не показываете [] вокруг json указывает массив json.)

class _PropertyDetailsState extends State<PropertyDetails> {
  List properties;
  int index = 1;

  Future<void> loadJsonData() async {
    var jsonText = await rootBundle.loadString("assets/properties.json");
    setState(() {
      properties = json.decode(jsonText);
    });
  }

  @override
  void initState() {
    super.initState();
    loadJsonData();
  }

  @override
  Widget build(BuildContext context) {
    Widget carousel = properties == null
        ? CircularProgressIndicator()
        : CarouselSlider(
            items: properties[index]["image"].map((it) {
              return new Container(
                width: MediaQuery.of(context).size.width,
                decoration: new BoxDecoration(),
                child: new Image.asset(it),
              );
            }).toList(),
            autoPlay: true,
            autoPlayDuration: new Duration(seconds: 2),
            height: 200,
          );

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Test App"),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Column(
          children: <Widget>[
            carousel,
            Flexible(
              fit: FlexFit.tight,
              child: Container(
                child: Details(),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 2

Насколько я понимаю вашу проблему, есть несколько проблем.

1. вы, вероятно, хотите отобразить объекты JSON в Dart
2. вы хотите отобразить наборизображений в Слайдере, начиная с механизма индекса
3. , чтобы обновить дерево виджетов, если вы хотите обновить ползунок

JSON и Dart

Привыкает к построению package:built_value это хороший путь.Это позволит вам иметь объект Dart или список объектов, сопоставленных из файла JSON.Или, если вы хотите пойти проще, вы можете сделать то, что описано здесь: https://flutter.dev/docs/development/data-and-backend/json#serializing-json-manually-using-dartconvert

Изображения из индекса и обновления

В основном, что вы хотите сделать вваш initState - это:

load image data from json -> set start index -> somehow get Flutter to map N image paths to Image widgets and update tree

Псевдокод типа initState может выглядеть так:

void initState() {
  super.initState();

  // step 1: load json and map it to Dart objects
  this.loadFromJson().then(() {
    // loadFromJson returns with a Future, `then` allows you to do computation after it returns
    setState(() {
      // setting property in setState tells Flutter: hey buddy, stuff happened, rebuild!
      this.startIndex = 0;
    });
  });
}

внутри вашей сборки:

// [...]
CarouselSlider(
  items: listaTela.skip(this.startIndex).take(5).map((imgObj) => Image.asset(imgObj.assetPath))
);

Надеюсь, я понял вашу проблему и дал вам соответствующий ответ.