如何在 Flutter 中创建如下所示的 UI

问题描述

我需要一个像上面这样的 BMI 可视化工具，我该如何创建？是否有任何小部件或插件可用于这种类型的用户界面。

解决方法

我创建了自定义 Ui 类来执行此操作

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