ExampleRealtime · Database

Realtime Feed

Build a live feed that updates instantly when records are created, updated, or deleted — without polling.

Setup

Create a posts collection in your dashboard with read: public, write: authenticated, delete: owner. Then connect the realtime subscription after login:

lib/screens/feed_screen.dartDart

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

  @override
  State<FeedScreen> createState() => _FeedScreenState();
}

class _FeedScreenState extends State<FeedScreen> {
  List<KoolbaseRecord> _posts = [];
  KoolbaseSubscription? _sub;
  bool _loading = true;

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

  Future<void> _init() async {
    // 1. Load initial data
    final result = await Koolbase.db
      .collection('posts')
      .orderBy('created_at', descending: true)
      .limit(50)
      .get();

    setState(() {
      _posts = result.records;
      _loading = false;
    });

    // 2. Set realtime token if user is logged in
    final user = await Koolbase.auth.currentUser();
    if (user != null) {
      final token = await Koolbase.auth.getToken();
      Koolbase.realtime.setToken(token!);
    }

    // 3. Subscribe to live changes
    _sub = Koolbase.realtime.on(
      collection: 'posts',
      onCreated: (record) {
        setState(() => _posts.insert(0, record));
      },
      onUpdated: (record) {
        setState(() {
          final i = _posts.indexWhere((p) => p.id == record.id);
          if (i != -1) _posts[i] = record;
        });
      },
      onDeleted: (id) {
        setState(() => _posts.removeWhere((p) => p.id == id));
      },
    );
  }

  @override
  void dispose() {
    _sub?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (_loading) return const Center(child: CircularProgressIndicator());

    return ListView.builder(
      itemCount: _posts.length,
      itemBuilder: (_, i) {
        final post = _posts[i];
        return ListTile(
          title: Text(post.data['title'] ?? ''),
          subtitle: Text(post.data['body'] ?? ''),
        );
      },
    );
  }
}

Creating a post

lib/screens/feed_screen.dartDart

Future<void> _createPost(String title, String body) async {
  // Realtime subscription will automatically add this
  // to the list via the onCreated callback
  await Koolbase.db.collection('posts').insert({
    'title': title,
    'body': body,
    'published': true,
  });
}

No manual list update needed

When you insert a record, the realtime subscription fires onCreated and adds it to the list automatically. You don't need to manually refresh or add it to state after insertion.