sky_box
一个用于 Flutter 的 sky box 包。
![]() |
![]() |
![]() |
![]() |
Emil Persson(又名 Humus)的示例 Sky boxes。 他们的作品 根据 知识共享 署名 3.0 未本地化许可协议 获得许可。
简介
Sky box 是一个带有 6 个内部纹理的立方体。该立方体围绕视角构建,并扭曲成看起来像一个球体。

每个纹理都是一个 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;
});
});
});
}
}



