Streambuilder in Flutter for Firestore

Question

Hi i am a newbie in flutter and I am trying to fetch data from the firestore using a stream builder and display a spinner while the data is being fetched from the firebase database. I tried implementing a stream builder and future builder. I have a function that fetches the data from the firestore and i then pass the data into another function to populate the silver grid. Can someone please help me?

getDevotions(DevotionNotifier d) async {
    QuerySnapshot snapshot =
        await Firestore.instance.collection('devotions').getDocuments();

    List<devotion> _devotionList = [];

    snapshot.documents.forEach((document) {
      devotion d1 = devotion.fromMap(document.data);
      _devotionList.add(d1);
    });

    d.devotionList = _devotionList;
  }
}

class _dailyDevotionPageState extends State<dailyDevotionPage> {
  @override
  void initState() {
    DevotionNotifier _devotionNotifier =
        Provider.of<DevotionNotifier>(context, listen: false);
    getDevotions(_devotionNotifier);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    DevotionNotifier _devotionNotifier = Provider.of<DevotionNotifier>(context);
    getDevotions(_devotionNotifier);

    String url = "https://picsum.photos/412/700";

    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              expandedHeight: 220.0,
              pinned: true,
              elevation: 50,
              flexibleSpace: FlexibleSpaceBar(
                collapseMode: CollapseMode.parallax,
                title: Text(
                  'Devotional',
                  style: TextStyle(
                    fontFamily: 'Merriweather',
                  ),
                ),
                background: Image.asset(
                  'assets/2.jpg', // <===   Add your own image to assets or use a .network image instead.
                  fit: BoxFit.cover,
                ),
              ),
            ),
            new SliverGrid(
              gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200.0,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 6.0,
                childAspectRatio: 0.7,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  int i = _devotionNotifier.devotionList.length - index - 1;

                  return devotionLayout(_devotionNotifier, i, context);
                },
                childCount: _devotionNotifier.devotionList.length,
              ),
            ),
          ],
        ),
      ),
    );
  }