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.
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
Asked: 2021-09-28 11:00:00 +0000
Seen: 8 times
Last updated: Jul 07 '22
In a new Flutter project on Android Studio, is it possible to not have any libs or main.dart file?
How can Google calendar events be generated on the server-side using Flutter?
How can I retrieve an SVG image from a URL in Flutter?
How can I combine streams of different types in Dartlang using rxdart?
What are the steps to disable FlutterFire configuration?
How can zooming similar to desktop be achieved in HTML webview browser using Flutter?
How to imitate Http Client calls during flutter testing?
What is the process of invoking a Cloud Function in Firebase through Flutter?