voo_wear 0.1.2
voo_wear: ^0.1.2 copied to clipboard
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),
),
);
}