Flutter Transform examples – Making fancy effects

Last updated on September 10, 2021 A Goodman Loading... Post a comment

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.

Example 1 – 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 full code

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

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

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

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

  double _x = 0;
  double _y = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Transform.translate(
          offset: Offset(_x, _y),
          child: Container(width: 200, height: 200, color: Colors.purple)),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _x = _random.nextDouble() * 400;
            _y = _random.nextDouble() * 500;
          });
        },
        child: Icon(Icons.refresh),
      ),
    );
  }
}

Example 2 – Animating the entire screen

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:

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(MyApp());
}

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  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) {
    return TweenAnimationBuilder(
        tween: Tween(begin: _begin, end: _target),
        duration: Duration(seconds: 2),
        builder: (BuildContext context, Matrix4 value, Widget? _) {
          return Transform(
            transform: value,
            child: Scaffold(
              appBar: AppBar(
                title: Text('Kindacode.com'),
              ),
              body: Center(
                child: Container(width: 200, height: 200, color: Colors.amber),
              ),
              floatingActionButton: FloatingActionButton(
                  onPressed: () {
                    setState(() {
                      if (_target == _begin) {
                        _target = _midway;
                      } else if (_target == _midway) {
                        _target = _final;
                      } else {
                        _target = _begin;
                      }
                    });
                  },
                  child: 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 runtimeScrolling to the desired item in a ListViewFlutter SliverListWorking with Table in FlutterFlutter Cupertino Button.

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

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles