0

Hola soy nuevo en Flutter, quiero una página que cargue un arreglo de imágenes desde firebase pero solo carga una imagen en un arreglo

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class Page2 extends StatelessWidget {
  final CollectionReference _productsRef =
  FirebaseFirestore.instance.collection("banners");

  Page2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        FutureBuilder<QuerySnapshot>(
          future: _productsRef.get(),
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Scaffold(
                body: Center(
                  child: Text("Error: ${snapshot.error}"),
                ),
              );
            }
            if (snapshot.connectionState == ConnectionState.done) {
              return ListView(
                  children: snapshot.data!.docs.map<Widget>((document) {
                    return Image.network("${document['images'][0]}");
                  }).toList(growable: true)
              );
            }
            return const Scaffold(
              body: Center(
                  child: CircularProgressIndicator()
              ),
            );
          },
        ),
      ],

    );
  }

}

Visualización de una sola imagen Visualización de una sola imagen

BD Firebase: base de datos de firebase

1 respuesta 1

0

El problema es que en el children del ListView solo estás pasándole un objeto que contiene un array de elementos. Deberías pasarle el array directamente.

En lugar de :

return ListView(
                  children: snapshot.data!.docs.map<Widget>((document) {
                    return Image.network("${document['images'][0]}");
                  }).toList(growable: true)
              );

Podrías hacer:

return ListView(
                  children: snapshot.data!.docs[0]['images'].map<Widget>((image) {
                    return Image.network(image);
                  }).toList(growable: true)
              );

Con ese cambio, lo que haces es traer el primer documento(según tu imagen, tienes solo uno), y luego extraes el campo images que es un array de Strings, sobre eso haces el map para convertirlo a widget de Image.

1
  • Hola, una duda adicional, ¿es posible asignarle una url personalizada a cada imagen?, para que el usuario al momento de hacerle un tap a la imagen lo redirija a un sitio o archivo en específico Commented el 1 jul. 2022 a las 15:12

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.