Flutter 精彩的隐式动画效果源代码-满天星

Flutter动态圆环隐式动画实战

最新推荐文章于 2025-09-19 15:45:39 发布

原创

最新推荐文章于 2025-09-19 15:45:39 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

本文详细展示了如何在Flutter中使用隐式动画创建动态变化的圆环效果，通过`AnimatedAlign`和`AnimatedContainer`结合随机数据生成，为Disc Data类实例赋予了生动的视觉动画体验。

Flutter 精彩的隐式动画效果源代码。。

import 'dart:math';
import 'package:flutter/material.dart';


class DiscData {
  static final _rng = Random();

  final double size;
  final Color color;
  final Alignment alignment;

  DiscData()
      : size = _rng.nextDouble() * 40 + 10,
        color = Color.fromARGB(
          _rng.nextInt(200),
          _rng.nextInt(255),
          _rng.nextInt(255),
          _rng.nextInt(255),
        ),
        alignment = Alignment(
          _rng.nextDouble() * 2 - 1,
          _rng.nextDouble() * 2 - 1,
        );
}

void main() async {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          color: Color(0xFF15202D),
          child: SizedBox.expand(
            child: VariousDiscs(50),
          ),
        ),
      ),
    ),
  );
}

class VariousDiscs extends StatefulWidget {
  final int numberOfDiscs;

  VariousDiscs(this.numberOfDiscs);

  @override
  _Var