feat: add clientId switch to the example app

example/lib/main.dart

@@ -15,40 +15,97 @@ Future<void> main() async {
   // Because AblyService has to be initialized before runApp is called
   // provisioning also has to be done before the app starts
   final apiKeyProvision = await ApiKeyService().getOrProvisionApiKey();
-  final ablyService = AblyService(apiKeyProvision: apiKeyProvision);
-  runApp(AblyFlutterExampleApp(ablyService: ablyService));
+  runApp(AblyFlutterExampleApp(apiKeyProvision: apiKeyProvision));
 }
 
-class AblyFlutterExampleApp extends StatelessWidget {
-  final AblyService ablyService;
+class AblyFlutterExampleApp extends StatefulWidget {
+  final ApiKeyProvision apiKeyProvision;
 
   const AblyFlutterExampleApp({
-    required this.ablyService,
+    required this.apiKeyProvision,
     Key? key,
   }) : super(key: key);
 
+  @override
+  State<AblyFlutterExampleApp> createState() => _AblyFlutterExampleAppState();
+}
+
+class _AblyFlutterExampleAppState extends State<AblyFlutterExampleApp> {
+  AblyService? ablyService;
+  String clientId = '';
+
   @override
   Widget build(BuildContext context) => MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: const Text('Ably Flutter Example App'),
           ),
           body: Center(
-            child: ListView(
-                padding:
-                    const EdgeInsets.symmetric(vertical: 24, horizontal: 36),
-                children: [
-                  SystemDetailsSliver(
-                    apiKeyProvision: ablyService.apiKeyProvision,
-                  ),
-                  const Divider(),
-                  RealtimeSliver(ablyService),
-                  const Divider(),
-                  RestSliver(ablyService.rest),
-                  const Divider(),
-                  PushNotificationsSliver(ablyService.pushNotificationService)
-                ]),
+            child: ablyService == null
+                ? ListView(
+                    padding: const EdgeInsets.symmetric(
+                        vertical: 24, horizontal: 36),
+                    children: [
+                        TextFormField(
+                          decoration: const InputDecoration(
+                            hintText: 'Enter Client ID',
+                          ),
+                          onChanged: (value) {
+                            setState(() {
+                              clientId = value;
+                            });
+                          },
+                        ),
+                        ElevatedButton(
+                          onPressed: () {
+                            setState(() {
+                              ablyService = AblyService(
+                                  apiKeyProvision: widget.apiKeyProvision,
+                                  clientId: clientId);
+                            });
+                          },
+                          child: const Text('Submit'),
+                        )
+                      ])
+                : AblyFlutterExampleContent(
+                    ablyService: ablyService!,
+                    onLogout: () {
+                      setState(() {
+                        ablyService = null;
+                      });
+                    }),
           ),
         ),
       );
 }
+
+class AblyFlutterExampleContent extends StatelessWidget {
+  final AblyService ablyService;
+  final void Function() onLogout;
+
+  const AblyFlutterExampleContent({
+    required this.ablyService,
+    required this.onLogout,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) => ListView(
+          padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 36),
+          children: [
+            ElevatedButton(
+              onPressed: onLogout,
+              child: const Text('Logout'),
+            ),
+            SystemDetailsSliver(
+              apiKeyProvision: ablyService.apiKeyProvision,
+              clientId: ablyService.clientId,
+            ),
+            const Divider(),
+            RealtimeSliver(ablyService),
+            const Divider(),
+            RestSliver(ablyService.rest),
+            const Divider(),
+            PushNotificationsSliver(ablyService.pushNotificationService)
+          ]);
+}

example/lib/ui/ably_service.dart

@@ -4,16 +4,17 @@ import 'package:ably_flutter_example/push_notifications/push_notification_servic
 import 'package:ably_flutter_example/ui/api_key_service.dart';
 
 class AblyService {
+  final String clientId;
   late final ably.Realtime realtime;
   late final ably.Rest rest;
   late final PushNotificationService pushNotificationService;
   late final ApiKeyProvision apiKeyProvision;
 
-  AblyService({required this.apiKeyProvision}) {
+  AblyService({required this.apiKeyProvision, required this.clientId}) {
     realtime = ably.Realtime(
       options: ably.ClientOptions(
         key: apiKeyProvision.key,
-        clientId: Constants.clientId,
+        clientId: clientId,
         logLevel: ably.LogLevel.verbose,
         environment: apiKeyProvision.source == ApiKeySource.env
             ? null
@@ -24,7 +25,7 @@ class AblyService {
     rest = ably.Rest(
       options: ably.ClientOptions(
         key: apiKeyProvision.key,
-        clientId: Constants.clientId,
+        clientId: clientId,
         logLevel: ably.LogLevel.verbose,
         environment: apiKeyProvision.source == ApiKeySource.env
             ? null

example/lib/ui/realtime_presence_sliver.dart

@@ -1,7 +1,6 @@
 import 'dart:async';
 
 import 'package:ably_flutter/ably_flutter.dart' as ably;
-import 'package:ably_flutter_example/constants.dart';
 import 'package:ably_flutter_example/ui/paginated_result_viewer.dart';
 import 'package:ably_flutter_example/ui/text_row.dart';
 import 'package:flutter/material.dart';
@@ -97,7 +96,7 @@ class RealtimePresenceSliver extends HookWidget {
   Widget updateRealtimePresence() => TextButton(
         onPressed: () async {
           await channel.presence
-              .updateClient(Constants.clientId, _nextPresenceData);
+              .updateClient(realtime.options.clientId!, _nextPresenceData);
         },
         child: const Text('Update'),
       );

example/lib/ui/system_details_sliver.dart

@@ -1,16 +1,17 @@
 import 'package:ably_flutter/ably_flutter.dart' as ably;
-import 'package:ably_flutter_example/constants.dart';
 import 'package:ably_flutter_example/ui/api_key_service.dart';
 import 'package:ably_flutter_example/ui/text_row.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 
 // ignore: must_be_immutable
 class SystemDetailsSliver extends HookWidget {
-  ApiKeyProvision apiKeyProvision;
+  final ApiKeyProvision apiKeyProvision;
+  final String clientId;
 
-  SystemDetailsSliver({
+  const SystemDetailsSliver({
     required this.apiKeyProvision,
+    required this.clientId,
     Key? key,
   }) : super(key: key);
 
@@ -34,7 +35,7 @@ class SystemDetailsSliver extends HookWidget {
         ),
         TextRow('Running on', platformVersion.value),
         TextRow('Ably version', ablyVersion.value),
-        TextRow('Ably Client ID', Constants.clientId),
+        TextRow('Ably Client ID', clientId),
         TextRow('Ably API key', hideApiKeySecret(apiKeyProvision.key)),
         if (apiKeyProvision.source != ApiKeySource.env)
           RichText(