Ask Your Question
0

How can a Triangle Badge be created in Flutter?

asked 2021-09-28 11:00:00 +0000

woof gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
2

answered 2022-07-07 08:00:00 +0000

pufferfish gravatar image

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.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2021-09-28 11:00:00 +0000

Seen: 8 times

Last updated: Jul 07 '22