我是新的flutter。我已经实现了一个按钮,我想进度指标像下面的按钮点击。
我已经使用 百分比指标 包来实现,但它不能正常归档。
我的代码是
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
),
),
),
),
);
}
}
那么,如何正确地实现像图像一样的归档? 如果有任何其他的方式来实现它,请建议我我真的需要这个.Thanks in advance!
这个代码可能会帮助你。
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...")),
],
))),
),
);
}
}