Flutter Animations: Part 1

In a prior post, we talked about the new cross-platform mobile development framework from Google called Flutter. It reviews how Flutter took a different approach from React Native and NativeScript in creating a mobile application.

Learning Resources

Free Resources:

• Flutter.io
• Tensor Programming YouTube Channel
• MTechViral YouTube Channel
• Andrea Bizzotto YouTube Channel

Paid Resources:

• “Flutter & Dart – The Complete Guide (IOS & Android Apps)” on Udemy
• “Flutter & Dart – The Complete Flutter App Development Course” on Udemy
• “Flutter – Intermediate” on Udemy
• “Flutter – Advanced” on Udemy

Implicit Animations

Implicit animation widgets derive from the abstract class ImplicitlyAnimatedWidget. These classes allow easy animation of basic options like size, opacity, text style, and position.

AnimatedContainer Example

The AnimatedContainer widget allows animating properties such as:

• Alignment
• Padding
• Color
• Decoration
• Width
• Height
• Constraints
• Margin
• Transform

Here’s a simple example demonstrating height and width animation:

class _MyHomePageState extends State<MyHomePage> {
  bool _large = false;

  void _changeSize() {
    setState(() {
      _large = !_large;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedContainer(
          duration: Duration(milliseconds: 500),
          width: _large ? double.infinity : 200,
          height: _large ? double.infinity : 200,
          color: Colors.blue,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _changeSize,
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

This example creates a blue container that expands to fill the screen when the floating action button is pressed, and contracts back to a 200x200 square when pressed again. The animation duration is set to 500 milliseconds, creating a smooth transition effect.