将LinearProgressIndicator的方向更改为垂直

Question

有没有一种方法可以将LinearProgressIndicator的方向从水平方向更改为垂直方向？

我可以这样更改它的大小：

Container(
  height: 1000,
  width: 24,
  child: LinearProgressIndicator(
    value: 0.8,
  ),
),

但是进度仍然会从右到左。我可以以某种方式将其从上到下更改吗？

Answer 1

请使用此软件包https://pub.dev/packages/flutter_animation_progress_bar
它支持垂直进度条。

代码段

import 'package:flutter/widgets.dart';
import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart';

void main() {
  runApp(
    Center(
        child: FAProgressBar(
          direction: Axis.vertical,
          verticalDirection: VerticalDirection.up,
      currentValue: 80,
      displayText: '%',
    )),
  );
}

代码段演示

官方演示

Answer 2

虽然LinearProgressIndicator不直接支持此功能，但是您可以轻松地用RotatedBox将其包装起来，以使其顺时针（1）或逆时针（-1）旋转90度，例如： / p>

RotatedBox(
  quarterTurns: -1,
  child: LinearProgressIndicator(),
)

您可以像往常一样进一步自定义它，当然高度变成宽度等等，例如结果：

以上示例的完整来源：

Padding(
  padding: EdgeInsets.all(80),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      RotatedBox(
        quarterTurns: -1,
        child: LinearProgressIndicator(
          value: 0.12,
        ),
      ),
      RotatedBox(
        quarterTurns: -1,
        child: LinearProgressIndicator(
          value: 0.42,
          valueColor: AlwaysStoppedAnimation(Colors.orange),
          backgroundColor: Colors.blue,
        ),
      ),
      RotatedBox(
        quarterTurns: 1,
        child: LinearProgressIndicator(
          minHeight: 20,
          value: 0.89,
          valueColor: AlwaysStoppedAnimation(Colors.purple),
          backgroundColor: Colors.lime,
        ),
      ),
    ],
  ),
)