How do I decode received data from supabase in Dart/Flutter?

Question

In Dart/Flutter, using the supabase package, I'm trying to decode the data I receive for example from the following code:

final data = await supabase
  .from('countries')
  .select('''
    name,
    cities (
      name
    )
  ''');

How do I do that? Can anyone provide me with an example how I get the resulting Dart objects out of data? How would I e.g. print the table that I get as result?

Code taken from the documentation: https://supabase.com/docs/reference/dart/select

I tried to decode it as if I would decode json but it did not work.

Answer 1

Here is little code that explain how to use supabase data

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Countries',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _future = Supabase.instance.client
      .from('countries')
      .select();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<Map<String, dynamic>>>(
        future: _future,
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return const Center(child: CircularProgressIndicator());
          }
          final countries = snapshot.data!;
          return ListView.builder(
            itemCount: countries.length,
            itemBuilder: ((context, index) {
              final country = countries[index];
              return ListTile(
                title: Text(country['name']),
              );
            }),
          );
        },
      ),
    );
  }
}

See Use Supabase with Flutter for details.

For fetching data without future builder. Method 2.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Countries',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
List countries = [];


@override
void initState(){
getCountryData();
super.initState();
}


void  getCountryData()async{
List data = await Supabase.instance.client
      .from('countries')
      .select()
setState((){
countries.addAll(data);
});


}


  final _future = Supabase.instance.client
      .from('countries')
      .select();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:  countries.isNotEmpty ?ListView.builder(
            itemCount: countries.length,
            itemBuilder: ((context, index) {
              final country = countries[index];
              return ListTile(
                title: Text(country['name']),
              );
):const SizedBox.shrink()
}       
}