Flutter折叠面板插件flip_panel_plus的使用
Flutter折叠面板插件flip_panel_plus的使用
flip_panel_plus 是一个用于创建翻转面板的插件，例如图像、倒计时或时钟，并且内置了动画效果。由于 flip_panel 的开发者未作出回应，我们对其进行了更新，添加了一些改进并修复了一些问题。
开始使用
要使用此插件，请将其作为依赖项添加到您的 pubspec.yaml 文件中。
添加依赖
dependencies:
flip_panel_plus: ^1.0.0
导入
import 'package:flip_panel_plus/flip_panel_plus.dart';
使用示例
创建一个翻转倒计时面板
FlipClockPlus.countdown(
duration: const Duration(hours: 1), // 设置倒计时的时间
digitColor: Colors.white, // 数字的颜色
backgroundColor: Colors.black, // 背景颜色
digitSize: 48.0, // 数字大小
borderRadius: const BorderRadius.all(Radius.circular(3.0)), // 圆角半径
onDone: () { // 倒计时结束时的回调函数
print('OnDone');
},
)
创建一个翻转时钟面板
FlipClockPlus.simple(
startTime: DateTime.now(), // 时钟的起始时间
digitColor: Colors.white, // 数字的颜色
backgroundColor: Colors.black, // 背景颜色
digitSize: 30.0, // 数字大小
centerGapSpace: 0.0, // 数字之间的间距
borderRadius: const BorderRadius.all(Radius.circular(3.0)), // 圆角半径
)
创建一个反向倒计时面板
FlipClockPlus.reverseCountdown(
duration: const Duration(days: 10), // 设置倒计时的时间
digitColor: Colors.white, // 数字的颜色
backgroundColor: Colors.black, // 背景颜色
digitSize: 30.0, // 数字大小
centerGapSpace: 0.0, // 数字之间的间距
borderRadius: const BorderRadius.all(Radius.circular(3.0)), // 圆角半径
onDone: () { // 倒计时结束时的回调函数
print('onDone');
},
)
从可迭代源创建翻转面板
final digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; // 可迭代数据源
FlipPanelPlus.builder(
itemBuilder: (context, index) => Container(
color: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: Text(
'${digits[index]}',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 50.0,
color: Colors.white,
),
),
),
itemsCount: digits.length, // 数据源长度
period: const Duration(milliseconds: 1000), // 更新频率
loop: 1, // 是否循环
)
从流源创建翻转面板
FlipPanelPlus<int>.stream(
itemStream: Stream.periodic(Duration(milliseconds: 1000), (count) => count % 10), // 流源
itemBuilder: (context, value) => Container(
color: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: Text(
'$value',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 50.0,
color: Colors.white,
),
),
),
initValue: 0, // 初始值
);
完整示例代码
以下是一个完整的示例代码，展示了如何在应用中集成这些组件：
import 'package:flip_panel_plus/flip_panel_plus.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:math';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light().copyWith(
scaffoldBackgroundColor: Colors.white,
),
title: 'FlipPanelPlus',
routes: {
'flip_image': (_) => const AnimatedImagePage(),
'flip_clock': (_) => const FlipClockPage(),
'countdown_clock': (_) => const CountdownClockPage(),
'reverse_countdown': (_) => const ReverseCountdown(),
},
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('FlipPanelPlus'),
),
body: Column(
children: [
ListTile(
title: const Text('Flip Image'),
onTap: () => Navigator.of(context).pushNamed('flip_image'),
),
ListTile(
title: const Text('Flip Clock'),
onTap: () => Navigator.of(context).pushNamed('flip_clock'),
),
ListTile(
title: const Text('Countdown Clock'),
onTap: () => Navigator.of(context).pushNamed('countdown_clock'),
),
ListTile(
title: const Text('Days To Go'),
onTap: () => Navigator.of(context).pushNamed('reverse_countdown'),
),
],
),
);
}
}
class AnimatedImagePage extends StatelessWidget {
const AnimatedImagePage({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
const imageWidth = 320.0;
const imageHeight = 171.0;
const toleranceFactor = 0.033;
const widthFactor = 0.125;
const heightFactor = 0.5;
final random = Random();
return Scaffold(
appBar: AppBar(
title: const Text('FlipImage'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
0,
1,
2,
3,
4,
5,
6,
7,
]
.map((count) => FlipPanelPlus.stream(
itemStream: Stream.fromFuture(Future.delayed(
Duration(milliseconds: random.nextInt(20) * 100),
() => 1)),
itemBuilder: (_, value) => value <= 0
? Container(
color: Colors.white,
width: widthFactor * imageWidth,
height: heightFactor * imageHeight,
)
: ClipRect(
child: Align(
alignment: Alignment(
-1.0 + count * 2 * 0.125 + count * toleranceFactor,
-1.0),
widthFactor: widthFactor,
heightFactor: heightFactor,
child: Image.asset(
'assets/flutter_cover.png',
width: imageWidth,
height: imageHeight,
))),
initValue: 0,
spacing: 0.0,
direction: FlipDirection.up,
))
.toList(),
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
0,
1,
2,
3,
4,
5,
6,
7,
]
.map((count) => FlipPanelPlus.stream(
itemStream: Stream.fromFuture(Future.delayed(
Duration(milliseconds: random.nextInt(20) * 100),
() => 1)),
itemBuilder: (_, value) => value <= 0
? Container(
color: Colors.white,
width: widthFactor * imageWidth,
height: heightFactor * imageHeight,
)
: ClipRect(
child: Align(
alignment: Alignment(
-1.0 + count * 2 * 0.125 + count * toleranceFactor,
1.0),
widthFactor: widthFactor,
heightFactor: heightFactor,
child: Image.asset(
'assets/flutter_cover.png',
width: imageWidth,
height: imageHeight,
))),
initValue: 0,
spacing: 0.0,
direction: FlipDirection.down,
))
.toList(),
)
],
),
),
);
}
}
class FlipClockPage extends StatelessWidget {
const FlipClockPage({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flip Clock'),
),
body: Center(
child: FlipClockPlus.simple(
startTime: DateTime.now(),
digitColor: Colors.white,
backgroundColor: Colors.black,
digitSize: 30.0,
centerGapSpace: 0.0,
borderRadius: const BorderRadius.all(Radius.circular(3.0)),
),
),
);
}
}
class CountdownClockPage extends StatelessWidget {
const CountdownClockPage({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flip Countdown'),
),
body: Center(
child: FlipClockPlus.countdown(
duration: const Duration(hours: 1),
digitColor: Colors.white,
backgroundColor: Colors.black,
digitSize: 48.0,
borderRadius: const BorderRadius.all(Radius.circular(3.0)),
onDone: () {
print('OnDone');
},
),
),
);
}
}
class ReverseCountdown extends StatelessWidget {
const ReverseCountdown({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Reverse Countdown'),
),
body: Center(
child: FlipClockPlus.reverseCountdown(
duration: const Duration(days: 10),
digitColor: Colors.white,
backgroundColor: Colors.black,
digitSize: 30.0,
centerGapSpace: 0.0,
borderRadius: const BorderRadius.all(Radius.circular(3.0)),
onDone: () {
print('onDone');
},
),
),
);
}
}
更多关于Flutter折叠面板插件flip_panel_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter折叠面板插件flip_panel_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中使用flip_panel_plus插件来创建一个折叠面板的示例代码。flip_panel_plus插件允许你创建一个可翻转的面板，非常适合用于显示或隐藏信息。
首先，确保你已经在pubspec.yaml文件中添加了flip_panel_plus依赖：
dependencies:
flutter:
sdk: flutter
flip_panel_plus: ^latest_version # 请替换为最新版本号
然后运行flutter pub get来安装依赖。
接下来是一个简单的示例代码，展示了如何使用flip_panel_plus来创建一个折叠面板：
import 'package:flutter/material.dart';
import 'package:flip_panel_plus/flip_panel_plus.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flip Panel Plus Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: FlipPanelExample(),
);
}
}
class FlipPanelExample extends StatefulWidget {
@override
_FlipPanelExampleState createState() => _FlipPanelExampleState();
}
class _FlipPanelExampleState extends State<FlipPanelExample> with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 500),
vsync: this,
)..addListener(() {
setState(() {});
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flip Panel Plus Example'),
),
body: Center(
child: FlipPanelPlus(
front: Container(
color: Colors.blue,
child: Center(
child: Text(
'Flip Me',
style: TextStyle(color: Colors.white, fontSize: 24),
),
),
),
back: Container(
color: Colors.green,
child: Center(
child: Text(
'Back Side',
style: TextStyle(color: Colors.white, fontSize: 24),
),
),
),
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
controller: _controller,
flipType: FlipType.vertical, // or FlipType.horizontal
onFlip: () {
print('Panel flipped!');
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
if (_controller.isDismissed) {
_controller.forward();
} else {
_controller.reverse();
}
},
tooltip: 'Flip',
child: Icon(Icons.flip),
),
);
}
}
在这个示例中：
- 依赖导入：我们导入了
flip_panel_plus包。 - FlipPanelExample类：这是一个有状态的组件，用来管理动画控制器。
- AnimationController：用于控制面板的翻转动画。
- FlipPanelPlus：这是主要的折叠面板组件。
front：面板的前侧。back：面板的后侧。mainAxisAlignment和crossAxisAlignment：用来设置面板的对齐方式。controller：绑定动画控制器。flipType：设置翻转类型（垂直或水平）。onFlip：翻转事件回调。
- FloatingActionButton：一个浮动按钮，用来触发面板的翻转。
你可以根据需要调整这些参数和组件，以实现你想要的折叠面板效果。
