Hola Amigos! На связи Ярослав Цемко, Flutter dev Amiga. Создадим овальную кнопку с CustomPainter.
Используем drawOval для овальной формы и TextPainter для создания текста. Также можно задать стиль, выравнивание и направление текста.
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
paint.color = Colors.red;
paint.strokeWidth = 2.0;
canvas.drawOval(
Rect.fromCenter(
center: size.center(Offset.zero),
width: size.width,
height: size.height,
),
paint);
TextSpan textSpan = TextSpan(
text: text,
style: textStyle,
);
TextPainter textPainter = TextPainter(
text: textSpan,
textAlign: textAlign ?? TextAlign.center,
textDirection: textDirection ?? TextDirection.ltr,
);
textPainter.layout();
final xCenter = (size.width - textPainter.width) / 2;
final yCenter = (size.height - textPainter.height) / 2;
final textOffset = Offset(xCenter, yCenter);
textPainter.paint(canvas, textOffset);
}
Обернём CustomPaint в ClipRect, чтобы поместить в дереве:
ClipRect(
child: CustomPaint(
painter: ButtonPainter(text: 'Кнопка'),
),
),
И в SizedBox, чтобы задать размеры:
SizedBox(
height: 50,
width: 100,
child: ClipRect(
child: CustomPaint(
painter: ButtonPainter(text: 'Кнопка'),
),
),
),
GestureDetector делает кнопку активной:
@override
Widget build(BuildContext context) => GestureDetector(
onTap: onTap,
child: SizedBox(
height: 50,
width: 100,
child: ClipRect(
child: CustomPaint(
painter: ButtonPainter(text: 'Кнопка'),
),
),
),
);
}
Ссылка на репозиторий 🦋
Рассказывайте в чате о своем опыте использования данного инструмента!