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 ?

CodePudding user response：

Yes it is possible. You can use ClipPath with CustomClipper to achieve "any" appearance.

https://api.flutter.dev/flutter/widgets/ClipPath-class.html

CodePudding user response：

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;
}