当前位置:网站首页>Fluent implements a loadingbutton with loading animation
Fluent implements a loadingbutton with loading animation
2022-07-06 05:10:00 【Bright as water】
Preface
Today I share a button that loads animation again , I hope I can help you , Just replace the loading icon . The renderings are as follows :
One 、loading Component code
import "dart:math" as math;
import 'package:flutter/material.dart';
class HBLoadingButton extends StatefulWidget {
bool loading;
String title;
Function callback;
bool isActive; // Is it active
// Button height
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(
" Loading ...",
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();
}
}
Two 、 Use the code
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(" Test load button "),
),
body: _buildMainWidget(context),
);
}
_buildMainWidget(BuildContext context) {
return Center(
child: SizedBox(
width: 291.0,
height: 40.0,
child: HBLoadingButton(
requesting,
" determine ",
_beforeConfirm,
),
),
);
}
_beforeConfirm() {
setState(() {
requesting = true;
});
Future.delayed(const Duration(milliseconds: 5000), () {
setState(() {
requesting = false;
});
});
}
}
END.
边栏推荐
- Yolov5 tensorrt acceleration
- [noip2009 popularization group] score line delimitation
- Quelques conseils communs sur l'inspecteur de l'unit é, généralement pour les extensions d'éditeur ou d'autres
- Nacos TC setup of highly available Seata (02)
- 关于es8316的音频爆破音的解决
- 树莓派3.5寸屏幕白屏显示连接
- Orm-f & Q object
- Three methods of Oracle two table Association update
- [effective Objective-C] - memory management
- What are the advantages of the industry private network over the public network? What specific requirements can be met?
猜你喜欢
Fiddler installed the certificate, or prompted that the certificate is invalid
L'introduction en bourse de MSK Electronics a pris fin: 800 millions de RMB d'actifs de Henan étaient des actionnaires
Summary of redis basic knowledge points
[effective Objective-C] - memory management
ORM aggregate query and native database operation
Vite configures the development environment and production environment
Postman assertion
Why does MySQL need two-phase commit
GAMES202-WebGL中shader的編譯和連接(了解向)
What are the advantages of the industry private network over the public network? What specific requirements can be met?
随机推荐
IPv6 comprehensive experiment
On the solution of es8316's audio burst
The video in win10 computer system does not display thumbnails
Can the feelings of Xi'an version of "Coca Cola" and Bingfeng beverage rush for IPO continue?
TCP three handshakes you need to know
Sorting out the knowledge points of multicast and broadcasting
idea一键导包
flutter 实现一个有加载动画的按钮(loadingButton)
Postman assertion
The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
[noip2008 improvement group] stupid monkey
GAMES202-WebGL中shader的編譯和連接(了解向)
Postman管理测试用例
Postman manage test cases
Acwing week 58
Summary of three log knowledge points of MySQL
【LeetCode】18、四数之和
Leetcode 186 Flip the word II in the string (2022.07.05)
ISP学习(2)
The IPO of mesk Electronics was terminated: Henan assets, which was once intended to raise 800 million yuan, was a shareholder