πŸŽ“Advanced Animations

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.

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

2. CurvedAnimation 🌊

CurvedAnimation allows you to apply a non-linear curve to an animation, which can make the movement feel more natural.

Animation curve = CurvedAnimation(
  parent: controller,
  curve: Curves.easeInOut,
);

3. Animation Sequences πŸ“œ

With Interval, you can control the portion of an animation's duration when a range of values is used.

Animation<double> tween = Tween<double>(begin: 0, end: 300).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(
      0.5, 1.0,
      curve: Curves.fastOutSlowIn,
    ),
  ),
);

4. Staggered Animations πŸ’«

Staggered animations are a sequence of animations that run one after the other.

Animation<double> tween = Tween<double>(begin: 0, end: 300).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(
      0, 0.6,
      curve: Curves.ease,
    ),
  ),
);

Let's Understand An Advanced Animation Example πŸ”–

// Copyright 2020 the Dart project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license
// that can be found in the LICENSE file.

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,
      theme: ThemeData.dark(useMaterial3: true),
      home: Scaffold(
        body: Container(
          color: const Color(0xFF15202D),
          child: const SizedBox.expand(
            child: VariousDiscs(50),
          ),
        ),
      ),
    ),
  );
}

class VariousDiscs extends StatefulWidget {
  final int numberOfDiscs;

  const VariousDiscs(this.numberOfDiscs);

  @override
  State<VariousDiscs> createState() => _VariousDiscsState();
}

class _VariousDiscsState extends State<VariousDiscs> {
  final _discs = <DiscData>[];

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

  void _makeDiscs() {
    _discs.clear();
    for (int i = 0; i < widget.numberOfDiscs; i++) {
      _discs.add(DiscData());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        const Center(
          child: Text(
            'Click a disc!',
            style: TextStyle(color: Colors.white, fontSize: 50),
          ),
        ),
        GestureDetector(
          onTap: () => setState(() {
            _makeDiscs();
          }),
          child: Stack(children: [
            for (final disc in _discs)
              Positioned.fill(
                child: AnimatedAlign(
                  duration: const Duration(milliseconds: 500),
                  curve: Curves.easeInOut,
                  alignment: disc.alignment,
                  child: AnimatedContainer(
                    duration: const Duration(milliseconds: 500),
                    decoration: BoxDecoration(
                      color: disc.color,
                      shape: BoxShape.circle,
                    ),
                    height: disc.size,
                    width: disc.size,
                  ),
                ),
              ),
          ]),
        ),
      ],
    );
  }
}

Code Explanation πŸ“–

1. Import Statements πŸ“š

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

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.

3. Main Function 🏁

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

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.

5. _VariousDiscsState Class πŸ“Š

class _VariousDiscsState extends State<VariousDiscs> {
  final _discs = <DiscData>[];

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

  void _makeDiscs() {
    _discs.clear();
    for (int i = 0; i < widget.numberOfDiscs; i++) {
      _discs.add(DiscData());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        const Center(
          child: Text(
            'Click a disc!',
            style: TextStyle(color: Colors.white, fontSize: 50),
          ),
        ),
        GestureDetector(
          onTap: () => setState(() {
            _makeDiscs();
          }),
          child: Stack(children: [
            for (final disc in _discs)
              Positioned.fill(
                child: AnimatedAlign(
                  duration: const Duration(milliseconds: 500),
                  curve: Curves.easeInOut,
                  alignment: disc.alignment,
                  child: AnimatedContainer(
                    duration: const Duration(milliseconds: 500),
                    decoration: BoxDecoration(
                      color: disc.color,
                      shape: BoxShape.circle,
                    ),
                    height: disc.size,
                    width: disc.size,
                  ),
                ),
              ),
          ]),
        ),
      ],
    );
  }
}

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.


Assignments πŸ“

Last updated