1

Intento pasar datos de un json que tengo en mis assets a unos widgets pero no he podido saber cómo, considerando que el json es prácticamente una lista de mapas. Agradezco su ayuda al respecto. Adjunto los códigos del widget principal y del json. En el primer Column donde esta el Text y donde esta la imagen quiero pasar respectivamente nombreProy e image (assets/${image+}).

En este caso necesitaría saber cómo transformar esos datos para que los pueda usar en los widgets.

Swiper(

    itemHeight: media.height * 0.4,
    itemWidth: media.width * .6,
    layout: SwiperLayout.TINDER,
    itemCount: 39,

    itemBuilder: (BuildContext context, int index){
      return Container(
        decoration: BoxDecoration(
          color: Colors.orange,
          border: Border.all(color: Color(0xFF858585)),
          borderRadius: BorderRadius.circular(20),
        ),
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('Familia Arkani', style: TextStyle(fontSize: 18),),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Image.asset('assets/arkani.png', height: 60, width: 60,),
            ),
            SizedBox(height: 20,),

            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,

              children: <Widget>[
                Column(
                  children: <Widget>[
                    Image.asset('pray.png', height: 30, width: 30,),
                    Padding(
                      padding: const EdgeInsets.only(top:5.0),
                      child: Text('Orar'),
                    ),
                    Switch(
                      value: isOrar,
                      onChanged: (value){
                        setState((){
                          isOrar = value;
                        });
                      },
                    )
                  ],

                ),
                Column(
                  children: <Widget>[
                    Image.asset('give.png', height: 30, width: 30,),
                    Padding(
                      padding: const EdgeInsets.only(top:5.0),
                      child: Text('Ofrendar'),
                    ),
                    Switch(
                      value: isOfrendar,
                      onChanged: (value){
                        setState((){
                          isOfrendar = value;
                        });
                      },
                    )
                  ],
                ),
                Column(
                  children: <Widget>[
                    Image.asset('move.png', height: 30, width: 30,),
                    Padding(
                      padding: const EdgeInsets.only(top:5.0),
                      child: Text('Movilizar'),
                    ),
                    Switch(
                      value: isMovilizar,
                      onChanged: (value){
                        setState((){
                          isMovilizar = value;
                        });
                      },
                    )
                  ],
                ),
              ],
            )
          ],
        ),
      );
    },

    control: new SwiperControl(),
  ),
);
  }
}

Este es el JSON Estos datos son los que quiero ir incorporando a algunos widgets

[
  {
    "id": 1,
    "nombreProy": "Fam. Arkani", //aqui quiero añadir el dato nombreProy
    "image": "arkani",
    "lugar": "Asia del Sur",
    "proceso": "En Campo"
  },
  {
    "id": 2,
    "nombreProy": "Fam. Durán",
    "image": "duran",
    "lugar": "Quechua Panao",
    "proceso": "En Campo"
  },
  {
    "id": 3,
    "nombreProy": "Fam. Flores Diego",
    "image": "flores_diego",
    "lugar": "Amahuacas",
    "proceso": "En Campo"
  },
  {
    "id": 4,
    "nombreProy": "Fam. Garay Galvez",
    "image": "garay_galvez",
    "lugar": "Estados Unidos",
    "proceso": "En Campo"
   },
]

1 respuesta 1

3

Si lo que quieres es obtener la clave - valor de tu Json, puedes hacerlo creándote clases en dart para luego almacenar los datos del Json en los atributos de la clase creada. Primero creas dos clases una clase la llamaremos Datos y a la otra ListaDatos, la primera clase Datos contendrá los valores de las claves de tu Json, en sus atributos correspondientes de la clase Datos, y la clase ListaDatos sera un conjunto de clases Datos,así para que puedas tener mas de un objeto Json en tu clase. Este es el código para las clases:

class ListaDatos {
  final List<Datos> dato;

  ListaDatos({
    this.dato,
  });

  factory ListaDatos.fromJson(List<dynamic> parsedJson) {
    List<Datos> data = new List<Datos>();
      data = parsedJson.map((i)=>Datos.fromJson(i)).toList();
    return new ListaDatos(
       dato: data,
    );
  }
}


