Flutter滑动按钮组件插件swipe_button_widget的使用
Flutter滑动按钮组件插件swipe_button_widget的使用
swipe_button_widget
Switcher 按钮。这是一个带有极简设计和材料动画的 Flutter 切换按钮，并且高度可定制。它可以作为开关按钮或切换按钮使用。
预览
示例
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:swipe_button_widget/swipe_button_widget.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return const MaterialApp(
home: Home(),
);
}
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
const SizedBox(height: 8),
SwipeButtonWidget(
acceptPoitTransition: 0.7,
margin: const EdgeInsets.all(0),
padding: const EdgeInsets.all(0),
boxShadow: const [
BoxShadow(
blurRadius: 4,
color: Color.fromRGBO(197, 197, 197, 0.25),
spreadRadius: 1.5,
),
],
borderRadius: BorderRadius.circular(8),
colorBeforeSwipe: Colors.white,
colorAfterSwiped: Colors.white,
height: 60,
childBeforeSwipe: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.red[900],
),
width: 100,
height: double.infinity,
child: const Center(
child: Text(
'>>>',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 28,
color: Colors.white),
),
),
),
childAfterSwiped: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.red[900],
),
width: 100,
height: double.infinity,
child: const Center(
child: Text(
'>>>',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 28,
color: Colors.white),
),
),
),
leftChildren: const [
Align(
alignment: Alignment(0.9, 0),
child: Text(
'Swip for confirmation',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w400,
color: Colors.red),
),
)
],
rightChildren: const [
Align(
alignment: Alignment(-0.6, 0),
child: Text(
'Swip for arrived',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w400,
color: Colors.red),
),
)
],
onHorizontalDragUpdate: (e) {},
onHorizontalDragRight: (e) {
return areYouSureDialog(context);
},
onHorizontalDragleft: (e) async {
return false;
}),
const SizedBox(height: 8),
SwipeButtonWidget(
padding: const EdgeInsets.all(15),
borderRadius: BorderRadius.circular(8),
childBeforeSwipe: Text(
'>>> Slide To Logout',
style: TextStyle(
fontSize: 18,
color: Color.fromRGBO(5, 132, 55, 1),
),
),
childAfterSwiped: Text(
'<<< Slide To Login',
style: TextStyle(
fontSize: 18,
color: Colors.white,
),
),
leftChildren: const [
Align(
alignment: Alignment.centerRight,
child: Text(
'Active',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
],
rightChildren: const [
Align(
alignment: Alignment.centerLeft,
child: Text(
'Offline',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
],
onHorizontalDragUpdate: (e) {},
onHorizontalDragRight: (e) {
return areYouSureDialog(context);
},
onHorizontalDragleft: (e) {
return areYouSureDialog(context);
},
),
],
),
);
}
}
Future<bool> areYouSureDialog(BuildContext context) async {
bool isActive = false;
await showDialog(
context: context,
barrierDismissible: false,
builder: (context) => Dialog(
child: Container(
color: Colors.white,
height: 140,
width: 150,
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Are you sure?'),
SizedBox(height: 30),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () {
isActive = true;
Navigator.of(context).pop();
},
child: Text('Yes'),
),
SizedBox(width: 10),
TextButton(
onPressed: () {
isActive = false;
Navigator.of(context).pop();
},
child: Text('No'),
),
],
),
],
),
),
),
);
return isActive;
}
更多关于Flutter滑动按钮组件插件swipe_button_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter滑动按钮组件插件swipe_button_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中使用swipe_button_widget插件来实现一个滑动按钮组件的示例代码。
首先，你需要在你的pubspec.yaml文件中添加swipe_button_widget依赖：
dependencies:
flutter:
sdk: flutter
swipe_button_widget: ^最新版本号 # 请替换为实际的最新版本号
然后运行flutter pub get来安装依赖。
接下来，你可以在你的Flutter项目中创建一个包含滑动按钮的页面。以下是一个完整的示例代码：
import 'package:flutter/material.dart';
import 'package:swipe_button_widget/swipe_button_widget.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Swipe Button Widget Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Swipe Button Widget Demo'),
),
body: Center(
child: SwipeButtonWidget(
width: 200,
height: 50,
threshold: 0.6, // 滑动超过这个比例才会触发成功事件
buttonColor: Colors.blue,
textColor: Colors.white,
label: 'Swipe to Accept',
onSwiped: (bool success) {
if (success) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Swiped Successfully!')),
);
} else {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Swiped Failed!')),
);
}
},
),
),
),
);
}
}
在这个示例中：
- 依赖导入：导入了
swipe_button_widget包。 - SwipeButtonWidget：创建了一个
SwipeButtonWidget实例。width和height定义了按钮的宽度和高度。threshold定义了滑动成功的阈值（滑动距离占总距离的比例）。buttonColor和textColor分别定义了按钮的背景色和文字颜色。label定义了按钮上的文字。onSwiped是一个回调函数，当滑动完成时调用，success参数为true表示滑动成功，为false表示滑动失败。
运行这个Flutter应用，你会看到一个带有“Swipe to Accept”文字的滑动按钮。当你向左或向右滑动按钮时，会根据滑动的成功与否显示不同的SnackBar消息。
这个示例展示了swipe_button_widget插件的基本使用方法，你可以根据需要进一步自定义和扩展这个组件。
