Flutter 中的投票进度条

Question

如何在 Flutter 中创建一个从两端开始的投票进度条，如果人们投票，绿色从 left side in green color 延伸是的如果人们投票，红色从right side in green color延伸不.我试图在 Pub dev 中找到，但找不到这样的东西。想知道如何像我发现的大多数教程一样创建一个，进度条只从一侧延伸，而不是从两侧延伸。 Something like this to clarify what I want to do

Answer 1

也许像这样：

Widget _voteWidget(int yesVote, int noVote) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            height: 20,
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(30)),
            ),
            child: Row(
              children: [
                Flexible(
                  flex: yesVote,
                  child: Container(
                    decoration: const BoxDecoration(
                      color: Colors.green,
                      borderRadius: BorderRadius.only(topLeft: Radius.circular(30), bottomLeft: Radius.circular(30)),
                    ),
                  ),
                ),
                Flexible(
                  flex: noVote,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.only(topRight: Radius.circular(30), bottomRight: Radius.circular(30)),
                    ),
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('${yesVote.toString()} Yes'),
              Text('${noVote.toString()} Yes'),
            ],
          )
        ],
      ),
    );
  }