Как инвертировать радиус во Flutter

Question

Я пытаюсь создать рамку Radius в текстовом виджете, и я не знаю, как «инвертировать» borderRadius, чтобы он не был белым:

img

Я бы хотел, чтобы синяя и зеленая части оставались вместе с углами с радиусом.

Container( 
  padding: const EdgeInsets.fromLTRB(_hPad, 10.0, _hPad, _hPad), 
  child: Text(_body), 
  width: appWidth / 2, 
  height: middleSectionHeight, 
  decoration: BoxDecoration( 
    borderRadius: BorderRadius.only( 
      bottomRight: Radius.circular(70.0), 
      topLeft: Radius.circular(70.0), 
    ), 
    color: Color(0xff99AAAB), 
  ), 
),

Answer 1

Вы можете передать BorderRadius в качестве аргумента:

Пример класса:

class ExampleContainer extends StatelessWidget {

  final String text;
  final BorderRadius borderRadius;
  final Color color;

  static const double _hPad = 10.0;

  const ExampleContainer(
      {@required this.text, @required this.borderRadius, @required this.color,});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.fromLTRB(_hPad, 10.0, _hPad, _hPad),
      child: Text(text),
      width: appWidth / 2,    //change to the width you want
      height: middleSectionHeight,    //change to the height you want
      decoration: BoxDecoration(
        borderRadius: borderRadius,    //passing here the borderRadius
        color: color,
      ),
    );
  }
}

Использование:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ExampleContainer(
          borderRadius: BorderRadius.vertical(top: Radius.circular(70.0)),
          color: Colors.blueGrey,
          text: 'title',
        ),
        ExampleContainer(
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(70.0)),
          color: Color(0xff99AAAB),
          text: 'something2',
        ),
      ],
    ),
  );
}