Flutter позволяет создавать не только стандартные UI-компоненты, но и рисовать на экране, используя мощный инструмент под названием CustomPainter. В этой статье мы рассмотрим, как создать кастомный виджет с использованием CustomPainter для рисования графических элементов.
1. Что такое CustomPainter?
CustomPainter — это класс, который позволяет рисовать на канвасе. С помощью этого класса можно создавать любые графические элементы, такие как линии, круги, фигуры, текст и многое другое. Вы можете использовать его для создания пользовательских визуальных эффектов и анимаций.
2. Основы использования CustomPainter
Чтобы использовать CustomPainter, необходимо создать свой собственный класс, который будет наследовать от CustomPainter, и реализовать метод paint(). Этот метод позволяет рисовать на экране.
Пример простого кастомного виджета для рисования круга:
В этом примере мы создаем CirclePainter, который рисует синий круг в центре виджета.
3. Использование CustomPainter в виджете
После того как мы создали кастомный рисующий класс, можно использовать его в виджете с помощью CustomPaint. Виджет CustomPaint принимает параметр painter, который указывает на наш кастомный рисующий класс.
Здесь мы создаем экран с кругом, который рисуется с помощью нашего кастомного рисователя CirclePainter. Мы также задаем размер канваса через CustomPaint.
4. Рисование с анимацией
Для добавления анимации в рисуемые элементы можно использовать AnimationController. Например, мы можем анимировать размер круга.
class AnimatedCircleWidget extends StatefulWidget {
@override
_AnimatedCircleWidgetState createState() => _AnimatedCircleWidgetState();
}
class _AnimatedCircleWidgetState extends State<AnimatedCircleWidget> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(seconds: 2),
vsync: this,
);
_animation = Tween<double>(begin: 0, end: 100).animate(
CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
)..addListener(() {
setState(() {});
});
_controller.repeat(reverse: true);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Анимация с CustomPainter'),
),
body: Center(
child: CustomPaint(
size: Size(300, 300),
painter: AnimatedCirclePainter(_animation.value),
),
),
);
}
}
class AnimatedCirclePainter extends CustomPainter {
final double radius;
AnimatedCirclePainter(this.radius);
@override
void paint(Canvas canvas, Size size) {
final Paint paint = Paint()
..color = Colors.red
..style = PaintingStyle.fill;
final Offset center = Offset(size.width / 2, size.height / 2);
canvas.drawCircle(center, radius, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true; // Перерисовывать каждый раз
}
}
Здесь мы добавляем анимацию изменения радиуса круга. Круг будет увеличиваться и уменьшаться плавно, повторяя цикл.
5. Заключение
Использование CustomPainter в Flutter — это мощный способ создавать уникальные графические элементы и анимации. С помощью этого инструмента вы можете реализовать любые визуальные эффекты, которые не входят в стандартный набор виджетов Flutter. Главное — помнить, что рисование на канвасе происходит в методе paint(), и вы можете управлять его логикой с помощью различных анимаций и данных.
Надеюсь, эта статья поможет вам в создании кастомных графических элементов и анимаций в вашем Flutter-приложении!