Flutter渐变圆角加载按钮插件rounded_loading_button_gradient的使用
Rounded Loading Button Gradient
Rounded Loading Button Gradient 是一个用于创建带有渐变效果和圆角的加载按钮的新 Flutter 包。
获取开始
由于工作原因，我需要更改一些属性，因此基于 rounded_loading_button 构建了这个小部件。
我添加了图标、可选的加载小部件、渐变颜色等。
由于我是新手，期待大家的建议，谢谢！
灵感来源于 pub.dev 上的一个包。
相关链接：rounded_loading_button: https://pub.dev/packages/rounded_loading_button.
必备版本
SDK: “>=2.12.0 <3.0.0”
FLUTTER: “>=2.0.0”
示例
此示例包含额外的包 flutter_spinkit。
无渐变
Gif
class MyExample extends StatelessWidget {
final RoundedLoadingButtonGradientController controller =
RoundedLoadingButtonGradientController();
final duration = 800;
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox.expand(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 0),
child: RoundedLoadingButtonGradient(
controller: controller,
durationAnimation: duration,
widgetLoading: SpinKitSquareCircle(
color: Colors.white,
size: 20,
),
onTap: () async {
controller.start();
await fetchData();
controller.success();
await Future.delayed(Duration(milliseconds: duration));
controller.stop();
},
iconRight: Icons.ac_unit,
iconLeft: Icons.add,
),
)
],
),
),
);
}
Future<void> fetchData() async {
await Future.delayed(Duration(seconds: 2));
return;
}
}渐变
Gif
class MyExample extends StatelessWidget {
final RoundedLoadingButtonGradientController controller =
RoundedLoadingButtonGradientController();
final duration = 800;
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox.expand(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 0),
child: RoundedLoadingButtonGradient(
controller: controller,
disableButton: false,
gradient: LinearGradient(
colors: [Colors.red, Colors.blue],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
gradientSucess: LinearGradient(
colors: [Colors.red, Colors.blue],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
gradientError: LinearGradient(
colors: [Colors.red, Colors.blue],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
durationAnimation: duration,
widgetLoading: SpinKitSquareCircle(
color: Colors.white,
size: 20,
),
onTap: () async {
controller.start();
await fetchData();
controller.error(); // 或者 success
await Future.delayed(Duration(milliseconds: duration));
controller.stop();
},
iconRight: Icons.ac_unit,
iconLeft: Icons.add,
),
)
],
),
),
);
}
Future<void> fetchData() async {
await Future.delayed(Duration(seconds: 2));
return;
}
}完整示例代码
以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 rounded_loading_button_gradient 插件。
// main.dart
import 'package:flutter/material.dart';
import 'package:rounded_loading_button_gradient/rounded_loading_button_gradient.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyExample(),
);
}
}
class MyExample extends StatelessWidget {
final RoundedLoadingButtonGradientController controller =
RoundedLoadingButtonGradientController();
final duration = 800;
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Rounded Loading Button Gradient Example'),
),
body: SizedBox.expand(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: RoundedLoadingButtonGradient(
controller: controller,
disableButton: false,
gradient: LinearGradient(
colors: [Colors.purple, Colors.orange],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
gradientSucess: LinearGradient(
colors: [Colors.green, Colors.teal],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
gradientError: LinearGradient(
colors: [Colors.red, Colors.pink],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
durationAnimation: duration,
widgetLoading: SpinKitSquareCircle(
color: Colors.white,
size: 20,
),
onTap: () async {
controller.start();
await fetchData();
controller.success(); // 或者 error
await Future.delayed(Duration(milliseconds: duration));
controller.stop();
},
text: '点击加载',
iconRight: Icons.done,
iconLeft: Icons.add,
),
),
],
),
),
);
}
Future<void> fetchData() async {
await Future.delayed(Duration(seconds: 2));
return;
}
}
1 回复
更多关于Flutter渐变圆角加载按钮插件rounded_loading_button_gradient的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
rounded_loading_button_gradient 是一个 Flutter 插件，用于创建一个带有渐变背景和圆角的加载按钮。它结合了美观的 UI 和加载状态的功能，非常适合在需要用户等待操作完成时使用。
安装插件
首先，你需要在 pubspec.yaml 文件中添加 rounded_loading_button_gradient 插件的依赖：
dependencies:
flutter:
sdk: flutter
rounded_loading_button_gradient: ^1.0.0然后运行 flutter pub get 来安装插件。
使用示例
以下是一个简单的示例，展示了如何使用 rounded_loading_button_gradient 插件来创建一个带有渐变背景和圆角的加载按钮。
import 'package:flutter/material.dart';
import 'package:rounded_loading_button_gradient/rounded_loading_button_gradient.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Rounded Loading Button Gradient Example'),
),
body: Center(
child: RoundedLoadingButtonGradientExample(),
),
),
);
}
}
class RoundedLoadingButtonGradientExample extends StatefulWidget {
[@override](/user/override)
_RoundedLoadingButtonGradientExampleState createState() =>
_RoundedLoadingButtonGradientExampleState();
}
class _RoundedLoadingButtonGradientExampleState
extends State<RoundedLoadingButtonGradientExample> {
final RoundedLoadingButtonController _btnController =
RoundedLoadingButtonController();
void _doSomething() async {
// 模拟一个异步操作
await Future.delayed(Duration(seconds: 2));
_btnController.success();
}
[@override](/user/override)
Widget build(BuildContext context) {
return RoundedLoadingButtonGradient(
controller: _btnController,
onPressed: _doSomething,
child: Text(
'Click Me',
style: TextStyle(color: Colors.white),
),
gradient: LinearGradient(
colors: [Colors.blue, Colors.green],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: 20.0,
width: 200.0,
height: 50.0,
);
}
}