I want to re-create this UI but I don't know how to shape this buttons (Flutter)

Issue

I’m trying to recreate the iOS’s stopwatch UI with Flutter and I need to create these two buttons but I have no clue how to shape them.

I’ve already tried with the standard CupertinoButton but there’s no option related to circular buttons.

This is the class, I think that I should put these 2 buttons inside a row.

class _StopWatchState extends State<StopWatch> {


@override
  Widget build(BuildContext context) {
    return CupertinoTabView(
      builder: (context) {
        return CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(
            middle: Text('Stopwatch'),
          ),
          child: Column(
            children: <Widget>[
              Expanded(
                child: Center(
                  child: Text('00:00,000'),
                ),
              ),
              Expanded(
                child: Row(
                  children: <Widget>[
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

Solution

You create a function for creating a custom button like so:

Widget createButton({Function onTap, Color buttonColor, Color borderColor}) {
  return GestureDetector(
      onTap: onTapAction,
      child: Container(
          height: 200,
          width: 200,
          child: Stack(
            alignment: Alignment.center,
            children: [
              Container(
                height: 100,
                width: 100,
                decoration: BoxDecoration(
                  color: buttonColor,
                  borderRadius: BorderRadius.circular(50.0),
                ),
              ),
              Container(
                child: Center(
                  child: actionTitle,
                ),
                height: 90,
                width: 90,
                decoration: BoxDecoration(
                  color: buttonColor,
                  borderRadius: BorderRadius.circular(45),
                  border: Border.all(width: 2.0, color: Colors.black),
                ),
              ),
            ],
          ),
        ),
    );

After this you add them inside your row widget:

Row(
  children: <Widget>[
    createButton(onTap: () {}, buttonColor: Colors.grey, borderColor: Colors.black),
    createButton(onTap: () {}, buttonColor: Colors.green, borderColor: Colors.black),
  ]
)

Answered By – fayeed

Answer Checked By – Terry (FlutterFixes Volunteer)