У меня есть код с полукругом, и он в порядке, но я хочу, чтобы он был перевернут, точно так же, как просто перевернуть кривую, чтобы она имела U-образную форму:
body: Column(
children: [
Expanded(
flex: 7,
child: ClipPath(
clipper: TopSemicircleClipper(),
child: Container(
color: const Color(0xFF09BAB5),
),
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.white,
),
),
],
),
);
class TopSemicircleClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.lineTo(0, 0);
path.lineTo(size.width, 0);
path.lineTo(size.width, size.height);
path.arcToPoint(
Offset(0, size.height),
radius: Radius.elliptical(size.width, size.height),
clockwise: false,
);
path.lineTo(0, 0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
что вот так:
но я хочу, чтобы полукруг был таким:
я имею в виду, я хочу перевернуть полукруг
Можете ли вы дать код, как это сделать, я пробовал, но не получил желаемого результата, спасибо @ClevinoAlrin





Нам не нужно все усложнять; просто примените borderRadius к контейнеру.
Scaffold(
body: Container(
height : 400,
width : 300,
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(270),
bottomRight: Radius.circular(200)),
color: Color(0xFF09BAB5)),
),
),
@behnam Вы можете использовать стек и поместить белый цвет на фон каркаса, а затем создать зеленый контейнер, аналогичный приведенному выше коду, для вашего решения.
Если вы установите
trueпо часовой стрелке, полукруг должен перевернуться. Вам придется поиграть со значениями x и y эллипса, чтобы получить этот эффект в качестве ссылки. Удачи!