맞춤형 Paint Flutter 앱 위젯 빌드하는 방법

맞춤형 Paint Flutter 앱 위젯 빌드하는 방법

 

멋진 애니메이션으로 고도로 맞춤화된 사용자 인터페이스를 만들고 싶습니까? 두려워하지 마세요. Flutter CustomPaint 위젯이 여러분을 다룹니다.

이 기사에서는 명시적 애니메이션과 작업 방법을 모두 다룰 것입니다. CustomPaint 설레는 위젯.

내 GitHub 리포지토리에서 코드 샘플을 확인할 수 있습니다.

사용자 정의 페인트: 페인트 단계에서 그릴 캔버스를 제공하는 위젯입니다.

간단히 추가 CustomPaint 위젯 트리에 위젯을 제공하고 painter 의 하위 클래스인 CustomPainter 추상 클래스.

부터 CustomPainter 추상 클래스이므로 두 가지 중요한 메서드를 구현해야 합니다. paint() 그리고 shouldRepaint(). 그만큼 size 그려진 위젯의 크기를 지정합니다. 손을 더럽히자:

그만큼 paint() 메소드는 두 가지 중요한 매개변수를 제공합니다.

1. Canvas: Canvas는 위젯을 그리는 화면의 영역입니다. 커스텀 위젯을 그리는 다양한 방법이 있습니다. 그 중 일부는 다음과 같습니다. canvas.drawLine(), canvas.drawCircle(), canvas.drawArc(), canvas.drawOval() 등.
2. Size: 그림은 얼마나 커야 합니다. 기본적으로 래퍼 위젯, 즉 위젯을 래핑하는 위젯의 크기를 사용합니다. CustomPaint 위젯. 또한 내부에 크기 매개변수를 제공할 수 있습니다. CustomPaint 위젯. 우리는 원을 그리길 원하기 때문에 너비와 높이 모두에 대해 동일한 값을 전달했습니다.

그만큼 shouldRepaint() 메서드가 호출될 때마다 CustomPainter 재건해야 합니다. 이것은 우리가 프로젝트를 구현할 때 분명해질 것입니다.

이제 우리는 이해합니다 CustomPainter 수업, 캔버스에 무언가를 그려 봅시다. 우리의 목표는 약간의 획 너비로 원을 그리는 것입니다.

이 작업을 수행하는 방법을 살펴보겠습니다.

우리는 원을 그리고 싶기 때문에 미리 만들어진 canvas.drawCircle() the 세 개의 매개변수, 즉 원의 중심, 원의 반지름 및 페인트 개체를 예상하는 메서드입니다. 우리는 원의 중심과 반지름을 계산했습니다. size 그만큼 매개변수. 그만큼 Paint() 클래스는 색상과 같은 다양한 속성을 제공합니다. paint, storkeWidth, style 페인트의 즉, 스트로크 또는 채워야 하는지 여부. 현재 구현 결과는 다음과 같습니다.

다음 목표는 스트로크 주위에 애니메이션을 적용할 동일한 원 위에 호를 그리는 것입니다. 이를 달성하기 위해:

우리는 호를 그리고 싶기 때문에 우리는 canvas.drawArc() 5개의 매개변수를 기대하는 메소드, 즉 Rect object , startAngle 라디안으로, sweepAngle ~에 radian, useCenter 부울 및 페인트 개체입니다.

또한 원 주위에 호를 그리려고 하므로 다음을 사용했습니다. Rect.fromCircle() 메소드를 첫 번째 매개변수로 사용합니다. 두 번째 매개변수는 원의 상단에서 각도를 시작하기 위해 -pi/2에 적용한 시작 각도입니다.

스윕 각도는 호가 끝나는 위치를 지정하고 총 각도의 40%를 적용했습니다. 즉, 호는 -pi/2에서 총 360라디안의 40%까지 그릴 것입니다.

만약에 useCenter 부울이 true이면 호가 중앙으로 다시 닫혀서 원 섹터를 형성합니다. 그렇지 않으면 호가 닫히지 않아 원 세그먼트가 형성됩니다. 그리고 마지막 인수는 우리가 이미 잘 알고 있는 페인트 개체입니다.

현재 구현 useCenter true로 설정하면 다음과 같이 됩니다.

그러나 우리는 그 원 섹터를 원하지 않으므로 false로 설정하면 다음과 같이 됩니다.

당신은 조정할 수 있습니다 startAngle, endAngle 다양한 효과를 볼 수 있습니다.

이제 우리는 우리가 달성하고자 하는 것에 거의 근접했습니다. 남은 유일한 부분은 진행 상황을 애니메이션으로 만드는 것입니다. 이렇게 하려면 명시적 애니메이션을 사용해야 합니다. 즉, AnimationController 값을 아래로 전달 RingPainter 수업:

지금 우리가 한 다양한 일들은 다음과 같습니다:

1. 우리의 변환 RingPainter StatelessWidget 애니메이션 값이 변경될 때마다 UI를 다시 빌드하기 위해 Stateful 위젯으로 변경합니다.
2. 만들어진 AnimationController _컨트롤러를 혼합하여 _RingPainterState 와 수업 SingleTickerProviderStateMixin 그리고 그것을 내에서 초기화했다. initState() 방법.
3. 로 애니메이션을 시작했습니다. _controller.forward()
4. 컨트롤러에 리스너를 추가하고 setState((){}) 의 값이 나올 때마다 전체 UI가 다시 빌드되도록 _controller 변경.
5. 이제 우리의 MyPainter 클래스에는 세 가지 필수 인수가 필요합니다. progress, defaultColor 원 획 및 채우기 색상. 이 클래스 외부에서 다양한 값을 전달하고 이 구성 요소를 재사용할 수 있도록 하기 위해 수행됩니다. 참고 shouldRepaint() 메소드가 업데이트되어 Circle 진행 값이 이전 값과 다를 때만 그려야 합니다.
6. 마지막으로 이 세 가지 인수를 MyPainter 진행 값이 애니메이션의 현재 값인 클래스.

현재 구현을 통해 다음을 성공적으로 달성했습니다.

와우, 거의 끝나가고 있습니다! 남은 것은 원의 중간에 아이콘을 추가하고 애니메이션의 완료 여부에 따라 색상을 변경하는 것뿐입니다.

이 업데이트를 수행하려면 다음과 같은 빌드 방법을 사용하십시오.

다음 구현은 다음과 같은 결과를 가져옵니다.

이제 우리가 원하는 것을 성공적으로 달성했습니다.

나는 당신이 에 대해 뭔가를 배웠기를 바랍니다. CustomPaint 위젯. 이제 다양한 다른 효과를 얻기 위해 스스로 탐색할 수 있습니다.

읽어 주셔서 감사합니다.