sky_box

一个用于 Flutter 的 sky box 包。

Example Example
Example Example

Emil Persson(又名 Humus)的示例 Sky boxes。 他们的作品 根据 知识共享 署名 3.0 未本地化许可协议 获得许可。

简介

Sky box 是一个带有 6 个内部纹理的立方体。该立方体围绕视角构建,并扭曲成看起来像一个球体。

Cube faces visualisation

每个纹理都是一个 dart:ui Image 对象。需要 6 张图片,分别是正负 x、y 和 z 轴的纹理。

Axis Image
+x right
-x
+y
-y
+z
-z

用法

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: FutureBuilder<List<ui.Image>>(
          /// Load all images in parallel.
          future: Future.wait([
            _image('images/top.png'),
            _image('images/front.png'),
            _image('images/right.png'),
            _image('images/left.png'),
            _image('images/bottom.png'),
            _image('images/back.png')
          ]),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              /// Pass images to sky box.
              return Stack(
                children: [
                  /// Full screen sky box.
                  Positioned.fill(
                    /// Use sky box widget.
                    child: SkyBox(
                      top: snapshot.data![0],
                      front: snapshot.data![1],
                      right: snapshot.data![2],
                      left: snapshot.data![3],
                      bottom: snapshot.data![4],
                      back: snapshot.data![5],
                    ),
                  ),
                ],
              );
            }

            /// Show loading indicator while images are loading.
            return const Center(child: CircularProgressIndicator());
          },
        ),
      ),
    );
  }

  Future<ui.Image> _image(String path) {
    /// Load image from assets.
    return rootBundle.load(path).then((bytes) {
      return ui.instantiateImageCodec(bytes.buffer.asUint8List()).then((codec) {
        return codec.getNextFrame().then((frame) {
          return frame.image;
        });
      });
    });
  }
}

GitHub

查看 Github