[Flutter, Supabase] Supabase RealTime Data 가져오기

RealTime Data 가져오기

이전 포스팅으로 Supabase를 flutter에 연동하는 부분까지 알아보았다

[Flutter, Supabase] supabase 연동하기

이번 포스팅에서는 Supabase는 실시간으로 db를 감지해서 가져올 수 있다고 하는데
어떤 것을 사용해서 가져오고 flutter에서는 어떻게 쓰이는지 알아보겠습니다

 

Supabase - stream

하는 방법은 바로 stream과 channel이란 것을 사용해서 실시간 감지를 하게 됩니다
자세한 문서는 supabase 공식문서에서 확인하실 수 있습니다
이번 포스팅은 예제를 통해서 stream을 어떻게 사용하는지 알아보겠습니다

 

 SupabaseRealTimeView.dart

저번 포스팅을 통해서 final supabase = Supabase.instance.client 이 코드로 select를 수행했었는데
이번에도 마찬가지로 Supabase.instance.client 이 코드를 사용해서 stream을 사용합니다
Flutter에서는 StreamBuilder를 사용하고
stream에는 supabase.from('테이블이름'). stream(primaryKey : 입력)으로 테이블의 데이터를 stream 합니다

  //📲 supabase를 사용하기 위해 선언해줍니다
  final supabaseClient = Supabase.instance.client;
  
        //📲 전체 코드는 github에서 확인가능합니다
        ...
        
        //📲 stream을 flutter에서 사용하기 위해서는 StreamBuilder를 사용합니다
        child: StreamBuilder<List<Map<String, dynamic>>>(
          
          //📲 primarykey는 필수로 입력해줘야 합니다
          stream: supabase.from('todo').stream(primaryKey: ['id']),
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return const Center(
                child: CircularProgressIndicator(),
              );
            } else {
              if (snapshot.data!.isEmpty) {
                return const Center(
                  child: Text('데이터가 없습니다'),
                );
              }
            }
            final todos = snapshot.data!;
            return ListView.builder(
              itemCount: todos.length,
              itemBuilder: (context, index) {
              	//📲 가져온 todo 데이터를 표현해주는 부분
                return ListTile(
                    leading: Icon(
                      Icons.check_circle,
                      color: todos[index]['check'] ?? true
                          ? Colors.green
                          : Colors.grey,
                      size: 20,
                    ),
                    title: Text(todos[index]['todo'],
                        style: const TextStyle(
                          fontSize: 20,
                        )));
              },
            );
          },
        ),
      ),
    );
  }
  
//💡 stream 뒤에 listen으로 데이터값을 가져와서 안에서 해결해도 됩니다
supabase.from('todo').stream(primaryKey: ['id']).listen((event) {
debugPrint('$event');
});

이렇게 파일을 만드시면 아래와 같이 화면에 표시될 것입니다

 

 Realtime 확인하기

Supabase 웹 페이지로 이동해 check 값을 변동해 주면
따로 새로고침을 하지 않아도 되는지 테스트를 진행해 주면 됩니다
아래의 영상과 같이 FALSE를 TRUE로 변경했을 때 아이콘의 색이 실시간으로 변경되는 것을 확인할 수 있습니다 

 

Realtime 확인하는 코드는 저번 포스팅에 올렸던 github에 연장해서 올려두었습니다.
마음껏 사용하셔도 무관합니다

GitHub - Jeoungeunseok/supabase: supabase connection and postgreSQL use

---

이번 포스팅으로 Supabase db table 값의 변경사항을 실시간으로 감지하는 방법에 대해서 알아보았습니다
이제 새로운 데이터를 봐야 할 때 새로고침을 따로 안 해줘도 되어서 편하네요!
다음 포스팅에서는 APP안에서 Supabase를 사용해 CRUD 하는 방법에 대해서 알아보겠습니다
그럼 코딩이 쉬워지는 그날까지!!