voo_wear 0.1.2 copy "voo_wear: ^0.1.2" to clipboard
voo_wear: ^0.1.2 copied to clipboard

PlatformAndroid

Flutter SDK for building Wear OS apps. Round-screen-aware Scaffold, ambient mode, rotary input, and the building blocks for great smartwatch UX in Dart.

example/lib/main.dart

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const _App());
}

class _App extends StatelessWidget {
  const _App();

  @override
  Widget build(BuildContext context) => MaterialApp(
    title: 'voo_wear example',
    theme: ThemeData(
      useMaterial3: true,
      colorSchemeSeed: Colors.indigo,
      brightness: Brightness.dark,
    ),
    home: const _Home(),
    debugShowCheckedModeBanner: false,
  );
}

class _Home extends StatefulWidget {
  const _Home();

  @override
  State<_Home> createState() => _HomeState();
}

class _HomeState extends State<_Home> {
  int _rotaryTicks = 0;
  double _scrollOffset = 0;

  @override
  Widget build(BuildContext context) => VooWearScaffold(
    body: VooRotaryListener(
      onRotate: (event) => setState(() {
        _rotaryTicks += 1;
        _scrollOffset = (_scrollOffset + event.delta).clamp(-200, 200);
      }),
      child: VooWearAmbientBuilder(
        builder: (context, ambient) {
          if (ambient == VooWearAmbientState.ambient) {
            return const _AmbientFace();
          }
          return VooWearShapeBuilder(
            builder: (context, shape) => _ActiveFace(
              shape: shape,
              rotaryTicks: _rotaryTicks,
              offset: _scrollOffset,
            ),
          );
        },
      ),
    ),
  );
}

class _ActiveFace extends StatelessWidget {
  const _ActiveFace({
    required this.shape,
    required this.rotaryTicks,
    required this.offset,
  });

  final VooWearShape shape;
  final int rotaryTicks;
  final double offset;

  @override
  Widget build(BuildContext context) => Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Icon(
          shape == VooWearShape.round ? Icons.circle_outlined : Icons.crop_square,
          size: 32,
          color: Colors.white70,
        ),
        const SizedBox(height: 8),
        Text(
          shape == VooWearShape.round ? 'Round' : 'Rectangular',
          style: const TextStyle(fontSize: 14, color: Colors.white),
        ),
        const SizedBox(height: 12),
        Text(
          'Rotary: $rotaryTicks',
          style: const TextStyle(fontSize: 12, color: Colors.white70),
        ),
        Text(
          'Offset: ${offset.toStringAsFixed(0)}',
          style: const TextStyle(fontSize: 12, color: Colors.white70),
        ),
      ],
    ),
  );
}

class _AmbientFace extends StatelessWidget {
  const _AmbientFace();

  @override
  Widget build(BuildContext context) => const Center(
    child: Text(
      'voo_wear',
      style: TextStyle(fontSize: 12, color: Colors.white60),
    ),
  );
}
1
likes
160
points
162
downloads

Documentation

API reference

Publisher

verified publishervoostack.com

Weekly Downloads

Flutter SDK for building Wear OS apps. Round-screen-aware Scaffold, ambient mode, rotary input, and the building blocks for great smartwatch UX in Dart.

Homepage
Repository (GitHub)
View/report issues

Topics

#flutter #wear-os #wearable #watch #user-interface

License

MIT (license)

Dependencies

flutter, meta

More

Packages that depend on voo_wear

Packages that implement voo_wear