1

Estoy iniciando en flutter y en mi aplicación busco mostrar una card para cada key que se encuentre en firebase

es decir que el key sea el texto titulo y el subtitulo el valor de la key, se me ocurrio crear una listview para mostrar los datos

para ello trate de hacer lo siguiente pero no muestra ningun dato:

import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';
import 'nuevo.dart';

void main() {
  runApp(new MaterialApp(
   home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  List <Post> list=new List();

 @override
 Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text("Data"),
    ),
    body: new Container(
      child:new Center(
        child: new ListView.builder(itemBuilder: (BuildContext context ,int index){
          return new Card(
            child: new Column(
              children: <Widget>[
                new Text(list[index].title),
                new Text(list[index].content)
              ],
            ),
          );
        },
        itemCount: list==null?0:list.length,
        ),
      )
    )
 );
 }
}

nuevo.dart

import 'package:flutter/material.dart';

class Post {
  String title;
  String content;
  Post(this.title,this.content);

  Post.fromJson(var value){
    this.title = value['title'];
    this.content = value['content'];
  }

}

Si me pudieran apoyar con documentacion o un tutorial completo sobre firebase con flutter tambiense los agradeceria

0

1 respuesta 1

1

Considerando que tu colección de Firestore sea algo asi:

{
'title': 'title', 
'content': 'content'
}

En si, consigues todos los datos de Firebase con: Firestore.instance.collection('{your_collection_name}').snapshots(), y podrías usar StreamBuilder conseguir conseguir todos los datos de tu colección.

StreamBuilder(
  stream: Firestore.instance.collection('{your_collection_name}').snapshots(),
  builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
    if (!snapshot.hasData) return CircularProgressIndicator();
    return ListView.builder(
      itemCount: snapshot.data.documents.length,
      itemBuilder: (BuildContext context, int index) {
        return new Card(
          child: new Column(
            children: <Widget>[
              new Text(snapshot.data.documents[index].title),
              new Text(snapshot.data.documents[index].content)
            ],
          ),
        );
      }
    );
  }
)

Explicación

El atributo stream obtendrá todos los datos que Firestore.instance.collection('{your_collection_name}').snapshots() devuelva, en este caso es una petición para conseguir todos los datos de la colección "{your_collection_name}", asegurate de cambiar el argumento que le pasas a collection a el nombre de tu colección.

En el atributo builder tenemos una función que toma un BuildContext y un AsyncSnapshot<QuerySnapshot>. Adentro de la función verificamos que snapshot tenga algún dato con if (!snapshot.hasData), si no tiene datos, retornamos un CircularProgressIndicator para que parezca que esta cargando. En el caso de que snapshot tenga algún dato, llamamos el ListView que tu usaste, nada mas que envés de usar list usamos snapshot.data.documents que es una lista con todos los datos de tu colección.

Como podrás ver, no utilice la clase List. Se me hace mas fácil así, aunque usar la clase podría mejorar la facilidad de leer tu código. Podrías partir de esta información para utilizar tu clase List o dejarlo así como te dejo en la sección de Código.

Código

main.dart

import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';
import 'nuevo.dart';

void main() {
  runApp(new MaterialApp(
   home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  List <Post> list=new List();

 @override
 Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text("Data"),
    ),
    body: new Container(
      child:new Center(
        child: StreamBuilder(
          stream: Firestore.instance.collection('{your_collection_name}').snapshots(),
          builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
            if (!snapshot.hasData) return CircularProgressIndicator();
            return ListView.builder(
              itemCount: snapshot.data.documents.length,
              itemBuilder: (BuildContext context, int index) {
                return new Card(
                  child: new Column(
                    children: <Widget>[
                      new Text(snapshot.data.documents[index].title),
                      new Text(snapshot.data.documents[index].content)
                    ],
                  ),
                );
              }
            );
          }
        )
      )
    )
  );
 }
}

Recomendaciones de tutoriales

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.