I have created Custom Ui Class to do this
class BmiVisualizer extends StatelessWidget {
final double bmiValue;
final String bodyType;
BmiVisualizer({@required this.bmiValue, this.bodyType});
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 24),
height: 100,
child: Column(
children: [
Wrap(
children: [
Text("$bmiValue "),
Text(
"$bodyType",
style: TextStyle(
fontWeight: FontWeight.w800,
color: bmiValue == null
? Colors.lightGreen[200]
: bmiValue <= 18.5
? Colors.lightGreen[200]
: bmiValue > 18.5 && bmiValue.round() <= 24
? Colors.green
: bmiValue.round() > 24 && bmiValue.round() <= 30
? Colors.orange
: bmiValue > 30 && bmiValue <= 35
? Colors.red[300]
: bmiValue > 35 && bmiValue <= 40
? Colors.red
: Colors.red,
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: [
for (double i = 15; i <= 45; i++)
Container(
height:
(bmiValue != null && bmiValue < 15 && i.round() == 15) ||
(bmiValue != null &&
bmiValue > 45 &&
i.round() == 45) ||
i.round() == bmiValue?.round()
? 50
: 30,
width: i.round() == bmiValue?.round() ? 3 : 2,
color: i <= 18.5
? Colors.lightGreen[200]
: i > 18.5 && i.round() <= 24
? Colors.green
: i.round() > 24 && i.round() <= 30
? Colors.orange
: i > 30 && i <= 35
? Colors.red[300]
: i > 35 && i <= 40 ? Colors.red : Colors.red,
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: [
for (double i = 15.5; i < 45; i++)
Container(
child: Text(i == 18.5
? "18.5"
: i.round() == 25
? "25"
: i.round() == 30
? "30"
: i.round() == 35
? "35"
: i.round() == 40 ? "40" : ""),
)
],
),
],
),
);
throw UnimplementedError();
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.