4

I m confused about what is different between FractionalOffset and Alignment .. I see them doing the same .. check my example code to understand me :

Example 1: 

final fractionalOffset = Container(
      margin: EdgeInsets.symmetric(
        vertical: 16,
      ),
      alignment: FractionalOffset.bottomLeft,
      child: Image(
        image: AssetImage("example1"),
        height: 92,
        width: 92,
      ),
    );

Example 2: 

final alignment = Container(
      margin: EdgeInsets.symmetric(
        vertical: 16,
      ),
      alignment: Alignment.bottomLeft,
      child: Image(
        image: AssetImage("example2"),
        height: 92,
        width: 92,
      ),
    );
Adam Kif
  • 107
  • 2
  • 9

1 Answers1

6

Official docs explains very well:

FractionalOffset uses a coordinate system with an origin in the top-left corner of the rectangle whereas Alignment uses a coordinate system with an origin in the center of the rectangle.

Also:

Historically, FractionalOffset predates Alignment. When we attempted to make a version of FractionalOffset that adapted to the TextDirection, we ran into difficulty because placing the origin in the top-left corner introduced a left-to-right bias that was hard to remove.

In summary, FractionalOffset independent from TextDirection, where Alignment has some relations with.

Examples:

Alignment(-1.0, -1.0) represents the top left of the rectangle.

Alignment(1.0, 1.0) represents the bottom right of the rectangle.

FractionalOffset(1.0, 0.0) represents the top right of the Size.

FractionalOffset(0.0, 1.0) represents the bottom left of the Size.

Mehmet Esen
  • 6,156
  • 3
  • 25
  • 44
  • 7
    Esen Mehmet .. Yes, I know that the documents explain them well .. I checked the official documents before asking my question .. But sometimes I need someone to explain it to me differently for a deeper understanding .. so i hope you understand me now . thank you – Adam Kif Aug 27 '19 at 23:42