Flutter 360度全景图片展示插件imageview360的使用

imageview360

imageview360 是一个Flutter包，它提供了带有旋转和手势自定义功能的图像360度视图。

支持的Dart版本

• Dart SDK version >= 2.12.0

Demo Gif

安装

在pubspec.yaml文件中添加依赖：

dependencies:
  imageview360: ^1.3.0

使用方法

导入包

在你的Dart文件中导入包：

import 'package:imageview360/imageview360.dart';

基本用法

ImageView360(
     key: UniqueKey(),
     imageList: imageList,
),

注意：为了使ImageView360在热重载时显示即时变化，你需要提供UniqueKey()，以便每次重建小部件。

可定制用法

ImageView360(
    key: UniqueKey(),                                           
    imageList: imageList,                                       
    autoRotate: true,                                           //可选
    rotationCount: 2,                                           //可选
    rotationDirection: RotationDirection.anticlockwise,         //可选
    frameChangeDuration: Duration(milliseconds: 50),            //可选
    swipeSensitivity: 2,                                        //可选
    allowSwipeToRotate: true,                                   //可选
    onImageIndexChanged: (currentImageIndex) {                  //可选
                          print("currentImageIndex: $currentImageIndex");
                        },
)

示例代码：从资源加载并预缓存图片

List<ImageProvider> imageList = List<ImageProvider>();
for (int i = 1; i <= 52; i++) {
   imageList.add(AssetImage('assets/sample/$i.png'));
   // 预缓存图片以加快加载速度
   await precacheImage(AssetImage('assets/sample/$i.png'), context);
}

必填字段

可选字段

示例项目代码

以下是完整的示例项目代码，展示了如何使用imageview360插件：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ImageView360 Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DemoPage(title: 'ImageView360 Demo'),
    );
  }
}

class DemoPage extends StatefulWidget {
  DemoPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  List<ImageProvider> imageList = <ImageProvider>[];
  bool autoRotate = true;
  int rotationCount = 2;
  int swipeSensitivity = 2;
  bool allowSwipeToRotate = true;
  RotationDirection rotationDirection = RotationDirection.anticlockwise;
  Duration frameChangeDuration = Duration(milliseconds: 50);
  bool imagePrecached = false;

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) => updateImageList(context));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.only(top: 72.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                (imagePrecached == true)
                    ? ImageView360(
                        key: UniqueKey(),
                        imageList: imageList,
                        autoRotate: autoRotate,
                        rotationCount: rotationCount,
                        rotationDirection: RotationDirection.anticlockwise,
                        frameChangeDuration: Duration(milliseconds: 30),
                        swipeSensitivity: swipeSensitivity,
                        allowSwipeToRotate: allowSwipeToRotate,
                        onImageIndexChanged: (currentImageIndex) {
                          print("currentImageIndex: $currentImageIndex");
                        },
                      )
                    : Text("Pre-Caching images..."),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    "Optional features:",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.green,
                        fontSize: 24),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Text("Auto rotate: $autoRotate"),
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Text("Rotation count: $rotationCount"),
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Text("Rotation direction: $rotationDirection"),
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Text(
                      "Frame change duration: ${frameChangeDuration.inMilliseconds} milliseconds"),
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Text("Allow swipe to rotate image: $allowSwipeToRotate"),
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Text("Swipe sensitivity: $swipeSensitivity"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  void updateImageList(BuildContext context) async {
    for (int i = 1; i <= 52; i++) {
      imageList.add(AssetImage('assets/sample/$i.png'));
      await precacheImage(AssetImage('assets/sample/$i.png'), context);
    }
    setState(() {
      imagePrecached = true;
    });
  }
}

通过上述代码，你可以创建一个简单的Flutter应用程序，该应用程序使用imageview360插件来展示360度全景图片，并且可以对旋转和手势进行自定义。希望这些信息对你有所帮助！