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

Question

我想在矩形的邊緣創建一個三角形，並能夠使用 Flutter 平台在此處輸入圖像描述

Answer 1

您可以使用 customPainter 來做到這一點：

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;
  }
}