Flutter渐变滑动切换页面插件gradient_slide_to_act的使用
Flutter渐变滑动切换页面插件gradient_slide_to_act的使用
关于创建者
这个包是由SALAH EDDINE SALHI创建的。
Gradient Slide To Act
这是一个带有简单动画和渐变背景的滑动按钮组件。以下是该组件的一些示例图片和GIF演示：
使用方法
示例1：基本用法
GradientSlideToAct(
width: 400, // 设置按钮宽度
textStyle: TextStyle(color: Colors.white, fontSize: 15), // 设置文本样式
backgroundColor: Color(0Xff172663), // 设置背景颜色
onSubmit: () {
debugPrint("Submitted!"); // 滑动完成时的回调函数
},
gradient: const LinearGradient(
begin: Alignment.topLeft, // 渐变开始位置
end: Alignment.bottomRight, // 渐变结束位置
colors: [
Color(0xff0da6c2), // 渐变颜色1
Color(0xff0E39C6), // 渐变颜色2
],
),
)
示例2：带图标
GradientSlideToAct(
width: 400, // 设置按钮宽度
dragableIcon: Icons.arrow_forward, // 设置可拖动图标
textStyle: TextStyle(color: Colors.white, fontSize: 15), // 设置文本样式
backgroundColor: Colors.purple, // 设置背景颜色
onSubmit: () {}, // 滑动完成时的回调函数
gradient: LinearGradient(
begin: Alignment.centerLeft, // 渐变开始位置
colors: [
Colors.red, // 渐变颜色1
Colors.purple, // 渐变颜色2
],
),
)
示例3：自定义图标背景颜色
GradientSlideToAct(
width: 400, // 设置按钮宽度
dragableIconBackgroundColor: Colors.greenAccent, // 设置图标背景颜色
textStyle: TextStyle(color: Colors.white, fontSize: 15), // 设置文本样式
backgroundColor: ColorManager.primary_dark_Color2, // 设置背景颜色
onSubmit: () {}, // 滑动完成时的回调函数
gradient: const LinearGradient(
begin: Alignment.topLeft, // 渐变开始位置
end: Alignment.bottomRight, // 渐变结束位置
colors: [
Color(0Xff11998E), // 渐变颜色1
Color(0Xff38EF7D), // 渐变颜色2
],
),
)
完整示例Demo
以下是一个完整的Flutter项目示例，展示了如何在应用中使用gradient_slide_to_act插件：
import 'package:flutter/material.dart';
import 'package:gradient_slide_to_act/gradient_slide_to_act.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Gradient Slide to Act Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Gradient Slide to Act Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GradientSlideToAct(
width: 300, // 设置按钮宽度
textStyle: TextStyle(color: Colors.white, fontSize: 18), // 设置文本样式
backgroundColor: Color(0Xff172663), // 设置背景颜色
onSubmit: () {
debugPrint("Submitted!"); // 滑动完成时的回调函数
},
gradient: const LinearGradient(
begin: Alignment.topLeft, // 渐变开始位置
end: Alignment.bottomRight, // 渐变结束位置
colors: [
Color(0xff0da6c2), // 渐变颜色1
Color(0xff0E39C6), // 渐变颜色2
],
),
child: Text('Slide to Submit'), // 设置按钮上的文本
),
SizedBox(height: 20),
GradientSlideToAct(
width: 300, // 设置按钮宽度
dragableIcon: Icons.arrow_forward, // 设置可拖动图标
textStyle: TextStyle(color: Colors.white, fontSize: 18), // 设置文本样式
backgroundColor: Colors.purple, // 设置背景颜色
onSubmit: () {}, // 滑动完成时的回调函数
gradient: LinearGradient(
begin: Alignment.centerLeft, // 渐变开始位置
colors: [
Colors.red, // 渐变颜色1
Colors.purple, // 渐变颜色2
],
),
child: Text('Slide to Next'), // 设置按钮上的文本
),
SizedBox(height: 20),
GradientSlideToAct(
width: 300, // 设置按钮宽度
dragableIconBackgroundColor: Colors.greenAccent, // 设置图标背景颜色
textStyle: TextStyle(color: Colors.white, fontSize: 18), // 设置文本样式
backgroundColor: Colors.deepPurple, // 设置背景颜色
onSubmit: () {}, // 滑动完成时的回调函数
gradient: const LinearGradient(
begin: Alignment.topLeft, // 渐变开始位置
end: Alignment.bottomRight, // 渐变结束位置
colors: [
Color(0Xff11998E), // 渐变颜色1
Color(0Xff38EF7D), // 渐变颜色2
],
),
child: Text('Slide to Complete'), // 设置按钮上的文本
),
],
),
),
);
}
}
更多关于Flutter渐变滑动切换页面插件gradient_slide_to_act的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter渐变滑动切换页面插件gradient_slide_to_act的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，gradient_slide_to_act 是一个用于 Flutter 的渐变滑动切换页面插件。它允许你在两个页面之间通过滑动动作实现带有渐变效果的切换。为了展示如何使用这个插件，我们需要首先确保在 pubspec.yaml 文件中添加依赖，然后编写示例代码。
第一步：添加依赖
首先，在你的 pubspec.yaml 文件中添加 gradient_slide_to_act 依赖：
dependencies:
flutter:
sdk: flutter
gradient_slide_to_act: ^最新版本号 # 请替换为实际的最新版本号
然后运行 flutter pub get 来获取依赖。
第二步：编写示例代码
下面是一个简单的示例代码，展示如何使用 gradient_slide_to_act 插件在两个页面之间实现渐变滑动切换。
import 'package:flutter/material.dart';
import 'package:gradient_slide_to_act/gradient_slide_to_act.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: GradientSlideToActDemo(),
);
}
}
class GradientSlideToActDemo extends StatefulWidget {
@override
_GradientSlideToActDemoState createState() => _GradientSlideToActDemoState();
}
class _GradientSlideToActDemoState extends State<GradientSlideToActDemo> with SingleTickerProviderStateMixin {
late PageController _pageController;
@override
void initState() {
super.initState();
_pageController = PageController(initialPage: 0);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Gradient Slide to Act Demo'),
),
body: GradientSlideToAct(
controller: _pageController,
children: <Widget>[
_buildPage(Colors.blue, 'Page 1'),
_buildPage(Colors.red, 'Page 2'),
],
gradientColors: [Colors.blue, Colors.red],
beginGradient: 0.3, // 渐变开始位置（相对于页面宽度）
endGradient: 0.7, // 渐变结束位置（相对于页面宽度）
slideAxis: Axis.horizontal, // 滑动方向
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Page 1',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Page 2',
),
],
currentIndex: _pageController.page.round(),
onTap: (int index) {
_pageController.animateToPage(index,
duration: Duration(milliseconds: 300), curve: Curves.easeInOut);
},
),
);
}
Widget _buildPage(Color color, String title) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: double.infinity,
height: 200,
color: color,
),
SizedBox(height: 20),
Text(
title,
style: TextStyle(fontSize: 24),
),
],
),
);
}
}
代码解释
- 依赖引入：在
pubspec.yaml文件中添加gradient_slide_to_act依赖。 - 页面结构：使用
Scaffold布局，包含一个AppBar和一个BottomNavigationBar，主体部分使用GradientSlideToAct组件。 - 控制器：使用
PageController来控制页面的滑动。 - GradientSlideToAct：
controller：与PageController关联。children：包含两个页面（这里使用_buildPage方法生成）。gradientColors：定义渐变颜色。beginGradient和endGradient：定义渐变开始和结束的位置（相对于页面宽度）。slideAxis：定义滑动方向（这里是水平方向）。
- BottomNavigationBar：用于在底部导航栏之间切换页面。
这样，你就可以在 Flutter 应用中使用 gradient_slide_to_act 插件实现带有渐变效果的滑动页面切换了。