class Datos{
  final String id;
  final String nombreProy;
  final String image;
  final String lugar;
  final String proceso;

  Datos({
    this.id,
    this.nombreProy,
    this.image,
    this.lugar,
    this.proceso,
  });

  factory Datos.fromJson(Map<String, dynamic> toJson){
      return new Datos(
        id: toJson["id"].toString(),
        nombreProy: toJson["nombreProy"],
        image: toJson["image"],
        lugar: toJson["lugar"],
        proceso: toJson["proceso"],

      );
  }

}

Luego necesitas métodos asíncronos para obtener los datos de tu Json guardado en la dirección : assets/mi_Json.json

Future<String> _cargarJson() async {
  return await rootBundle.loadString('assets/mi_Json.json');
}

Future<ListaDatos> cargarDatos() async {
  String jsonString = await _cargarJson(); 
  final jsonResponse = json.decode(jsonString);  
  return ListaDatos.fromJson(jsonResponse);
}

Luego en tu clase de tipo State: Declaras un Future de tipo ListaDatos para obtener los datos del Json

Future<ListaDatos> lista;

Luego en tu initState() llamas al método cargarDatos():

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

     lista=  cargarDatos();
   }

Ahora lo mas interesante en tu Widget en la parte del body debes declarar un FutureBuilder de tipo ListaDatos. La función de FutureBuilder es utilizar un widget mientras obtiene los datos del Json para luego mostrarlos, en este caso mostraremos un barra o circulo de carga mientras se este obteniendo los datos una vez obtenidos los datos Json, la barra de carga desaparecerá y mostrara tu Swiper.

Para obtener los datos del Future<ListaDatos> debes hacerlo de esta manera: snapshot.data.dato[0].nombreProy. Aquí te paso el widget tu utilizas los datos donde veas conveniente.

body:FutureBuilder<ListaDatos>(
              future: lista,  
              builder: (context, snapshot) {
                if (!snapshot.hasData){
                   return Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Colors.red[900]),),);
                }else{

                      return Swiper(
                        containerHeight: 500,                  
                        itemCount: 3,
                        itemBuilder: (BuildContext context, int index){
                        return Container(
                          height: 500,
                          decoration: BoxDecoration(
                            color: Colors.orange[100],
                            border: Border.all(color: Color(0xFF858585)),
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: Column(
                            children: <Widget>[
                              Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Text(snapshot.data.dato[0].nombreProy, style: TextStyle(fontSize: 18),),
                              ),
                              Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Image.asset('assets/arkani.png', height: 60, width: 60,),
                              ),
                              SizedBox(height: 20,),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceAround,

                                children: <Widget>[
                                  Column(
                                    children: <Widget>[
                                      Image.asset('pray.png', height: 30, width: 30,),
                                      Padding(
                                        padding: const EdgeInsets.only(top:5.0),
                                        child: Text('Orar'),
                                      ),
                                      Switch(
                                        value: isOrar,
                                        onChanged: (value){
                                          setState((){
                                            isOrar = value;
                                          });
                                        },
                                      )
                                    ],

                                  ),
                                  Column(
                                    children: <Widget>[
                                      Image.asset('give.png', height: 30, width: 30,),
                                      Padding(
                                        padding: const EdgeInsets.only(top:5.0),
                                        child: Text('Ofrendar'),
                                      ),
                                      Switch(
                                        value: isOfrendar,
                                        onChanged: (value){
                                          setState((){
                                            isOfrendar = value;
                                          });
                                        },
                                      )
                                    ],
                                  ),
                                  Column(
                                    children: <Widget>[
                                      Image.asset('move.png', height: 30, width: 30,),
                                      Padding(
                                        padding: const EdgeInsets.only(top:5.0),
                                        child: Text('Movilizar'),
                                      ),
                                      Switch(
                                        value: isMovilizar,
                                        onChanged: (value){
                                          setState((){
                                            isMovilizar = value;
                                          });
                                        },
                                      )
                                    ],
                                  ),
                                ],
                              )
                            ],
                          ),
                        );
                      },

                    control: new SwiperControl(),
                  );
                }
              }
        ),

No te olvides de importar las siguientes librerias para que los metodos async funciones y la conversion de Json a clase dart:

import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;
import 'dart:convert';

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.