控件是长这样的
代码实现是这样的
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class RefoundDetailProgress extends StatelessWidget {
const RefoundDetailProgress({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: [
Stack(
children: [
_progressView(1),
_ProgressCircle(1),
],
),
textProgress(1)
],
);
}
Widget _progressView(int type) {
double value = 0;
switch (type){
case 0:
value = 0;
break;
case 1:
value = 0.5;
break;
case 2:
value = 1;
break;
}
return Container(
alignment: Alignment.center,
margin: const EdgeInsets.fromLTRB(64, 28, 64, 0),
child: SizedBox(
height: 4,
child: LinearProgressIndicator(
value: value,
backgroundColor: const Color(0xffdddddd),
valueColor: const AlwaysStoppedAnimation<Color>(Color(0xff007EFF)),
),
),
);
}
Widget _ProgressCircle(int type){
return Container(
alignment: Alignment.center,
margin: const EdgeInsets.fromLTRB(62, 20, 62, 0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
//向外扩展布局
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: circleChildren(type),
),
);
}
List<Widget> circleChildren(int type) {
List<Widget> circleList = [];
for (int i = 0; i < 3; i++) {
if (type == i) {
circleList.add(Image.asset(
'assets/images/select_pay.png',
height: 18,
width: 18,
));
} else {
circleList.add(Container(
width: 10,
height: 10,
decoration: BoxDecoration(
color: type < i ? const Color(0xffdddddd) : const Color(0xff007EFF),
borderRadius: const BorderRadius.all(Radius.circular(5))),
));
}
}
return circleList;
}
Widget textProgress(int type) {
return Container(
alignment: Alignment.center,
margin: const EdgeInsets.fromLTRB(43, 10, 43, 0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
//向外扩展布局
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: textChildren(type),
),
);
}
List<Widget> textChildren(int type) {
List<String> text = ['申请退款','申请已通过','退款成功'];
List<Widget> textList = [];
for (int i = 0; i< 3; i++) {
textList.add(Text(text[i],style: TextStyle(
fontWeight: FontWeight.w300,
fontSize: 14,
color: type >= i ? const Color(0xff007EFF) : const Color(0xff333333)
),));
}
return textList;
}
}