flutter查看全景图

你是否还在像我一样被不用3d但是还想实现全景效果的需求所困扰？

来试试这个插件吧（自来水安利）

安装依赖

panorama: ^0.4.1

引用并使用

import 'package:panorama/panorama.dart';


  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Panorama(
          child: Image.asset('assets/panorama.jpg'),
        ),
      ),
    );
  }
      ),

// 网络图片
Panorama(
        child: Image.network(
            'https://wx1.sinaimg.cn/crop.0.0.1822.1024.1000/006qr8YDgy1fkulss1658j31kw0sg7wj.jpg'),

实现效果

不会放视频 自行脑补吧～

补充

我们可以通过里面的api去自行定义并实现一些功能

自定义锚点

可以传入一个list，里面为Hotspot元素的集合

  Panorama(
    hotspots: [
      Hotspot(latitude: 6, width: 150, widget: Text('我是新加的自定义锚点'))
    ],
    child: Assets.images.xxx.image(),
  ),

Hotspot有以下自定义属性：

点击某一处，执行函数

这个时候就要用到 onTap 方法

// 底部弹框
Future<int?> _showModalBottomSheet(value) {
return showModalBottomSheet<int>(
    context: context,
    builder: (BuildContext context) =>
        StatefulBuilder(builder: (context, setState) {
          return Container(
              height: 300,
              child: Center(
                  child: Text(
                '$value详情',
                style: TextStyle(fontSize: 20),
              )));
        }));
}
// 组件实现
Panorama(
        onTap: (x, y, z) {
          print('x: $x,y: $y');
          // 判断上左下右的范围
          if (-10 < x && x < 10 && y < 1 && y > -14) {
            _showModalBottomSheet('xx');
          }
        },
        child: Assets.images.carNeishi.image(),
      ),

这个是我自己的实现，如果有更好的方案欢迎讨论～～～