wear_os_scrollbar 0.2.0

A Flutter plugin to show Material 3 Expressive scroll indicator for WearOS with customizable haptic response.

example/lib/main.dart

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final ScrollController _controller = ScrollController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        scaffoldBackgroundColor: Colors.black,
      ),
      home: Scaffold(
        body: SizedBox.expand(
          child: WearOsScrollbar(
            controller: _controller,
            hapticFeedback: WearOsHapticFeedback.lightImpact,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: ListView.builder(
                controller: _controller,
                itemCount: 20,
                itemBuilder: (context, index) {
                  return WearOsExpressiveItem(
                    scrollController: _controller,
                    child: ListTile(
                      tileColor: Colors.red,
                      shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(12)),
                      ),
                      title: Text(
                        'Item ${index + 1}',
                        textAlign: TextAlign.center,
                      ),
                      onTap: () {
                        ScaffoldMessenger.of(context).hideCurrentSnackBar();
                        ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(
                            content: Text(
                              'Tapped on Item ${index + 1}',
                              textAlign: TextAlign.center,
                            ),
                          ),
                        );
                      },
                    ),
                  );
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}