spline_view 0.0.1

Embed Spline 3D scenes with native platform views.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:sensors_plus/sensors_plus.dart';
import 'package:spline_view/spline_view.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Spline View with Gyroscope')),
        body: const Center(child: SplineTest()),
      ),
    );
  }
}

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

  @override
  State<SplineTest> createState() => _SplineTestState();
}

class _SplineTestState extends State<SplineTest> {
  late SplineViewController _controller;
  double _rotationX = 0.0;
  double _rotationY = 0.0;
  double _rotationZ = 0.0;

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

  void _startListeningToGyroscope() {
    gyroscopeEvents.listen((GyroscopeEvent event) {
      setState(() {
        // Scale gyroscope values to a reasonable range for rotation
        // Gyroscope typically returns rad/s, scale to degrees
        _rotationX = (event.x * 57.2958) % 360; // Convert rad to degrees
        _rotationY = (event.y * 57.2958) % 360;
        _rotationZ = (event.z * 57.2958) % 360;
      });

      // Update Spline view variables
      _controller.setNumberVariable('rotationX', _rotationX);
      _controller.setNumberVariable('rotationY', _rotationY);
      _controller.setNumberVariable('rotationZ', _rotationZ);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox.square(
          dimension: 300,
          child: SplinePlatformViewNetwork(
            url:
                'https://build.spline.design/F6EBzyHZZE9gZ0-j8fCj/scene.splinecontent',
            onViewCreated: (controller) {
              _controller = controller;
            },
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              Text(
                'Gyroscope Values (degrees)',
                style: Theme.of(context).textTheme.titleLarge,
              ),
              const SizedBox(height: 12),
              Text('rotationX: ${_rotationX.toStringAsFixed(2)}°'),
              Text('rotationY: ${_rotationY.toStringAsFixed(2)}°'),
              Text('rotationZ: ${_rotationZ.toStringAsFixed(2)}°'),
            ],
          ),
        ),
      ],
    );
  }
}