Barre de défilement Flutter pour les appareils WearOS avec écrans ronds

Implémentation flottante d’une barre de défilement circulaire Wear OS d’apparence native.

Il peut être enroulé autour d’un PageView, ListView ou toute autre vue déroulante.

Et il est capable de contrôler la vue ScrollController ou alors PageController avec entrée rotative, y compris retour haptique pour chaque événement rotatif.

Installer

Porter le système d’exploitation (Android)

Ce forfait dépend de portable_rotatifce qui nécessite d’ajouter ce qui suit à MainActivity.kt:

import android.view.MotionEvent
import com.samsung.wearable_rotary.WearableRotaryPlugin

class MainActivity : FlutterActivity() {
    override fun onGenericMotionEvent(event: MotionEvent?): Boolean {
        return when {
            WearableRotaryPlugin.onGenericMotionEvent(event) -> true
            else -> super.onGenericMotionEvent(event)
        }
    }
}

Ce forfait dépend de vibrationqui a besoin d’accéder au VIBRATE autorisation, alors assurez-vous que ce qui suit est ajouté à AndroidManifest.xml

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

Usage

Pour utiliser ce plugin, ajoutez rotary_scrollbar comme une dépendance dans votre pubspec.yaml dossier.

dependencies:
  rotary_scrollbar: ^0.1.1

Ensuite, importez rotary_scrollbar dans votre code Dart.

// Import the package.
import 'package:rotary_scrollbar/rotary_scrollbar.dart';

AffichageListe

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

  @override
  State<WatchScreen> createState() => _WatchScreenState();
}

class _WatchScreenState extends State<WatchScreen> {
  final scrollController = ScrollController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: RotaryScrollWrapper(
        rotaryScrollbar: RotaryScrollbar(
          controller: scrollController,
        ),
        child: ListView.builder(
          controller: scrollController,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.only(
                bottom: 10,
              ),
              child: Container(
                color: Colors.blue.withRed(((255 / 29) * index).toInt()),
                width: 50,
                height: 50,
                child: Center(child: Text('box $index')),
              ),
            );
          },
          itemCount: 30,
        ),
      ),
    );
  }
}

Affichage de la page

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

  @override
  State<WatchScreen> createState() => _WatchScreenState();
}

class _WatchScreenState extends State<WatchScreen> {
  final pageController = PageController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: RotaryScrollWrapper(
        rotaryScrollbar: RotaryScrollbar(
          controller: pageController,
        ),
        child: PageView(
          scrollDirection: Axis.vertical,
          controller: pageController,
          children: const [
            Page1(),
            Page2(),
            Page3(),
          ],
        ),
      ),
    );
  }
}