flutter_watch_connectivity 0.0.1 copy "flutter_watch_connectivity: ^0.0.1" to clipboard
flutter_watch_connectivity: ^0.0.1 copied to clipboard

PlatformiOS

Declarative Flutter-to-Apple-Watch page syncing with WatchConnectivity and a SwiftUI watchOS renderer template.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_watch_connectivity/flutter_watch_connectivity.dart';

void main() {
  runApp(const WatchConnectivityExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
      ),
      home: const WatchPagesDemo(),
    );
  }
}

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

  @override
  State<WatchPagesDemo> createState() => _WatchPagesDemoState();
}

class _WatchPagesDemoState extends State<WatchPagesDemo> {
  static const _watch = FlutterWatchConnectivity();

  String _status = 'Not synced yet';
  String _currentPageId = 'home';

  final _pages = const [
    WatchPage(
      id: 'home',
      title: 'Daily summary',
      components: [
        WatchText('1,248 steps', style: WatchTextStyle.largeTitle),
        WatchText('Move ring is 72% complete.'),
        WatchSpacer(height: 10),
        WatchButton(title: 'Refresh', action: 'refresh_summary'),
      ],
    ),
    WatchPage(
      id: 'details',
      title: 'Hydration',
      components: [
        WatchText('4 cups logged', style: WatchTextStyle.title),
        WatchDivider(),
        WatchText('Goal: 8 cups'),
        WatchButton(title: 'Add cup', action: 'add_water'),
      ],
    ),
  ];

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

  Future<void> _syncPages() async {
    final state = await _watch.state();
    await _watch.configurePages(pages: _pages, initialPageId: _currentPageId);

    if (!mounted) return;
    setState(() {
      _status =
          'Paired: ${state.isPaired}, installed: ${state.isWatchAppInstalled}, reachable: ${state.isReachable}';
    });
  }

  Future<void> _showPage(String pageId) async {
    await _watch.showPage(pageId);

    if (!mounted) return;
    setState(() => _currentPageId = pageId);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Watch pages')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          Text(_status),
          const SizedBox(height: 16),
          for (final page in _pages)
            Card(
              child: ListTile(
                title: Text(page.title),
                subtitle: Text(page.id),
                selected: page.id == _currentPageId,
                trailing: const Icon(Icons.watch),
                onTap: () => _showPage(page.id),
              ),
            ),
          const SizedBox(height: 16),
          FilledButton.icon(
            onPressed: _syncPages,
            icon: const Icon(Icons.sync),
            label: const Text('Sync pages'),
          ),
        ],
      ),
    );
  }
}
0
likes
150
points
88
downloads

Documentation

API reference

Publisher

verified publisherpinz.dev

Weekly Downloads

Declarative Flutter-to-Apple-Watch page syncing with WatchConnectivity and a SwiftUI watchOS renderer template.

Homepage

License

MIT (license)

Dependencies

flutter, plugin_platform_interface

More

Packages that depend on flutter_watch_connectivity

Packages that implement flutter_watch_connectivity