flutter - 如果在列中，Flutter Loader 动画不居中

问题描述

我在 youtube 上学习了一个教程，解释了如何创建一个很棒的加载器。
一切正常，但如果我把装载机放在一个列中，中心就会移动，我真的不明白为什么。请你帮助我好吗？我不太擅长处理 Flutter 动画，但我非常喜欢这个，我真的很想了解我犯了什么错误。谢谢！

加载器代码：

import 'dart:math';

import 'package:flutter/material.dart';

class Loader extends StatefulWidget {
  @override
  _LoaderState createState() => _LoaderState();
}

class _LoaderState extends State<Loader> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animationRotation;
  Animation<double> animationRadiusIn;
  Animation<double> animationRadiusOut;

  final double initialRadius = 70;
  double radius = 0.0;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 5),
    );

    animationRotation = Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.0,
          1.0,
          curve: Curves.linear,
        ),
      ),
    );

    animationRadiusIn = Tween<double>(
      begin: 1.0,
      end: 0.0,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.75,
          1.0,
          curve: Curves.elasticIn,
        ),
      ),
    );
    animationRadiusOut = Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.0,
          0.25,
          curve: Curves.elasticOut,
        ),
      ),
    );

    controller.addListener(() {
      setState(() {
        if (controller.value >= 0.75 && controller.value <= 1.0) {
          radius = animationRadiusIn.value * initialRadius;
        } else if (controller.value >= 0.0 && controller.value <= 0.25) {
          radius = animationRadiusOut.value * initialRadius;
        }
      });
    });

    controller.repeat();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: animationRotation,
      child: Stack(
        children: <Widget>[
          Dot(
            radius: 90,
            color: Colors.black12,
          ),
          Transform.translate(
            offset: Offset(radius * cos(pi / 4), radius * sin(pi / 4)),
            child: Dot(
              radius: 10,
              color: Colors.redAccent,
            ),
          ),
          Transform.translate(
            offset: Offset(
                radius * cos(2 * pi / 4), radius * sin(2 * pi / 4)),
            child: Dot(
              radius: 10,
              color: Colors.greenAccent,
            ),
          ),
          Transform.translate(
            offset: Offset(
                radius * cos(3 * pi / 4), radius * sin(3 * pi / 4)),
            child: Dot(
              radius: 10,
              color: Colors.blueAccent,
            ),
          ),
          Transform.translate(
            offset: Offset(
                radius * cos(4 * pi / 4), radius * sin(4 * pi / 4)),
            child: Dot(
              radius: 10,
              color: Colors.purple,
            ),
          ),
          Transform.translate(
            offset: Offset(
                radius * cos(5 * pi / 4), radius * sin(5 * pi / 4)),
            child: Dot(
              radius: 10,
              color: Colors.amberAccent,
            ),
          ),
          Transform.translate(
            offset: Offset(
                radius * cos(6 * pi / 4), radius * sin(6 * pi / 4)),
            child: Dot(
              radius: 10,
              color: Colors.blue,
            ),
          ),
          Transform.translate(
            offset: Offset(
                radius * cos(7 * pi / 4), radius * sin(7 * pi / 4)),
            child: Dot(
              radius: 10,
              color: Colors.orangeAccent,
            ),
          ),
          Transform.translate(
            offset: Offset(
                radius * cos(8 * pi / 4), radius * sin(8 * pi / 4)),
            child: Dot(
              radius: 10,
              color: Colors.lightGreenAccent,
            ),
          ),
        ],
      ),
    );
  }
}

class Dot extends StatelessWidget {
  final double radius;
  final Color color;

  Dot({
    this.radius,
    this.color,
  });

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: radius,
        height: radius,
        decoration: BoxDecoration(color: color, shape: BoxShape.circle),
      ),
    );
  }
}

非工作示例：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.only(top: 100),
        child: Column(
          children: <Widget>[
            Loader(),
          ],
        ),
      ),
    );
  }

工作示例：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.only(top: 100),
        child: Loader(),
      ),
    );
  }

工作
 非工作

标签： flutteranimationdart

flutter - 如果在列中，Flutter Loader 动画不居中

问题描述

解决方案

推荐阅读