Flutter - Quarter round Button

Question

For my Flutter App I want that four buttons together are a circle. Here an Image of what i kinda want.

I don't know how to style the corners of a button in flutter. In case of button 1 my idea would be to take the upper left corner and set the border radius and leave the other corners normal. With the other buttons I would do the same with the appropriated corners. To arrange my "pizza slices" i would use Colums and Rows. I just don't know and couldn't figure out how to style only one corner.

Thanks for everyone in advance for helping.

Answer 1

Thank you to everyone here! I got an solution based of this Question: [https://stackoverflow.com/questions/53138955/how-can-i-make-a-buttons-corner-only-rounded-on-the-top]

And based of the answer of @fusion

My solution looks like this:

import 'package:flutter/material.dart';

enum QuarterPosition { topLeft, topRight, bottomLeft, bottomRight }

class QuarterButton extends StatelessWidget {
  const QuarterButton({Key? key, required this.position, this.size = 100, this.text = ""}) : super(key: key);

  final QuarterPosition position;
  final double size;
  final String text;

  BorderRadiusGeometry _generateBorderRadius() {
    switch (position) {
      case QuarterPosition.topLeft:
        return BorderRadius.only(
          topLeft: Radius.circular(size),
        );
      case QuarterPosition.topRight:
        return BorderRadius.only(
          topRight: Radius.circular(size),
        );
      case QuarterPosition.bottomLeft:
        return BorderRadius.only(
          bottomLeft: Radius.circular(size),
        );
      case QuarterPosition.bottomRight:
        return BorderRadius.only(
          bottomRight: Radius.circular(size),
        );
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        onPressed: () {},
        child: Text(text, style: TextStyle(fontSize: 30, color: Colors.white)),
        style: ElevatedButton.styleFrom(
          primary: Colors.black54,
          fixedSize: Size(size, size),
          shape: RoundedRectangleBorder(
              borderRadius: _generateBorderRadius(),
              ),
              side: BorderSide(color: Colors.white)),
        );
  }
}

And I can use it now like that.

Column(
      children: [
        Row(
          children: [
            QuarterButton(position: QuarterPosition.topLeft, size: 100, text: "1"),
            QuarterButton(position: QuarterPosition.topRight, size: 100, text: "2"),
          ],
        ),
        Row(
          children: [
            QuarterButton(position: QuarterPosition.bottomLeft, size: 100, text: "3"),
            QuarterButton(position: QuarterPosition.bottomRight, size: 100, text: "4"),
          ],
        ),
      ],
    );

Thanks for all the quick answers. Great community! :)