Flutter全景图片展示插件panorama_image的使用

Flutter全景图片展示插件panorama_image的使用

概述 🖼️

panorama_image 是一个用于在 Flutter 应用中显示和交互 360° 全景图像的插件。这些图像使用等距柱状投影（equirectangular projection）进行显示。

该插件支持 Flutter 支持的所有平台。

特性 ✨

• 使用球面投影显示 360° 全景图像
• 平滑的平移和缩放交互
• 鼠标和触摸支持

安装 📦

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  panorama_image: ^0.0.1

然后运行 flutter pub get 来安装依赖。

使用 💡

查看 示例应用 获取完整的示例代码。

基本示例

import 'package:panorama_image/panorama_image.dart';

PanoramaViewer(
  image: AssetImage('assets/panorama.jpg'),
  initialFOV: 90.0,
  onViewChanged: (details) {
    print('经度: ${details.longitude}');
    print('纬度: ${details.latitude}');
    print('视场角: ${details.fov}');
  },
)

完整示例代码

以下是完整的示例代码，展示了如何使用 panorama_image 插件来显示全景图像，并添加了一些控制按钮以便用户进行交互。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '全景示例',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const PanoramaDemo(),
    );
  }
}

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

  [@override](/user/override)
  State<PanoramaDemo> createState() => _PanoramaDemoState();
}

class _PanoramaDemoState extends State<PanoramaDemo> {
  double _longitude = 0.0;
  double _latitude = 0.0;
  double _fov = 90.0;

  final _controller = PanoramaController();

  void _updateView(ViewChangeDetails details) {
    setState(() {
      _longitude = details.longitude;
      _latitude = details.latitude;
      _fov = details.fov;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('全景演示'),
      ),
      body: Stack(
        children: [
          PanoramaViewer(
            image: const NetworkImage(
                'https://upload.wikimedia.org/wikipedia/commons/9/92/Alte_Schachtschleuse_Waltrop_Panorama.jpg'),
            controller: _controller, // 使用控制器
            onViewChanged: _updateView,
          ),
          Positioned(
            left: 16,
            bottom: 16,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    color: Colors.black54,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '经度: ${_longitude.toStringAsFixed(1)}°',
                        style: const TextStyle(color: Colors.white),
                      ),
                      Text(
                        '纬度: ${_latitude.toStringAsFixed(1)}°',
                        style: const TextStyle(color: Colors.white),
                      ),
                      Text(
                        '视场角: ${_fov.toStringAsFixed(1)}°',
                        style: const TextStyle(color: Colors.white),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: 16),
                Row(
                  children: [
                    _ControlButton(
                      icon: Icons.arrow_left,
                      onPressed: () {
                        _controller.updateView(
                          longitude: _controller.longitude - 30,
                          onViewChanged: _updateView,
                        );
                      },
                    ),
                    _ControlButton(
                      icon: Icons.arrow_right,
                      onPressed: () {
                        _controller.updateView(
                          longitude: _controller.longitude + 30,
                          onViewChanged: _updateView,
                        );
                      },
                    ),
                    const SizedBox(width: 16),
                    _ControlButton(
                      icon: Icons.arrow_upward,
                      onPressed: () {
                        _controller.updateView(
                          latitude: _controller.latitude + 30,
                          onViewChanged: _updateView,
                        );
                      },
                    ),
                    _ControlButton(
                      icon: Icons.arrow_downward,
                      onPressed: () {
                        _controller.updateView(
                          latitude: _controller.latitude - 30,
                          onViewChanged: _updateView,
                        );
                      },
                    ),
                    const SizedBox(width: 16),
                    _ControlButton(
                      icon: Icons.zoom_in,
                      onPressed: () {
                        _controller.updateView(
                          fov: _controller.fov * 0.8,
                          onViewChanged: _updateView,
                        );
                      },
                    ),
                    _ControlButton(
                      icon: Icons.zoom_out,
                      onPressed: () {
                        _controller.updateView(
                          fov: _controller.fov * 1.2,
                          onViewChanged: _updateView,
                        );
                      },
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class _ControlButton extends StatelessWidget {
  final IconData icon;
  final VoidCallback onPressed;

  const _ControlButton({
    required this.icon,
    required this.onPressed,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Material(
      color: Colors.black54,
      borderRadius: BorderRadius.circular(8),
      child: InkWell(
        borderRadius: BorderRadius.circular(8),
        onTap: onPressed,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Icon(
            icon,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}