Layout button in flutter

Question

I’m trying to build a video player. However I’m not getting to leave the button the way I’d like.

It’s like I need to "extend" the size of the button so that the intersection point of borderRadius reaches the desired location.

1º Picture first frame is how the button is getting using Radius.Elliptical

1º Second frame image is how I’d like it to look

2º Image is an illustration of the total circumference of the object pro point of intersection within aspectRatio

3rd Image is what happens if I only use a circular Radius.

Below the code:

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() => runApp(
    MaterialApp(
      home: PlayerLayout(),
    )
);

class PlayerLayout extends StatefulWidget {
  @override
  _PlayerLayoutState createState() => _PlayerLayoutState();
}

class _PlayerLayoutState extends State<PlayerLayout> {

  BorderRadius borderStyle;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    borderStyle = BorderRadius.only(
      topLeft: Radius.elliptical(60, 120),
      bottomLeft:  Radius.elliptical(60, 120),
    );

  }

  Widget forwardBackward(angle){

    return Transform.rotate(
      angle: angle,
      child: Container(
        child: Material(
          shape: RoundedRectangleBorder(
              borderRadius: borderStyle
          ),
          child: new InkWell(
              borderRadius: borderStyle,
              onTap: (){print("tapped");},

              child: Stack(
                children: <Widget>[
                  Positioned.fill(
                    left: -32,
                    child: Icon(
                      Icons.play_arrow,
                      size: 38,
                    ),
                  ),
                  Positioned.fill(
                    left: 0,
                    child: Icon(
                      Icons.play_arrow,
                      size: 38,
                    ),
                  ),
                  Positioned.fill(
                    left: 32,
                    child:Icon(
                      Icons.play_arrow,
                      size: 38,
                    ),
                  )
                ],
              )
          ),
          color: Colors.transparent,
        ),
        decoration: BoxDecoration(
            color: Colors.green,
            borderRadius: borderStyle
        ),
        height: double.infinity,
      ),
    );

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top: true,
        child: Column(
          children: <Widget>[
            AspectRatio(
              aspectRatio: 16/9,
              child: Container(
                color: Colors.black,
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: forwardBackward(180 * math.pi / 180),
                    ),
                    Expanded(
                      child: forwardBackward(360 * math.pi / 180),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

}

Does anyone know how I can make it equal in the second picture?

Answer 1

I do not believe that it is very right to make a "circle" for this.

I did it differently (I didn’t review it, so I might have a way to improve it) and I don’t know if it’s what you want, because your question is a bit messy:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.greenAccent,
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Container(
          padding: EdgeInsets.all(5),
          height: 150,
          width: 150,
          decoration: new BoxDecoration(
            color: Colors.pinkAccent,
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(90),
              bottomRight: Radius.circular(90),
            ),
          ),
          child: Container(
            alignment: Alignment.center,
            child: Stack(
              children: <Widget>[
                Icon(Icons.fast_forward, size: 70),
              ],
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.all(5),
          height: 150,
          width: 150,
          decoration: new BoxDecoration(
            color: Colors.pinkAccent,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(90),
              bottomLeft: Radius.circular(90),
            ),
          ),
          child: Container(
            alignment: Alignment.center,
            child: Stack(
              children: <Widget>[
                Icon(Icons.fast_rewind, size: 70),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

Upshot

PS: tested on dartpad.dev/flutter