flutter - 动画从左到右水平，但我想要垂直（从上到下）

Question

在这个项目中，我的动画在容器中从左到右，但我想在这个容器中从上到下动画。我还附上了此执行的屏幕截图以了解我的问题。

 import 'package:flutter/material.dart';
class Trackorder extends StatefulWidget {
  Trackorder({Key key}) : super(key: key);
  static const String routename = 'Trackorder';
  @override
  _TrackorderState createState() => _TrackorderState();
}

class _TrackorderState extends State<Trackorder> with TickerProviderStateMixin {
  AnimationController animationController;
  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      duration: Duration(milliseconds: 8800),
      vsync: this,
    );
    animationController.forward();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('trackorder'),
        centerTitle: true,
      ),
      body: AnimatedBar(controller: animationController),
    );
  }
}

class AnimatedBar extends StatelessWidget {
  final dotsize = 20.0;
  final AnimationController controller;
  final Animation<Color> dotOneColor;
  final Animation<TextStyle> textOneStyle;
  final Animation<double> progressBarOne;
  final Animation<Color> dotTwoColor;
  final Animation<TextStyle> textTwoStyle;
  final Animation<double> progressBarTwo;

  AnimatedBar({Key key, this.controller})
      : dotOneColor = ColorTween(
          begin: Colors.grey,
          end: Colors.yellow,
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(
              0.000,
              0.000,
              curve: Curves.linear,
            ),
          ),
        ),
        textOneStyle = TextStyleTween(
          begin: TextStyle(
              fontWeight: FontWeight.w400, color: Colors.grey, fontSize: 12),
          end: TextStyle(
              fontWeight: FontWeight.w600, color: Colors.black87, fontSize: 12),
        ).animate(
          CurvedAnimation(
              parent: controller,
              curve: Interval(0.000, 0.000, curve: Curves.linear)),
        ),
        progressBarOne = Tween(begin: 0.0, end: 1.0).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(0.100, 0.200, curve: Curves.linear),
          ),
        ),
        dotTwoColor = ColorTween(
          begin: Colors.grey,
          end: Colors.yellow,
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(
              0.000, 0.000, // 0.450,
              // 0.550,
              curve: Curves.linear,
            ),
          ),
        ),
        textTwoStyle = TextStyleTween(
          begin: TextStyle(
              fontWeight: FontWeight.w400, color: Colors.grey, fontSize: 12),
          end: TextStyle(
              fontWeight: FontWeight.w600, color: Colors.black87, fontSize: 12),
        ).animate(
          CurvedAnimation(
              parent: controller,
              curve: Interval(0.000, 0.000, curve: Curves.linear)),
        ),
        progressBarTwo = Tween(begin: 0.0, end: 1.0).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(0.200, 0.300, curve: Curves.linear),
          ),
        ),
        // 
        super(key: key);
  @override
  Widget build(BuildContext context) {
    final devicesize = MediaQuery.of(context).size;
    return Container(
      child: AnimatedBuilder(
        animation: controller,
        builder: (BuildContext context, Widget child) => Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              "Order No.001",
              style: Theme.of(context).textTheme.subtitle1,
            ),
            Text(
              "Order confirrmed ready to pick",
              style: TextStyle(color: Colors.grey, fontSize: 15.0),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 15.0),
              child: Divider(
                height: 1.0,
                color: Colors.grey,
              ),
            ),
            Container(
              // width: devicesize.width / 1.3,
              height: devicesize.height * 0.50,
              margin: EdgeInsets.only(top: 10),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    width: dotsize,
                    height: dotsize,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(dotsize / 2),
                        color: dotOneColor.value),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                      width: 30,
                      // child: RotationTransition(
                      //   turns: AlwaysStoppedAnimation(90 / 360),
                      child: LinearProgressIndicator(
                        backgroundColor: Colors.grey,
                        value: progressBarOne.value,
                        valueColor:
                            AlwaysStoppedAnimation<Color>(Colors.yellow),
                      ),
                      // ),
                    ),
                  ),
                  // SizedBox(width: 10),
                  SizedBox(height: 10),

                  Container(
                    width: dotsize,
                    height: dotsize,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(dotsize / 2),
                        color: dotTwoColor.value),
                  ),
                  // SizedBox(width: 10),
                  SizedBox(height: 10),
                  Expanded(
                    flex: 1,
                    child: Container(
                      // height: 2,
                      width: 30[![enter image description here][1]][1],
                      child: LinearProgressIndicator(
                        backgroundColor: Colors.grey,
                        value: progressBarTwo.value,
                        valueColor:
                            AlwaysStoppedAnimation<Color>(Colors.yellow),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

标签： flutterdartflutter-layoutflutter-dependenciesflutter-animation

Answer 1

您可以将 LinearProgressIndicator 放在 RotatedBox 中：

RotatedBox(
      quarterTurns: 1,
      child: LinearProgressIndicator(
      backgroundColor: Colors.grey,
      value: progressBarOne.value,
      valueColor:
      AlwaysStoppedAnimation<Color>(Colors.yellow),
      ),
    ),