rotated_resizable_widget example

rotated_resizable_widget.dart

// ignore_for_file: public_member_api_docs, sort_constructors_first
import 'package:flutter/material.dart';

const duration = Duration(milliseconds: 50);

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({
    Key? key,
  }) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Offset> offsets = [];
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
        body: Stack(
      fit: StackFit.passthrough,
      clipBehavior: Clip.none,
      alignment: Alignment.center,
      children: [
        ResizeableWidget(),
      ],
    ));
  }
}

class ResizeableWidget extends StatefulWidget {
  const ResizeableWidget({
    Key? key,
  }) : super(key: key);

  @override
  State<ResizeableWidget> createState() => _ResizeableWidgetState();
}

class _ResizeableWidgetState extends State<ResizeableWidget> {
  Rect rect = const Rect.fromLTWH(100, 200, 200, 100);

  double rotation = 0;
  @override
  Widget build(BuildContext context) {
    const kSideBorder = BorderSide(width: 3, color: Colors.blue);
    return Stack(
      children: [
        Positioned.fromRect(
          rect: rect,
          child: GestureDetector(
            onPanUpdate: (DragUpdateDetails details) {
              setState(() {
                rect = Rect.fromLTWH(
                  rect.left + details.delta.dx,
                  rect.top + details.delta.dy,
                  rect.width,
                  rect.height,
                );
              });
            },
            child: Transform.rotate(
              angle: rotation,
              child: Container(
                color: Colors.blue.shade200.withOpacity(0.2),
              ),
            ),
          ),
        ),
        Positioned.fromRect(
            rect: rect,
            child: Transform.rotate(
              angle: rotation,
              child: Stack(
                children: [
                  Positioned(
                    bottom: 0,
                    left: 0,
                    child: GestureDetector(
                      onPanUpdate: (DragUpdateDetails details) {
                        setState(() {
                          rect = Rect.fromPoints(
                              rect.topRight, details.globalPosition);
                        });
                      },
                      child: Container(
                        width: 10,
                        height: 10,
                        decoration: const BoxDecoration(
                          border: Border(
                            left: kSideBorder,
                            bottom: kSideBorder,
                          ),
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                    top: 0,
                    left: 0,
                    child: GestureDetector(
                      onPanUpdate: (DragUpdateDetails details) {
                        setState(() {
                          rect = Rect.fromPoints(
                              rect.bottomRight, details.globalPosition);
                        });
                      },
                      child: Container(
                        width: 10,
                        height: 10,
                        decoration: const BoxDecoration(
                          border: Border(
                            left: kSideBorder,
                            top: kSideBorder,
                          ),
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                    bottom: 0,
                    right: 0,
                    child: GestureDetector(
                      onPanUpdate: (DragUpdateDetails details) {
                        setState(() {
                          rect = Rect.fromPoints(
                              rect.topLeft, details.globalPosition);
                        });
                      },
                      child: Container(
                        width: 10,
                        height: 10,
                        decoration: const BoxDecoration(
                          border: Border(
                            right: kSideBorder,
                            bottom: kSideBorder,
                          ),
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                    top: 0,
                    right: 0,
                    child: GestureDetector(
                      onPanUpdate: (DragUpdateDetails details) {
                        setState(() {
                          rect = Rect.fromPoints(
                              rect.bottomLeft, details.globalPosition);
                        });
                      },
                      child: Container(
                        width: 10,
                        height: 10,
                        decoration: const BoxDecoration(
                          border: Border(
                            right: kSideBorder,
                            top: kSideBorder,
                          ),
                        ),
                      ),
                    ),
                  ),

                  // use this to rotate the widget
                  Positioned(
                    bottom: 10,
                    right: 10,
                    child: MouseRegion(
                      cursor: SystemMouseCursors.grab,
                      child: GestureDetector(
                        onPanUpdate: (v) {
                          // do calculation here to rotate the widget
                          setState(() {
                            rotation -= v.delta.dx * 0.01;
                          });
                        },
                        child: Container(
                          width: 20,
                          height: 20,
                          constraints: const BoxConstraints(
                            maxHeight: 20,
                            maxWidth: 20,
                          ),
                          padding: const EdgeInsets.all(4),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            shape: BoxShape.circle,
                            boxShadow: kElevationToShadow[1],
                          ),
                          child: const Icon(
                            Icons.rotate_left,
                            size: 12,
                            color: Colors.black,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ))
      ],
    );
  }
}