Observe in real time

Amplify Flutter v0 is now in Maintenance Mode until July 19th, 2024. This means that we will continue to include updates to ensure compatibility with backend services and security. No new features will be introduced in v0.

Please use the latest version (v1) of Amplify Flutter to get started.

If you are currently using v0, follow these instructions to upgrade to v1.

Observe model mutations in real-time

You can subscribe to changes on your Models. This reacts dynamically to updates of data to the underlying Storage Engine, which could be the result of GraphQL Subscriptions as well as Queries or Mutations that run against the backing AppSync API if you are synchronizing with the cloud.

1StreamSubscription<SubscriptionEvent<Post>>? stream;
2
3void listenChanges() {
4  stream = Amplify.DataStore.observe(Post.classType).listen(
5    (event) {
6      print('Received event of type ' + event.eventType.toString());
7      print('Received post ' + event.item.toString());
8    },
9  );
10}
11
12void stopListeningChanges() {
13  stream?.cancel();
14}

Observe query results in real-time

observeQuery(...) returns an initial data set, similar to query(...), and also automatically subscribes to subsequent changes to the query.

The first snapshot returned from observeQuery will contain the same results as calling query directly on your Model - a collection of all the locally-available records. Subsequent snapshots will be emitted as updates to the dataset are received in the local store.

While data is syncing from the cloud, snapshots will contain all of the items synced so far and an isSynced status of false. When the sync process is complete, a snapshot will be emitted with all the records in the local store and an isSynced status of true.

In addition to typical real-time use cases, observeQuery can be used on app launch to show your customers an initial data set from the local store while new data is being synced from cloud.

observeQuery also accepts the same predicates and sorting options as query.

1void main() {
2  runApp(MyApp());
3}
4
5class MyApp extends StatefulWidget {
6  const MyApp({Key? key}) : super(key: key);
7
8  @override
9  State<MyApp> createState() => _MyAppState();
10}
11
12class _MyAppState extends State<MyApp> {
13  StreamSubscription<QuerySnapshot<Post>>? _stream;
14
15  // Initialize a list for storing posts
16  List<Post> _posts = [];
17
18  // Initialize a boolean indicating if the sync process has completed
19  bool _isSynced = false;
20
21  // Initialize the libraries
22  ...
23
24  void observeQuery() {
25    _stream = Amplify.DataStore.observeQuery(
26      Post.classType,
27      where: Post.TITLE.beginsWith('post') & (Post.RATING > 10),
28      sortBy: [Post.RATING.ascending()],
29    ).listen((QuerySnapshot<Post> snapshot) {
30      setState(() {
31        _posts = snapshot.items;
32        _isSynced = snapshot.isSynced;
33      });
34    });
35  }
36
37  // Build function and UI elements
38  ...
39
40  @override
41  void dispose() {
42    _stream?.cancel();
43    super.dispose();
44  }
45}