Flutter FutureBuilder using Supabase query

Question

I'm unable to get Supabase queries working with flutter. Here is an example of the code:

child: FutureBuilder<PostgrestResponse<dynamic>>(
   future: supabase.from('products').select().execute(),
      builder: (context, snapshot) {
         if (snapshot.connectionState != ConnectionState.active) {
            return const Center(
               child: SizedBox(
                  child: CircularProgressIndicator(),
                      width: 60,
                      height: 60,
                  ),
               );
            } else {
               return GridView.builder(
                  gridDelegate:
                      SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: gridColumns,
                        crossAxisSpacing: 10,
                        mainAxisSpacing: 10,
                      ),
                      itemCount: snapshot.data!.length, // this line is causing an error
                      ...

I have no idea how to turn the length of the snapshot. It is was to turn this to streambuilder it would work. So really all i'm after is a basic example of using a futurebuilder with supabase.

score 0 · Answer 1 · answered Jan 07 '22 at 05:45

You can use if (snapshot.hasData) instead of checking snapshots connection state. Because it would be not including any data and connection state is not active.

So you can change your code as;

child: FutureBuilder<PostgrestResponse<dynamic>>(
   future: supabase.from('products').select().execute(),
      builder: (context, snapshot) {
         if (!snapshot.hasData) {
            return const Center(
               child: SizedBox(
                  child: CircularProgressIndicator(),
                      width: 60,
                      height: 60,
                  ),
               );
            } else {
               return GridView.builder(
                  gridDelegate:
                      SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: gridColumns,
                        crossAxisSpacing: 10,
                        mainAxisSpacing: 10,
                      ),
                      itemCount: snapshot.data!.length, // this line is causing an error
                      ...

Thanks Mehmet, ok made that change but still unsure how you would output an itemCount for the builder? — Jake Anderson, Jan 07 '22 at 05:48
Can you show inside your `PostgrestResponse` class, probably you need to get length of some property inside it — Mehmet Ali Bayram, Jan 07 '22 at 05:51

score 0 · Answer 2 · answered Aug 14 '22 at 06:34

0

While debugging the code, the response is coming as snapshot.data.data

So, the count value can be obtained by

itemCount: snapshot.data.data?.length,

answered Aug 14 '22 at 06:34

Kathirvel Chandrasekaran

56
2
5

Flutter FutureBuilder using Supabase query

2 Answers2