如何在矩形中创建三角形 flutter

Question

I want to create a triangle at the edge of a rectangle and to be able to write in them using Flutter platform enter image description here

Answer 1

You can use customPainter to do that this is the way:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: CustomPaint(
          painter: _Figure(),
        ),
      ),
    );
  }
}

class _Figure extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = new Paint();
    paint.color = Colors.blue;
    paint.style = PaintingStyle.stroke;
    paint.strokeWidth = 5;

    final path = new Path();

    // Drawing triangle
    path.moveTo(10, size.height * 0.3);
    path.lineTo(size.width * 0.5, 50);
    path.lineTo(10, 50);
    path.lineTo(10, size.height * 0.3);

    // Drawing figure
    path.moveTo(10, size.width * 0.70);
    path.lineTo(size.width * 0.55, 50);
    path.lineTo(size.width - 10, 50);
    path.lineTo(size.width - 10, size.height * 0.5);
    path.lineTo(10, size.height * 0.5);
    path.lineTo(10, size.width * 0.70);

    canvas.drawPath(path, paint);
  }

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