Change direction of LinearProgressIndicator to vertical

Question

Is there a way I can change the direction of the LinearProgressIndicator from horizontal to vertical?

I can change the size of it like this:

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

But the the progress will still go from right to left. Can I somehow change it from top to bottom?

Answer 1

While LinearProgressIndicator does not support this directly, you can easily wrap it with RotatedBox to rotate it 90 degrees, either clockwise (1) or counter-clockwise (-1), for example:

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

You can further customize it like usual, of course height becomes width and etc, example result:

Full source for the above example:

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,
        ),
      ),
    ],
  ),
)

Answer 2

please use this package https://pub.dev/packages/flutter_animation_progress_bar
it support vertical progress bar.

code snippet

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: '%',
    )),
  );
}

code snippet demo

official demo