Flutter Transform examples – Making fancy effects

Learning by example is one of the most effective learning methods, especially in web and mobile development. In this article, we will walk through a few complete examples of using Transform, a widget that can transform its child in Flutter applications.

Basic (no animation)

This example contains a purple box and a floating button. When the user presses the button, the box will jump to a random location on the screen. For simplicity’s sake, we will not implement animation in this example, but you can see it in the second one.

App Preview

The code

The full source code with explanations:

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  // random seed
  final _random = Random();

  // the coordinates of the box
  double _x = 0;
  double _y = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Kindacode.com'),
      ),
      // implement Transform stuff
      body: Transform.translate(
          offset: Offset(_x, _y),
          child: Container(width: 200, height: 200, color: Colors.purple)),
      // this button is used to move the box
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _x = _random.nextDouble() * 400;
            _y = _random.nextDouble() * 500;
          });
        },
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

Animating the Entire App (Advanced)

This example transforms the entire app. We’ll use the Matrix4.compose constructor for the transform parameter of the Transform widget::

Matrix4.compose(
  Vector3 translation, 
  Quaternion rotation, 
  Vector3 scale
)

We’ll also use TweenAnimationBuilder to create animation effects.

App Preview

The full code

Full source code with explanations:

// kindacode.com
// main.dart
import 'package:flutter/material.dart';

// Import this to use the Vector3 and Quaternion classes
// This module comes with Flutter so you don't need to install any thing
import 'package:vector_math/vector_math_64.dart' as vector;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

// it's important to add "width TickerProviderStateMixin"
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  // Matrixes
  final Matrix4 _begin = Matrix4.compose(vector.Vector3(0, 0, 1),
      vector.Quaternion.euler(0, 0, 0), vector.Vector3(1, 1, 1));

  final Matrix4 _midway = Matrix4.compose(vector.Vector3(0, 0, 1),
      vector.Quaternion.euler(1, -0.2, 0), vector.Vector3(.8, .8, .8));

  final Matrix4 _final = Matrix4.compose(vector.Vector3(0, 0, 1),
      vector.Quaternion.euler(-1, 0, 0), vector.Vector3(1, 1, 1));

  Matrix4 _target = Matrix4.compose(vector.Vector3(0, 0, 1),
      vector.Quaternion.euler(1, -0.2, 0), vector.Vector3(0.8, 0.8, 0.8));

  @override
  Widget build(BuildContext context) {
    // implement TweenAnimationBuilder widget
    return TweenAnimationBuilder(
        tween: Tween(begin: _begin, end: _target),
        duration: const Duration(seconds: 2),
        builder: (BuildContext context, Matrix4 value, Widget? _) {
          // implement Transform widget
          return Transform(
            transform: value,
            child: Scaffold(
              appBar: AppBar(
                title: const Text('Kindacode.com'),
              ),
              // body of the app
              body: Center(
                child: Container(width: 200, height: 200, color: Colors.amber),
              ),
              // this button is used to transform the app
              floatingActionButton: FloatingActionButton(
                  onPressed: () {
                    setState(() {
                      if (_target == _begin) {
                        _target = _midway;
                      } else if (_target == _midway) {
                        _target = _final;
                      } else {
                        _target = _begin;
                      }
                    });
                  },
                  child: const Icon(Icons.rotate_left)),
            ),
          );
        });
  }
}

Conclusion

Through the above examples, you should have a better understanding and feel more confident in using Transform to create cool effects in your applications. If you would like to learn more about Flutter, take a look at the following articles:

• Finding X and Y coordinates of a widget at runtime
• Scrolling to the desired item in a ListView
• Working with Table in Flutter
• Flutter AnimatedList – Tutorial and Examples
• Flutter: How to Make Spinning Animation without Plugins
• 2 Ways to Create Flipping Card Animation in Flutter

You can also check out our Flutter topic page or Dart topic page for the latest tutorials and examples.