当前位置:网站首页>flutter 实现一个有加载动画的按钮(loadingButton)
flutter 实现一个有加载动画的按钮(loadingButton)
2022-07-06 05:01:00 【明似水】
前言
今天分享一个又加载动画的按钮,希望能帮助到你,替换加载图标就可以了。效果图如下:
一、loading组件代码
import "dart:math" as math;
import 'package:flutter/material.dart';
class HBLoadingButton extends StatefulWidget {
bool loading;
String title;
Function callback;
bool isActive; //是否活跃
// 按钮高度
double? height = 40.0;
HBLoadingButton(this.loading, this.title, this.callback, {this.height, this.isActive = true});
@override
_HBLoadingButtonState createState() => _HBLoadingButtonState();
}
class _HBLoadingButtonState extends State<HBLoadingButton> with SingleTickerProviderStateMixin {
AnimationController? _controller;
@override
void initState() {
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 100 * 15),
)..repeat();
}
@override
void dispose() {
_controller?.dispose();
super.dispose();
}
Widget _btn() {
return Container(
decoration: widget.isActive
? BoxDecoration(
color: Color(0xFF006CFF),
borderRadius: BorderRadius.circular(8.0),
)
: BoxDecoration(
color: Color(0x1F0C0C1C),
borderRadius: BorderRadius.circular(8.0),
),
height: widget.height,
child: TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Color(0xFF006CFF)),
),
child: Text(
widget.title,
style: widget.isActive
? const TextStyle(fontSize: 16.0, color: Color(0xFFFFFFFF))
: const TextStyle(fontSize: 16.0, color: Color(0x800C0C1C)),
),
onPressed: () {
widget.callback();
},
),
);
}
Widget _loadingBtn() {
Widget icon = Image.asset(
"lib/common/assets/ic_loading_more_white.png",
width: 16,
height: 16,
);
if (_controller != null) {
icon = AnimatedBuilder(
animation: _controller!,
builder: (_, Widget? child) {
return Transform.rotate(
angle: _controller!.value * 2 * math.pi,
child: child,
);
},
child: icon,
);
}
return Container(
decoration: BoxDecoration(
color: Color(0xFF006CFF),
borderRadius: BorderRadius.circular(8.0),
),
height: widget.height,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
"加载中。。。",
style: TextStyle(color: Color(0xFFFFFFFF), fontSize: 14.0),
),
Container(
margin: const EdgeInsets.only(left: 6.0),
child: icon,
),
],
),
);
}
@override
Widget build(BuildContext context) {
return widget.loading ? _loadingBtn() : _btn();
}
}
二、使用代码
import 'package:flutter/material.dart';
import 'package:flutter_hotsmeta/module/beginner_guide/page/hb_loading_button.dart';
class HBLoadingPage extends StatefulWidget {
const HBLoadingPage({Key? key}) : super(key: key);
@override
State<HBLoadingPage> createState() => _HBLoadingPageState();
}
class _HBLoadingPageState extends State<HBLoadingPage> {
bool requesting = false;
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: Text("测试加载按钮"),
),
body: _buildMainWidget(context),
);
}
_buildMainWidget(BuildContext context) {
return Center(
child: SizedBox(
width: 291.0,
height: 40.0,
child: HBLoadingButton(
requesting,
"确定",
_beforeConfirm,
),
),
);
}
_beforeConfirm() {
setState(() {
requesting = true;
});
Future.delayed(const Duration(milliseconds: 5000), () {
setState(() {
requesting = false;
});
});
}
}
END.
边栏推荐
- Postman assertion
- Driver development - hellowdm driver
- Postman测试报告
- The IPO of mesk Electronics was terminated: Henan assets, which was once intended to raise 800 million yuan, was a shareholder
- Flink kakfa data read and write to Hudi
- Fiddler installed the certificate, or prompted that the certificate is invalid
- 2021 RoboCom 世界机器人开发者大赛-本科组(复赛)
- 图论的扩展
- 2021RoboCom机器人开发者大赛(初赛)
- Building intelligent gray-scale data system from 0 to 1: Taking vivo game center as an example
猜你喜欢
[detailed steps of FreeRTOS shift value for the first time]
IPv6 comprehensive experiment
Compilation et connexion de shader dans games202 - webgl (comprendre la direction)
Review of double pointer problems
The IPO of mesk Electronics was terminated: Henan assets, which was once intended to raise 800 million yuan, was a shareholder
Postman pre script - global variables and environment variables
MPLS experiment
Ad20 is set with through-hole direct connection copper sheet, and the bonding pad is cross connected
Three methods of Oracle two table Association update
Fiddler installed the certificate, or prompted that the certificate is invalid
随机推荐
Basic knowledge and examples of binary tree
[noip2009 popularization group] score line delimitation
Rce code and Command Execution Vulnerability
Golang -- TCP implements concurrency (server and client)
What are the advantages of the industry private network over the public network? What specific requirements can be met?
February 12 relativelayout
ISP学习(2)
The IPO of mesk Electronics was terminated: Henan assets, which was once intended to raise 800 million yuan, was a shareholder
Flody的应用
比尔·盖茨晒18岁个人简历,48年前期望年薪1.2万美元
Microblogging hot search stock selection strategy
Collection + interview questions
Yolov5 tensorrt acceleration
内核判断i2c地址上是否挂载外设
Driver development - hellowdm driver
Summary of redis AOF and RDB knowledge points
Nacos TC setup of highly available Seata (02)
Postman断言
Bill Gates posted his 18-year-old resume and expected an annual salary of $12000 48 years ago
Lepton 无损压缩原理及性能分析