what is FractionalTranslation in flutter?

Question

I am learning flutter for some time. But I do not seem to understand fully what is FractionalTranslation class despite docs and some examples.

Documentation says: FractionalTranslation class applies a translation transformation before painting its child.

But what does it mean? Could you explain it to me in more detail?

Solution

FractionalTranslation class is essentially a type of Transform, and it is also used to do The difference of translation transformation is that its translation unit is a multiple of the width and height of the control. It is defined as follows

FractionalTranslation({
Key key, 
@required Offset translation, 
bool transformHitTests: true, 
Widget child })

It can be seen that its definition is the Transform.translatesame. The difference is translation the understanding of parameters. Let’s use a few examples to explain the use of FractionalTranslation

FractionalTranslation use The translation distance of the Text control to the right is 0.5 times the width of the Text control

Container(
        color: Colors.amberAccent,
        alignment: Alignment.center,
        child: FractionalTranslation(
        translation: Offset(0.5, 0),
        child: Text("Hello world")),
      ),

The distance to translate the Text control to the right is 2 times the width of the Text control

Container(
        color: Colors.amberAccent,
        alignment: Alignment.center,
        child: FractionalTranslation(
        translation: Offset(2, 0),
        child: Text("Hello world")),
      ),

Move the Text control to the right and down. The right translation distance is 1 times the Text width, and the downward translation distance is 1.5 times the Text height.

Container(
        color: Colors.amberAccent,
        alignment: Alignment.center,
        child: FractionalTranslation(
        translation: Offset(1, 1.5),
        child: Text("Hello world")),
      ),

Complete example

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

class TransformDemo extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.blue),
      home: HomeWidget(),
    );
  }
}

class HomeWidget extends StatefulWidget {

  @override
  State createState() {
    return HomeState();
  }
}

class HomeState extends State<HomeWidget> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("TransformDemo"),),
      body: Container(
        color: Colors.amberAccent,
        alignment: Alignment.center,
        child: FractionalTranslation(
            translation: Offset(1, 0),
        child: Text("Hello world")),
      ),
    );
  }
}