动画从左到右水平移动，但我想垂直从上到下

问题描述

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

 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,).animate(
          CurvedAnimation(
              parent: controller,curve: Interval(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,// 0.450,// 0.550,textTwoStyle = TextStyleTween(
          begin: TextStyle(
              fontWeight: FontWeight.w400,progressBarTwo = Tween(begin: 0.0,curve: Interval(0.200,0.300,// 
        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,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,color: dotTwoColor.value),child: Container(
                      // height: 2,width: 30[![enter image description here][1]][1],value: progressBarTwo.value,],);
  }
}

解决方法

您可以将LinearProgressIndicator放在RotatedBox中：

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