Flutter按钮样式插件argon_buttons_flutter_fix的使用
Flutter按钮样式插件argon_buttons_flutter_fix的使用
标题
Argon Buttons (Timer and Loading)
内容
创建带有加载动画和计时功能的美丽按钮。无需担心处理动画或定时器，因为此包会为你处理所有繁琐的事情。
示例代码
import 'package:flutter/material.dart';
import 'package:argon_buttons_flutter/argon_buttons_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ArgonButtonExample(),
);
}
}
class ArgonButtonExample extends StatelessWidget {
const ArgonButtonExample({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ArgonTimerButton(
height: 50,
width: MediaQuery.of(context).size.width * 0.45,
minWidth: MediaQuery.of(context).size.width * 0.30,
highlightColor: Colors.transparent,
highlightElevation: 0,
roundLoadingShape: false,
onTap: (startTimer, btnState) {
if (btnState == ButtonState.Idle) {
startTimer(5);
}
},
initialTimer: 10,
child: Text(
"Resend OTP",
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.w700),
),
loader: (timeLeft) {
return Text(
"Wait | $timeLeft",
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.w700),
);
},
borderRadius: 5.0,
color: Colors.transparent,
elevation: 0,
borderSide: BorderSide(color: Colors.black, width: 1.5),
),
SizedBox(height: 50),
ArgonTimerButton(
height: 50,
width: MediaQuery.of(context).size.width * 0.45,
onTap: ( (startTimer, btnState) {
if (btnState == ButtonState.Idle) {
startTimer(5);
}
},
child: Text(
"Resend OTP",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w700),
),
loader: (timeLeft) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50)),
margin: EdgeInsets.all(5),
alignment: Alignment.center,
width: 40,
height: 40,
child: Text(
"$timeLeft",
style: TextStyle(fontSize: 220, fontWeight: FontWeight.w700),
),
);
},
borderRadius: 5.0,
color: Color(0xFF7866FE),
),
SizedBox(height: 50),
ArgonTimerButton(
height: 50,
width: MediaQuery.of(context).size.width * 0.45,
minWidth: MediaQuery.of(context).size.width * 0.30,
highlightColor: Colors.transparent,
highlightElevation: 0,
roundLoadingShape: false,
splashColor: Colors.transparent,
onTap: (startTimer, btnState) {
if (btnState == ButtonState.Idle) {
startTimer(5);
}
},
initialTimer: 10,
child: Text(
"Resend OTP",
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.w700),
),
loader: ( timeTimeLeft) {
return Text(
"Wait | $timeLeft",
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.w700),
);
},
borderRadius: 5.0,
color: Colors.transparent,
elevation: 0,
),
SizedBox(height: 50),
Container(
margin: EdgeInsets.fromLTRB(40, 0, 40, 0),
height: 1,
color: Colors.black,
),
SizedBox(height: 50),
ArgonButton(
height: 50,
roundLoadingShape: true,
width: MediaQuery.of(context).size.width * 0.45,
onTap: (startLoading, stopLoading, btnState) {
if (btnState == ButtonState.Idle) {
startLoading();
} else {
stopLoading();
}
},
child: Text(
"SignUp",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w700),
),
loader: Container(
padding: EdgeInsets.all(10),
),
borderRadius: 5.0,
color: Color(0xFFfb4747),
),
SizedBox(height: 50),
ArgonButton(
height: 50,
roundLoadingShape: false,
width: MediaQuery.of(context).size.width * 0.45,
minWidth: MediaQuery.of(context).size.width * 0.30,
onTap: (startLoading, stopLoading, btnState) {
if (btnState == ButtonState.Idle) {
startLoading();
} else {
stopLoading();
}
},
child: Text(
"Continue",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w700),
),
loader: Text(
"Loading...",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w700),
),
borderRadius: 5.0,
color: Color(0xFF7866FE),
),
],
),
),
);
}
}
更多关于Flutter按钮样式插件argon_buttons_flutter_fix的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter按钮样式插件argon_buttons_flutter_fix的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是如何在Flutter项目中使用argon_buttons_flutter_fix插件来创建具有自定义样式的按钮的示例代码。
首先，确保你已经在pubspec.yaml文件中添加了argon_buttons_flutter_fix依赖：
dependencies:
flutter:
sdk: flutter
argon_buttons_flutter_fix: ^最新版本号 # 替换为实际的最新版本号
然后，运行flutter pub get来安装依赖。
接下来，在你的Flutter项目中，你可以按照以下方式使用argon_buttons_flutter_fix来创建按钮。
示例代码
import 'package:flutter/material.dart';
import 'package:argon_buttons_flutter_fix/argon_buttons_flutter_fix.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Argon Buttons Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Argon Buttons Flutter Fix Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 示例：ArgonButton
ArgonButton(
width: 200,
height: 50,
borderRadius: 25,
color: Colors.blue,
child: Text(
'Blue Button',
style: TextStyle(color: Colors.white, fontSize: 16),
),
onPressed: () {
print('Blue Button Pressed');
},
),
SizedBox(height: 20),
// 示例：ArgonButton.roundedRect
ArgonButton.roundedRect(
width: 200,
height: 50,
color: Colors.green,
borderColor: Colors.white,
borderWidth: 2,
child: Text(
'Green Button',
style: TextStyle(color: Colors.white, fontSize: 16),
),
onPressed: () {
print('Green Button Pressed');
},
),
SizedBox(height: 20),
// 示例：ArgonButton.oval
ArgonButton.oval(
width: 200,
height: 50,
color: Colors.red,
child: Text(
'Red Oval Button',
style: TextStyle(color: Colors.white, fontSize: 16),
),
onPressed: () {
print('Red Oval Button Pressed');
},
),
SizedBox(height: 20),
// 示例：ArgonButton.shadow
ArgonButton.shadow(
width: 200,
height: 50,
color: Colors.purple,
shadowColor: Colors.black.withOpacity(0.2),
child: Text(
'Shadow Button',
style: TextStyle(color: Colors.white, fontSize: 16),
),
onPressed: () {
print('Shadow Button Pressed');
},
),
],
),
),
);
}
}
解释
- 导入依赖：首先导入
argon_buttons_flutter_fix包。 - 定义应用：在
MyApp类中定义了一个基本的Flutter应用。 - 主页布局：在
MyHomePage类中，创建了一个包含多个按钮的Column布局。 - 按钮样式：
- 使用
ArgonButton创建一个基本的按钮。 - 使用
ArgonButton.roundedRect创建一个具有圆角矩形边框的按钮。 - 使用
ArgonButton.oval创建一个椭圆形的按钮。 - 使用
ArgonButton.shadow创建一个带有阴影效果的按钮。
- 使用
通过这些示例代码，你可以看到如何使用argon_buttons_flutter_fix插件来创建不同样式的按钮，并在用户点击按钮时打印日志消息。你可以根据需要进一步自定义按钮的样式和行为。
