![](/img/trans.png)
[英]how to get custom circular progress indicator as shown in image with flutter?
[英]How to display progress indicator in button widget (as shown in image)
我是 flutter 的新手。 我已經實現了一個按鈕,我想在單擊按鈕時像下面這樣進度指示器。
我已經使用百分比指標package 來實現,但它沒有正確存檔。
我的代碼是,
class DownloadIndicatorWidget extends StatefulWidget {
bool download = false;
@override
_DownloadIndicatorWidgetState createState() => _DownloadIndicatorWidgetState();
}
class _DownloadIndicatorWidgetState extends State<DownloadIndicatorWidget> {
@override
Widget build(BuildContext context) {
return widget.download?ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: 40,
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff9F00C5), // <--- border color
width: 10.0,
),
borderRadius: BorderRadius.circular(10.0)
),
child: LinearPercentIndicator(
// width: MediaQuery.of(context).size.width -
// width:107,
animation: true,
lineHeight: 40.0,
animationDuration: 2500,
percent: 1,
center: Text(
"Downloading...",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w800,
fontSize: 14
)),
linearStrokeCap: LinearStrokeCap.roundAll,
progressColor: Color(0xff9F00C5),
backgroundColor: Colors.white,
),
),
):RaisedButton(
onPressed: () {
setState(() {
widget.download = true;
});
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
padding: EdgeInsets.all(0.0),
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Color(0xff9F00C5), Color(0xff9405BD),Color(0xff7913A7),Color(0xff651E96), Color(0xff522887)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
borderRadius: BorderRadius.circular(10.0)
),
child: Container(
constraints: BoxConstraints(maxWidth: 300.0, minHeight: 50.0),
alignment: Alignment.center,
child: Text(
"Download",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w800,
fontSize: 18
),
),
),
),
);
}
}
那么,如何正確實現像圖像一樣存檔呢? 如果有任何其他方法可以實現它,請建議我我真的需要這個。 提前致謝!
此代碼可能會對您有所幫助。
import 'dart:async';
import 'package:flutter/material.dart';
class Progress extends StatefulWidget {
@override
_ProgressState createState() => _ProgressState();
}
class _ProgressState extends State<Progress> {
double progress = 0;
void initState() {
super.initState();
Timer.periodic(Duration(milliseconds: 100), (Timer t) {
setState(() {
if (progress > 120) {
progress = 0;
} else {
progress += 5;
}
});
});
}
@override
Widget build(BuildContext context) {
return Center(
child: FlatButton(
onPressed: () {},
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: 45,
width: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.indigo,
width: 1,
)),
child: Stack(
children: <Widget>[
AnimatedContainer(
color: Colors.indigo,
width: progress,
duration: Duration(milliseconds: 100),
curve: Curves.fastOutSlowIn,
),
Center(child: Text("Downloading...")),
],
))),
),
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.