Flutter Transform examples – Making fancy effects

Last updated on January 8, 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.

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.

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 child) {
          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.

Related Articles

guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x