Flutter - Flip Widget Using Transform.flip

This tutorial shows you how to flip a widget in Flutter. It works for any widget including image, icon, text, etc.

If you have a widget and you want to flip it, it can be done without any additional package. Flutter has a widget that can flip its child either horizontally, vertically, or both. Below are the examples.

Using Transform.flip

Flutter's Transform class has a named constructor flip which can be used to create a widget that mirrors its child.

  Transform.flip({
    Key? key,
    bool flipX = false,
    bool flipY = false,
    Offset? origin,
    bool transformHitTests = true,
    FilterQuality? filterQuality,
    Widget? child,
  })

It doesn't have any required argument. If you don't pass anything, nothing will be shown. In almost all cases, it's necessary to pass the child argument which contains the widget to be flipped.

Flip Horizontally

To flip horizontally, set the flipX argument to true. If not passed, it defaults to false.

  Transform.flip(
    flipX: true,
    child: const Text('Woolha.com', style: TextStyle(color: Colors.teal)),
  )

Output:

Flutter - Transform.flip - Horizontal

Flip Vertically

To flip vertically, set the flipY argument to true. If not passed, it defaults to false.

  Transform.flip(
    flipY: true,
    child: const Text('Woolha.com', style: TextStyle(color: Colors.teal)),
  )

Output:

Flutter - Transform.flip - Vertical

Flip Horizontally and Vertically

To flip both horizontally and vertically, set both flipX and flipY arguments to true.

  Transform.flip(
    flipX: true,
    flipY: true,
    child: const Text('Woolha.com', style: TextStyle(color: Colors.teal)),
  )

Output:

Flutter - Transform.flip - Vertical & Horizontal

Set Offset

It's also possible to set a coordinate where the transformation will be applied by passing an Offset value as the origin argument. The Offset object represents a 2D floating-point offset in x-axis and y-axis relative to the upper left corner of the render object.

  Transform.flip(
    flipX: true,
    flipY: true,
    origin: const Offset(30, 20),
    child: const Text('Woolha.com', style: TextStyle(color: Colors.teal)),
  )

Output:

Flutter - Transform.flip - Offset

Transform.flip Parameters

  • Key? key: The widget's key, used to control how a widget is replaced with another.
  • bool flipX: Whether to flip the child horizontally. Defaults to false.
  • bool flipY: Whether to flip the child vertically. Defaults to false.
  • Offset? origin: The origin coordinate (relative to the upper left corner) in which to apply the matrix.
  • bool transformHitTests: Whether to apply the transformation when performing hit tests. Defaults to true.
  • FilterQuality? filterQuality: The filter quality of the image.
  • Widget? child: The widget to be flipped.

Full Code

  import 'package:flutter/material.dart';
  
  void main() => runApp(const MyApp());
  
  class MyApp extends StatelessWidget {
  
    const MyApp({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Woolha.com Flutter Tutorial',
        theme: ThemeData.light().copyWith(
          badgeTheme: const BadgeThemeData(
              backgroundColor: Colors.teal,
          )
        ),
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Woolha.com Flutter Tutorial'),
            backgroundColor: Colors.teal,
          ),
          body: const Home(),
        ),
      );
    }
  }
  
  class Home extends StatelessWidget {
  
    const Home({super.key});
  
    @override
    Widget build(BuildContext context) {
      return Center(
        child: Transform.flip(
          flipX: true,
          flipY: true,
          origin: const Offset(30, 20),
          child: const Text('Woolha.com', style: TextStyle(color: Colors.teal)),
        ),
      );
    }
  }

Summary

The Transform.flip constructor can be used to apply flip transformation to a widget. It allows you to specify whether to flip in x-axis, y-axis, or both. It's also possible to set an offset in which the transformation is applied.

You can also read about: