Виджет ClipOval

Виджет ClipOval оставляет только ту часть дочернего виджета, которая попадает в овал. Если дочерний виджет квадратный, овал становится кругом.

Синтаксис

ClipOval(
	child: child,
)

Параметры

Параметр	Описание
`child`	Дочерний виджет, который обрезают по овалу.

Пример

Давайте обрежем синий квадрат до круга:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: ClipOval(
						child: ColoredBox(
							color: Color(0xFF1565C0),
							child: SizedBox(
								width: 80,
								height: 80,
								child: Center(
									child: Text('abcde', style: TextStyle(color: Color(0xFFFFFFFF), fontSize: 12)),
								),
							),
						),
				),
			),
		),
	));
}

На экране синий круг. Углы квадрата срезаны, строка 'abcde' в центре.

Пример

Давайте сделаем горизонтальный овал:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: ClipOval(
						child: ColoredBox(
							color: Color(0xFF2E7D32),
							child: SizedBox(width: 140, height: 70),
						),
				),
			),
		),
	));
}

На экране зелёный овал, вытянутый по горизонтали.

Смотрите также

виджет ClipRRect,
обрезать по скруглению
виджет ClipRect,
обрезать по прямоугольнику
виджет ClipPath,
обрезать по своему контуру
класс CustomClipper,
контур для ClipPath