how to create a styling in button in flutter? - flutter

Question

How make this styling for a button in flutter. Since I'm a newbie, I have no Idea on how to do it.
In image the triangle is somewhat irregular, I want that to be matched with the button box.

Answer 1

You can use the CustomPaint widget to get that effect. You can easily auto-generate the CustomPaint code from Flutter Shape Maker. Please see the code below. You can also run the code on DartPad at the following URL https://dartpad.dev/0171e4b838b740ea23f896f3b0be1f8e :
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: 360,
height: 100,
color: Colors.black,
child: CustomPaint(
size: Size(1200, 700),
painter: FlagPainter(),
child: Text(
"text",
style: TextStyle(color: Colors.black, fontSize:24),
),
),
),
),
);
}
}
class FlagPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Paint paint_0 = new Paint()
..color = Color.fromARGB(255, 255, 255, 255)
..style = PaintingStyle.fill
..strokeWidth = 1;
Path path_0 = Path();
path_0.moveTo(0, 0);
path_0.lineTo(0, size.height * 2.40);
path_0.lineTo(0, size.height * 0.72);
path_0.lineTo(size.width * 0.28, 0);
canvas.drawPath(path_0, paint_0);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}