Example of basic transformations in Dart / Flutter

transformations.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const FoldingDemo(),
    );
  }
}

class FoldingDemo extends StatefulWidget {
  const FoldingDemo() : super(); // changed

  @override
  _FoldingDemoState createState() => _FoldingDemoState();
}

class _FoldingDemoState extends State<FoldingDemo> {
  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Container(
          color: Colors.purple,
          child: SizedBox(
              height: 1000,
              width: 1000,
              child: CustomPaint(painter: MyCustomPainer())))
    ]);
  }
}

class MyCustomPainer extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // matrix transformations - 2d
    canvas.scale(1.5, 1.5);

    var builder = ParagraphBuilder(ParagraphStyle(textAlign: TextAlign.center));
    builder.addText("side zero");
    var p = builder.build();
    p.layout(const ParagraphConstraints(width: 200));

    canvas.translate(200, 150);

    // first box
    canvas.drawRect(
        Rect.fromCenter(center: const Offset(0, 0), width: 200, height: 100),
        Paint()
          ..color = Colors.blueGrey
          ..style = PaintingStyle.fill);
    canvas.drawCircle(
        const Offset(0, 0),
        10,
        Paint()
          ..color = Colors.brown
          ..style = PaintingStyle.fill);
    canvas.drawParagraph(p, const Offset(-100, -50));

    canvas.rotate(-90 * 0.0174532925);
    canvas.translate(0, 100 + (100 / 2));

    // second box
    canvas.drawRect(
        Rect.fromCenter(center: const Offset(0, 0), width: 200, height: 100),
        Paint()
          ..color = Colors.blue
          ..style = PaintingStyle.fill);
    canvas.drawCircle(
        const Offset(0, 0),
        10,
        Paint()
          ..color = Colors.white
          ..style = PaintingStyle.fill);
    canvas.drawParagraph(p, const Offset(-100, -50));

    canvas.rotate(-270 * 0.0174532925);
    canvas.translate(0, 50 + (200 / 2));

    // third box
    canvas.drawRect(
        Rect.fromCenter(center: const Offset(0, 0), width: 100, height: 100),
        Paint()
          ..color = Colors.lightGreen
          ..style = PaintingStyle.fill);
    canvas.drawCircle(
        const Offset(0, 0),
        10,
        Paint()
          ..color = Colors.redAccent
          ..style = PaintingStyle.fill);
    canvas.drawParagraph(p, const Offset(-100, -50));
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}