Cloud firestore documentation for flutter

Question

I am trying to write an app with flutter using cloud firestore but in the examples page I do not see a flutter/dart option for the example code, am I missing something? Here is where I am looking at https://firebase.google.com/docs/firestore/query-data/get-data Any help would be great. Thanks

Answer 1

Sorry for late answer, I was resolving my own project issue.

By the way I have Implemented CRUD Operation with cloud_firestore plugin.

SEE_CRUD_OPREATION_OUTPUT_VIDEO

Here you can analyse my full code:

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

class CRUDoperation extends StatefulWidget {
  @override
  _CRUDoperationState createState() => _CRUDoperationState();
}

class _CRUDoperationState extends State<CRUDoperation> {
  Firestore firestore = Firestore.instance;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("CRUD"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.group_add), 
            onPressed: (){
              showDialog(
                context: context,
                child: ShowCustomDialogBox(oprationName: "Add",)
              );
            }
          )
        ],

      ),
      body: Container(
       padding: const EdgeInsets.all(10),
       alignment: Alignment.center,
       child: StreamBuilder<QuerySnapshot>(
         stream: firestore.collection('Employee').snapshots(),     
         builder: (BuildContext context,AsyncSnapshot<QuerySnapshot> snapshot){
          if (snapshot.hasError){
            return new Center(
              child:Text('Error: ${snapshot.error}')
            );
          }
          if(!snapshot.hasData){
            return new Center(
              child:CircularProgressIndicator()
            );
          }
          else{
            var documents = snapshot.data.documents;


            if(documents.length>0){
              return ListView.builder(
                itemCount:documents.length ,
                itemBuilder: (context, index){
                  return Card(
                      child: ListTile(
                        leading: IconButton(
                          icon: Icon(Icons.edit,color: Colors.blue,), 
                          onPressed: (){
                           showDialog(
                             context: context,
                             child: ShowCustomDialogBox(
                              documentSnapshot:documents[index],
                              oprationName: "Edit",
                              )
                            );
                          }
                        ),
                        title: Text(documents[index].data['Name']),
                        subtitle: Text(documents[index].data['Post']),
                        trailing: IconButton(
                          icon: Icon(Icons.delete,color: Colors.red,), 
                          onPressed: (){
                          firestore.collection('Employee').document(documents[index].documentID)
                          .delete().then((onValue){ //delete user
                            print("Deleted successfully");
                          });
                          }
                        ),
                      ),
                    );
                }
              );
            }else{
              return Center(
                child: Text("Add Emlopyee list"),
              );
            }
          }

         }
        ),
      ),

    );
  }
}



//ADD OR EDIT USER DIALOG BOX
class ShowCustomDialogBox extends StatefulWidget {
 final  DocumentSnapshot documentSnapshot;
 final String oprationName;
  ShowCustomDialogBox({ this.documentSnapshot, this.oprationName});

  @override
  State<StatefulWidget> createState() => ShowCustomDialogBoxState();
}


class ShowCustomDialogBoxState extends State<ShowCustomDialogBox>with SingleTickerProviderStateMixin {

  TextEditingController nameController;

  TextEditingController postController ;

  Firestore firestore = Firestore.instance;


  @override
  void initState() {
    super.initState();
   nameController = widget.oprationName == "Edit" ? TextEditingController(text: widget.documentSnapshot.data['Name'])
   : TextEditingController();

    postController = widget.oprationName == "Edit"? TextEditingController(text:widget.documentSnapshot.data['Post'])
    :  TextEditingController();
  }

  launchOpration(){
    if(widget.oprationName == "Edit"){
     editEmployee();
    }else{
      addEmployee();
    }

  }


  addEmployee(){ //Create user
    if(nameController.text.isNotEmpty && postController.text.isNotEmpty){
      firestore.collection("Employee").add({
        'Name':nameController.text,
        'Post':postController.text
      })
      .then((doc){
        print("employee added successfully documentID :${doc.documentID}");
        nameController.clear();
        postController.clear();
        Navigator.of(context).pop();
      });
    }
    else{
      print("Please all fields");
    }
  }

  editEmployee(){   //Update User
    firestore.collection('Employee').document(widget.documentSnapshot.documentID).updateData({
     'Name':nameController.text,
      'Post':postController.text
    }).then((onValue){
      print("employee Edited successfully");
        nameController.clear();
        postController.clear();
        Navigator.of(context).pop();
    });
  }



  @override
  void dispose() {
    nameController.dispose();
    postController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Material(
        color: Colors.transparent,
        child: Container(
          margin: EdgeInsets.all(20.0),
            padding: EdgeInsets.all(8.0),
            height: MediaQuery.of(context).size.height/2.5,
            width: MediaQuery.of(context).size.width,
            decoration: ShapeDecoration(
              color: Colors.white,
              shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.0))),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text("${widget.oprationName} Employee"),
                       SizedBox(height:10),
                      TextField(
                        controller: nameController,
                        decoration: InputDecoration(
                          hintText: "Enter Name",
                          border: OutlineInputBorder()
                        ),
                      ),
                      SizedBox(height:10),
                      TextField(
                        controller: postController,
                        decoration: InputDecoration(
                          hintText: "Enter Post",
                          border: OutlineInputBorder()
                        ),
                      ),
                    ],
                  ),
                ),
                Padding(
                padding: const EdgeInsets.only(
                  left: 20.0, right: 10.0, top: 0.0,),
                  child:  ButtonTheme(
                    height: 35.0,
                    minWidth: MediaQuery.of(context).size.width/3.5,
                    child: RaisedButton(
                      color: Colors.blue,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(5.0)),
                      splashColor: Colors.white.withAlpha(40),
                      child: Text(
                        widget.oprationName,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 13.0),
                      ),
                      onPressed: () {
                        launchOpration();
                      },
                    )
                  )
              ),
            ],
          )
        ),
      ),
    );
  }
}

Answer 2

There are indeed no examples for Flutter in the Firebase documentation. What I do is that I read the Firebase documentation on the topic I'm trying to learn more about, and then use the FlutterFire documentation for Firestore to construct the corresponding Flutter example myself.

To navigate to the Flutter example, but step-wise it (currently) is:

• Go to the home page of the cloud_firestore plugin.
• Click on the Example tab

I also frequently use the FlutterFire reference documentation for Firestore to look up API signatures for Flutter, based on the examples in the Firebase documentation for Firestore.