How to invert a radius in Flutter - flutter

Question

I am trying to have a Radius border in the text widget and I don't know how to "invert" the borderRadius so that it's not white:
I would like that the blue section and the green section stay together with the corners with radius.
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

You can pass the BorderRadius as an argument:
The example class:
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,
),
);
}
}
Utilization:
#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',
),
],
),
);
}