Flutter diagonal buttons - flutter

Question

I wanted to create diagonal buttons in a Row() similar to this as shown in this image. First and last buttons has vertical ends at the end, other edges will be diagonal.
These buttons can contain "text" or "icon". It would be ideal if we can make the Elevated button to this style, so that we can use other options in the elevated buttons as well.
https://ibb.co/M7sV6zW
is this possible with Flutter ?

Answer 1

Yes it is possible. You can use ClipPath with CustomClipper to achieve "any" appearance.
https://api.flutter.dev/flutter/widgets/ClipPath-class.html

Answer 2

void main() {
runApp(const CounterApp());
}
class CounterApp extends StatelessWidget {
const CounterApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const DiagnalButtonListView(),
);
}
}
class DiagnalButtonListView extends StatelessWidget {
const DiagnalButtonListView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("diagnal buttons"),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView.builder(
itemCount: 5,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) => Button(
title: "$index.Button",
),
),
),
);
}
}
class Button extends StatefulWidget {
final String title;
const Button({super.key, required this.title});
#override
State<Button> createState() => _ButtonState();
}
class _ButtonState extends State<Button> {
#override
Widget build(BuildContext context) {
return Container(
height: 72,
width: 72,
child: Stack(children: [
Container(color: Colors.white),
ClipPath(
child: Container(
width: 72,
color: Colors.yellow,
child: Center(child: Text(widget.title)),
height: 32,
),
clipper: CustomClipPath(),
)
]));
}
}
class CustomClipPath extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = Path();
path.lineTo(0, 60);
path.lineTo(60, 60);
path.lineTo(72, 0);
path.lineTo(12, 0);
path.lineTo(0, 60);
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}