Flutter - How to draw triangle with rounded corner

Drown
August 4, 2023
137 views
3 votes
3 Answers

I need to create a triangle with rounded corners like this. How can I implement this?

I’ve tried searching for related answers, but only found implementations without rounded corners.

Is there any way to implement a similar triangle without using static images?

Answers

You can draw on a canvas and use different strokeJoin values. See https://api.flutter.dev/flutter/dart-ui/Paint/strokeJoin.html

Here’s an example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Triangle',
      home: Scaffold(
        body: Center(
          child: SizedBox(
            height: 200,
            width: 200,
            child: CustomPaint(
              painter: TrianglePainter(),
            ),
          ),
        ),
      ),
    );
  }
}

class TrianglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.red
      ..strokeWidth = 10
      ..style = PaintingStyle.stroke
      ..strokeJoin = StrokeJoin.round;


    var path = Path();
    path.moveTo(10, 10);
    path.lineTo(50, 50);
    path.lineTo(10, 50);
    path.lineTo(10, 10);
    path.lineTo(50, 50);
    canvas.drawPath(path, paint);
  }

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

This can be done using custompainter. Following is the code for this :

    class RoundedTrianglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final double width = size.width;
    final double height = size.height;
    final paint = Paint()
      ..color = Colors.blueGrey
      ..style = PaintingStyle.fill;
    final path = Path()
      ..moveTo((width / 2)-16, 80)
      ..arcToPoint(
        Offset((width / 2) +16, 80),
        radius: Radius.circular(22),
        clockwise: true,
      )
      ..lineTo(width, height)
      ..lineTo(0, height)
      ..close();
    canvas.drawPath(path, paint);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

Usage

Container(
        width: 200,
        height: 200,
        child: CustomPaint(painter: RoundedTrianglePainter(),),
      )

Output
Triangle with rounded corner

The code is more adaptive and gives the right rotation like the image,

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Triangle',
      home: Scaffold(
        backgroundColor: Colors.grey,
        body: Center(
          child: CustomPaint(
            painter: TrianglePainter(Colors.blue),
            size: Size(200, 200),
          ),
        ),
      ),
    );
  }
}

class TrianglePainter extends CustomPainter {
  final Color color;

  TrianglePainter(this.color);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.fill;
    final path = Path()
      ..moveTo((size.width / 2) - 16, 120)
      ..arcToPoint(
        Offset((size.width / 2) + 16, 120),
        radius: const Radius.circular(21),
      )
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..close();
    canvas.drawPath(path, paint);
  }

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

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – How to draw triangle with rounded corner

Answers