As you progress in your Flutter journey, you'll come across the need for more advanced animations to create a visually appealing user experience. Flutter offers a plethora of tools and libraries to help you create complex animations.
Advanced Animation in Flutter π₯
1. Animation Controller ποΈ
The AnimationController is a powerful tool that not only controls the animation, but also the speed, duration, and much more. It can be used to create more complex animations by controlling the behavior of the animation over time.
These lines import necessary libraries. The dart:math library is used to work with random numbers, and package:flutter/material.dart is the Material library in Flutter, which provides many widgets to build a UI.
2. DiscData Class π
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,
);
}
The DiscData class holds information for each disc, including its size, color, and position. The constructor initializes these properties with random values.
The main function is the entry point of the Flutter app. Here, a MaterialApp widget is created with a dark theme and a VariousDiscs widget with 50 discs as the home screen.
4. VariousDiscs Widget π
class VariousDiscs extends StatefulWidget {
final int numberOfDiscs;
const VariousDiscs(this.numberOfDiscs);
@override
State<VariousDiscs> createState() => _VariousDiscsState();
}
The VariousDiscs widget is a StatefulWidget that takes the number of discs as a parameter.
The _VariousDiscsState class manages the state of the VariousDiscs widget. It creates a list of DiscData objects, which are used to build a stack of animated discs. When a disc is tapped, the _makeDiscs method is called to regenerate the list of discs, triggering a new set of animations.