如何使用 Flutter 创建如下图所示的评级摘要？

Question

如何创建如下所示的条线？

Answer 1

您可以仅使用一列来创建它，该列有 5 行作为其子项。每行都有星星计数、星星图标、进度条和百分比文本作为其子项。至于如何使用小部件实现绿色进度条，我只需使用 Stack 小部件将两个容器堆叠在一起。控制顶部容器的宽度，您就可以控制条形图的绿色填充量。对我来说似乎很简单。

Answer 2

我根据@TheUltimateOptimist 的指导设法解决了这个问题。他是我的解决方案，虽然很基本，但很有效。这是它的样子和下面的代码。

import 'package:myapp/config/app_theme.dart';
import 'package:flutter/material.dart';

class ReviewChart extends StatelessWidget {
  const ReviewChart({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(height: 8),
          chartRow(context, '5', 89),
          chartRow(context, '4', 8),
          chartRow(context, '3', 2),
          chartRow(context, '4', 1),
          chartRow(context, '1', 0),
          SizedBox(height: 8),
        ],
      ),
    );
  }

  Widget chartRow(BuildContext context, String label, int pct) {
    return Row(
      children: [
        Text(label, style: AppTheme.bodyText1),
        SizedBox(width: 8),
        Icon(Icons.star, color: AppTheme.iconColor),
        Padding(
          padding: EdgeInsetsDirectional.fromSTEB(8, 0, 8, 0),
          child:
          Stack(
            children: [
              Container(
                width: MediaQuery.of(context).size.width * 0.7,
                decoration: BoxDecoration(
                    color: AppTheme.iconColor,
                    borderRadius: BorderRadius.circular(20)
                ),
                child: Text(''),
              ),
              Container(
                width: MediaQuery.of(context).size.width * (pct/100) * 0.7,
                decoration: BoxDecoration(
                    color: AppTheme.color3,
                    borderRadius: BorderRadius.circular(20)
                ),
                child: Text(''),
              ),
            ]

          ),
        ),
        Text('$pct%', style: AppTheme.bodyText1),
      ],
    );
  }
}