如何在 Flutter 中创建如下 UI

Question

I need a BMI visualiser like above, How can I create this? Is there any Widgets or Plugin available for this type of UI.

Answer 1

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();
  }
}