0

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.

Here you can see what I'm trying to archieve

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>[
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}
deadfish
  • 11,996
  • 12
  • 87
  • 136
Gabriele Cinà
  • 340
  • 1
  • 4
  • 14

1 Answers1

1

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),
  ]
)
Gabriele Cinà
  • 340
  • 1
  • 4
  • 14
fayeed
  • 2,375
  • 16
  • 22