Why animations enhance user experience in Flutter - Build It to Prove It

Build: Animation Demo Screen

This screen shows a simple animation to demonstrate how animations make apps feel smooth and engaging.

Target UI

-------------------------
| Animation Demo Screen  |
|-----------------------|
|                       |
|   [ Animate Box ]     |
|                       |
|                       |
-------------------------

Add a square box that changes size smoothly when the button is pressed.

Add a button labeled 'Animate Box' below the box.

When the button is tapped, the box should animate between small and large size.

Use Flutter's built-in animation widgets.

Keep the UI simple and centered.

Starter Code

Flutter

import 'package:flutter/material.dart';

class AnimationDemoScreen extends StatefulWidget {
  @override
  State<AnimationDemoScreen> createState() => _AnimationDemoScreenState();
}

class _AnimationDemoScreenState extends State<AnimationDemoScreen> {
  bool _isLarge = false;

  void _toggleSize() {
    setState(() {
      _isLarge = !_isLarge;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animation Demo Screen')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // TODO: Add animated box here
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _toggleSize,
              child: Text('Animate Box'),
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

class AnimationDemoScreen extends StatefulWidget {
  @override
  State<AnimationDemoScreen> createState() => _AnimationDemoScreenState();
}

class _AnimationDemoScreenState extends State<AnimationDemoScreen> {
  bool _isLarge = false;

  void _toggleSize() {
    setState(() {
      _isLarge = !_isLarge;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animation Demo Screen')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            AnimatedContainer(
              width: _isLarge ? 200 : 100,
              height: _isLarge ? 200 : 100,
              color: Colors.blue,
              duration: Duration(milliseconds: 500),
              curve: Curves.easeInOut,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _toggleSize,
              child: Text('Animate Box'),
            ),
          ],
        ),
      ),
    );
  }
}

This example uses AnimatedContainer to smoothly change the size of a blue box when the button is pressed. The animation lasts 500 milliseconds and uses an ease-in-out curve for a natural feel.

Animations like this help users see changes clearly and make the app feel alive and responsive. Instead of a sudden jump, the smooth transition guides the eye and improves the experience.

Final Result

Completed Screen

-------------------------
| Animation Demo Screen  |
|-----------------------|
|                       |
|       ████████        |
|       ████████        |
|       ████████        |
|       ████████        |
|                       |
|   [ Animate Box ]     |
|                       |
-------------------------

When the user taps 'Animate Box', the blue square smoothly grows from 100x100 to 200x200 pixels or shrinks back.

The animation takes half a second and feels smooth and natural.

Stretch Goal

Add a color change animation so the box changes color from blue to green when it grows.

💡 Hint

Use the color property of AnimatedContainer and change it based on _isLarge.