Flutter sort data Firestore with Streambuilder

Question

My goal: When the user presses the "List" button inside "_mainListItem" I want the listview to get sorted by orderBy. Aswell as updated on screen

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


class mainlist extends StatefulWidget {
  @override
  _mainlistpage createState() => _mainlistpage();
}

class _mainlistpage extends State<mainlist> {


  Widget homePage() {
    return StreamBuilder(
      stream: Firestore.instance.collection("Test").snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) return Text("Loading");
        return ListView.builder(
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context, index) =>
                _mainListItem(context, snapshot.data.documents[index]));
      },
    );
  }


  Widget _mainListItem(BuildContext context, DocumentSnapshot document) {
    return Card(
      color: Colors.white,
      child: InkWell(
        onTap: () {
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => profile(context, document)));
        },
        child: Container(
          width: double.infinity,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                    border: Border(bottom: BorderSide(color: Colors.black12))),
                child: Row(
                  children: [
                    Expanded(
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Column(
                            children: <Widget>[
                              Stack(
                                  alignment: Alignment.topRight,
                                  children: <Widget>[
                                    Padding(
                                      padding: const EdgeInsets.only(right: 5),
                                      child: ClipRRect(
                                        borderRadius:
                                            BorderRadius.circular(0.0),
                                        child: FittedBox(
                                            child: Image.asset(
                                          "assets/Profile Picture.png",
                                          fit: BoxFit.fill,
                                        )),
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(
                                          top: 7, right: 4),
                                      child: Text(
                                        'Test',
                                        style: TextStyle(fontSize: 12),
                                      ),
                                    ),
                                  ]),
                              Row()
                            ],
                          ),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    document['name'],
                                  ),
                                  // Text("2km"),
                                ],
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              Column(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 5, bottom: 5),
                    child: Row(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.only(left: 10, right: 7),
                          child: Container(
                            child: Material(
                              borderRadius: BorderRadius.circular(5),
                              shadowColor: Colors.black,
                              elevation: 1,
                              child: SizedBox(
                                  height: 28,
                                  width: 68,
                                  child: IconButton(
                                    padding: EdgeInsets.only(bottom: 10),
                                    **icon: Icon(Icons.list),
                                    disabledColor: Colors.blue,
                                    iconSize: 25,**
                                  )),
                            ),
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        backgroundColor: Colors.grey,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios),
          color: Colors.red,
        ),
        title: Text("Test"),
        centerTitle: true,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            iconSize: 30,
            color: Colors.white,
          )
        ],
      ),
      body: homePage(),
    );
  }
}

I have tried - adding the streambuilder function into the ontapped: on the List button - have read and watched every video there is and still can't find the solution

note: the app looks weird because I deleted unnecessary information

Answer 1

You can sort the list items before the snapshot method like:

.orderBy('sortField', descending: true).snapshot()

I hope this works for you.

Answer 2

Try mapping the values to a List<CustomObject> and using the list of objects in your list view.