Getting started: Push Notifications in Flutter

<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

// lib/ably_service.dart
import 'package:ably_flutter/ably_flutter.dart' as ably;

class AblyService {
  static final AblyService _instance = AblyService._internal();
  late ably.Realtime _realtime;

  factory AblyService() {
    return _instance;
  }

  AblyService._internal();

  Future<void> init() async {
    final clientOptions = ably.ClientOptions(
      key: 'demokey:*****', // Use token authentication in production
      clientId: 'push-tutorial-client',
    );

    _realtime = ably.Realtime(options: clientOptions);
  }

  ably.Realtime get realtime => _realtime;
}

// lib/main.dart
import 'dart:io';
import 'package:ably_flutter/ably_flutter.dart' as ably;
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';
import 'ably_service.dart';
import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // Initialize Firebase only on Android, as it's required for FCM. On iOS, Ably uses APNs directly.
  if (Platform.isAndroid) {
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );
  }
  await AblyService().init();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ably Push Tutorial',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const PushHomePage(),
    );
  }
}

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

  @override
  State<PushHomePage> createState() => _PushHomePageState();
}

class _PushHomePageState extends State<PushHomePage> {
  static const _channelName = 'my-first-push-channel';
  String _status = 'Ready';
  final List<String> _log = [];

  void _updateStatus(String message) {
    setState(() {
      _status = message;
      _log.add(message);
    });
    debugPrint(message);
  }

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

  void _subscribeToRealtime() {
    final channel = AblyService().realtime.channels.get(_channelName);
    channel.subscribe().listen((ably.Message message) {
      _updateStatus('Realtime message: ${message.name} — ${message.data}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Ably Push Tutorial')),
      body: const Center(child: Text('Wire up buttons in Step 3')),
    );
  }
}

Future<void> _requestPermissions() async {
  if (Platform.isAndroid) {
    final settings = await FirebaseMessaging.instance.requestPermission(
      alert: true,
      badge: true,
      sound: true,
    );
    _updateStatus('Permission: ${settings.authorizationStatus.name}');
  } else {
    final granted = await AblyService().realtime.push.requestPermission();
    _updateStatus('Permission: ${granted ? 'authorized' : 'denied'}');
  }
}

Future<void> _activatePush() async {
  _updateStatus('Activating push notifications...');
  try {
    await AblyService().realtime.push.activate();
    final device = await AblyService().realtime.device();
    _updateStatus('Push activated. Device ID: ${device.id}');
  } catch (e) {
    _updateStatus('Activation failed: $e');
  }
}

Future<void> _deactivatePush() async {
  _updateStatus('Deactivating push notifications...');
  try {
    await AblyService().realtime.push.deactivate();
    _updateStatus('Push deactivated');
  } catch (e) {
    _updateStatus('Deactivation failed: $e');
  }
}

@override
void initState() {
  super.initState();
  _requestPermissions();
  _subscribeToRealtime();
}

@override
void initState() {
  super.initState();
  _requestPermissions();
  if (Platform.isAndroid) {
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      final notification = message.notification;
      if (notification != null) {
        _updateStatus(
          'Push received: ${notification.title} — ${notification.body}',
        );
      }
    });
  }
  _subscribeToRealtime();
}

Future<void> _subscribeToChannel() async {
  try {
    final channel = AblyService().realtime.channels.get(_channelName);
    await channel.push.subscribeDevice();
    _updateStatus('Subscribed to push on channel: $_channelName');
  } catch (e) {
    _updateStatus('Subscribe failed: $e');
  }
}

Future<void> _unsubscribeFromChannel() async {
  try {
    final channel = AblyService().realtime.channels.get(_channelName);
    await channel.push.unsubscribeDevice();
    _updateStatus('Unsubscribed from channel: $_channelName');
  } catch (e) {
    _updateStatus('Unsubscribe failed: $e');
  }
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Ably Push Tutorial')),
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            padding: const EdgeInsets.all(12.0),
            color: Colors.grey.shade100,
            child: Text(_status, style: const TextStyle(fontSize: 14)),
          ),
          const SizedBox(height: 12),
          ElevatedButton(
            onPressed: _activatePush,
            style: ElevatedButton.styleFrom(
                backgroundColor: Colors.green,
                foregroundColor: Colors.white),
            child: const Text('Activate Push'),
          ),
          ElevatedButton(
            onPressed: _deactivatePush,
            style: ElevatedButton.styleFrom(
                backgroundColor: Colors.red,
                foregroundColor: Colors.white),
            child: const Text('Deactivate Push'),
          ),
          ElevatedButton(
            onPressed: _subscribeToChannel,
            style: ElevatedButton.styleFrom(
                backgroundColor: Colors.purple,
                foregroundColor: Colors.white),
            child: const Text('Subscribe to Channel'),
          ),
          ElevatedButton(
            onPressed: _unsubscribeFromChannel,
            style: ElevatedButton.styleFrom(
                backgroundColor: Colors.orange,
                foregroundColor: Colors.white),
            child: const Text('Unsubscribe from Channel'),
          ),
          const SizedBox(height: 12),
          Expanded(
            child: Container(
              color: Colors.white,
              padding: const EdgeInsets.all(8.0),
              child: ListView.builder(
                itemCount: _log.length,
                itemBuilder: (context, index) => Text(
                  _log[index],
                  style: const TextStyle(
                      fontFamily: 'monospace', fontSize: 12),
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}