1

Necesito llenar una ListView en flutter a partir de un archivo JSON, el cual contiene un String compuesto por muchas palabras separadas por un salto de línea \n. Mi idea es que cada palabra pueda ser un ítem independiente en la ListView para trabajar con ellas más adelante.

Aquí el código hasta el momento:

String en cuestión: [{ "Datos":"1 negro\n2blanco\n2verde\n2amarillo\n2rojo\n2azul\n" }]

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: FutureBuilder(
            future: DefaultAssetBundle.of(context).loadString('assets/data.json'),
            builder: (context, snapshot) {

              var newData = json.decode(snapshot.data.toString());

              return ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  return Padding(
                    padding: const EdgeInsets.only(
                    top: 32, bottom: 32, left: 16, right: 16),
                    child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                     Text(newData[index]['Datos'],
                     style: const TextStyle(
                     fontSize: 16,
                     fontWeight: FontWeight.normal),
                     textAlign: TextAlign.justify,),
                      ],
                    ),
                  );
                },
                //  itemCount: newData == null ? 0 : newData.length, /// ok
              );
            },
          ),
        ));
  }

1 respuesta 1

0

puedes hacerlo directamente en el futureBuilder o como yo prefiero, hacer un método aparte y cargar los datos en el initState Primero creamos una variable que va a guardar la lista de String:

List<String> jsonWords = [];

Y también una variable booleana para mostar un cargando mientras llenamos la lista:

bool loading = false;

personalmente yo creo un método donde recojo la data:

Future<void> getJsonData() async {
//con esta variable booleana puedes mostar un cargando en pantalla mientras generas la lista de palabras
setState(() => loading = true);

//en tu caso usa esta línea de código
/*final json =
    await DefaultAssetBundle.of(context).loadString('assets/data.json');*/

//en mi caso uso esta:
final json = [
  {"Datos": "1negro\n2blanco\n2verde\n2amarillo\n2rojo\n2azul\n"}
];

final jsnEncode = jsonEncode(json);

final decode = jsonDecode(jsnEncode);
final data = decode[0]["Datos"];

//separamos la cadena string siempre y cuando haya un "\n"
final split = data.toString().split("\n");

//hacemos un ciclo para poder ingresar cada palabra en una lista
for (var word in split) {
  listWords.add(word);
}

//eliminamos el último elemento que es un salto de línea vacío
setState(() => listWords.remove(listWords.last));
//debugPrint("datos: $data");

//con esto ya tienes una lista de palabras

//dejas de mostrar el cargando cuando ya has generado la lista
setState(() => loading = false);

}

Esto también lo puedes poner dentro del FutureBuilder sin problema.

Si lo pones dentro del FutureBuilder omite esta parte. Luego en el initState llamamos al método para que se inicialice antes de dibujar los widget y muestre el cargando en pantalla:

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

Y ya por último puedes agregar esta lista a tu ListView.builder:

    Expanded(
        child: loading
            ? Center(
                child: CircularProgressIndicator(),
              )
            : ListView.builder(
                itemCount: listJson.length,
                itemBuilder: (itemBuilder, index) {
                  return Container(
                    child: Text(listJson[index]),
                  );
                }))
2
  • Eres un Genio!!! muchas gracias funciona perfecto! Commented el 17 feb. a las 4:53
  • De nada, si la respuesta te fue útil no olvides de marcarla como aceptada, para que otras personas con problemas similares puedan verla como ayuda Commented el 19 feb. a las 13:37

Tu Respuesta

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

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