Revision history [back]

Here's an example of creating a Triangle Badge in Flutter:

import 'package:flutter/material.dart';

class TriangleBadge extends StatefulWidget {
  final String text;
  final Color color;

  TriangleBadge({required this.text, required this.color});

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

class _TriangleBadgeState extends State<TriangleBadge> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10),
      decoration: BoxDecoration(
        color: widget.color,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10),
          bottomLeft: Radius.circular(10),
        ),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          _buildTriangle(),
          Text(
            widget.text,
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTriangle() {
    return Container(
      width: 0,
      height: 0,
      decoration: BoxDecoration(
        border: Border(
          top: BorderSide(
            width: 12,
            color: Colors.transparent,
          ),
          bottom: BorderSide(
            width: 12,
            color: Colors.transparent,
          ),
          left: BorderSide(
            width: 12,
            color: widget.color,
          ),
        ),
      ),
    );
  }
}

To use this widget, you can simply create a new TriangleBadge object and pass in the required text and color:

TriangleBadge(
  text: "New!",
  color: Colors.red,
)

This will create a red triangle badge with the text "New!". You can further customize the appearance of the badge by adjusting the padding, font size, and border radius values in the Container widget.