Search
Duplicate

[기초 모바일 스터디 4주차 과제]

소개

이번 주차에는 커스텀 위젯을 만드는 방법과 CustomPainter를 이용하여 완전히 새로운 형태의 위젯을 만드는 방법에 대해 알아볼 것입니다.

커스텀 위젯

기본 제공 위젯들의 조합으로 새로운 위젯을 만들었는데, 해당 위젯이 여러 곳에서 사용이 된다거나, 위젯의 줄 수가 너무 길어서 가독성을 해칠 때가 있습니다.
이럴 때는 새롭게 만든 위젯을 따로 빼서 커스텀 위젯화 하여 간단하게 사용할 수 있습니다.

CustomPainter

대부분의 컴포넌트들은 기본 제공 위젯들로 해결이 가능합니다.
하지만 완전히 새로운 형태의 컴포넌트를 만들어야할 때, 간혹 기본 제공 위젯들의 조합으로도 해결이 되지 않을 때가 있습니다.
이럴 때는 CustomPainter를 이용하여 새로운 형태의 위젯을 만들어 해결할 수 있습니다.

들어가기 앞서

위젯을 커스텀 위젯화 하여 재사용성을 높이고 모듈화를 하는 것을 배워볼 것입니다.
CustomPainter를 통해 새로운 형태의 위젯을 만드는 것을 배워볼 것입니다.
제가 감히 권장해보는 학습 방법
강의를 듣는 것 좋습니다! 하지만 강의에서 모든 것을 알려주길 바라면 안됩니다!
솔직히 말씀드리면 바로 프로젝트를 시작하는걸 권장드리고 싶습니다.
프로젝트를 하면서 부족한 부분들이 생기면 그때 그때 알아가는 방법을 추천드리고, 이번에 제가 기획한 스터디도 뒤로 갈 수 록 점점 그런 방향으로 갈 예정입니다.

과제

목표

중복되는 코드를 줄여보자!
나만의 위젯을 만들어보자!

과제 내용

이번 과제도 역시 한가지지만 시간이 상당히 걸릴 수 있습니다…!
1.
제가 제공하는 명세를 보고 화면을 구현하는 것입니다.
(필요하시면 피그마에 접속해서 정확한 값을 볼 수 있습니다.) ▼
혹시 이미지를 그냥 넣는다고 하면… 과제는 수행하지 않은 것으로 간주합니다!

자료1: Custom 위젯 만들기

너무나도 간단한 Custom위젯 만들기!

1. Class Widget

클래스 위젯으로 만드는 방법은 아래와 같이 StatelessWidget을 상속 받아서 build 메소드의 return에 스스로가 만든 위젯을 넣으면 됩니다!
Week2의 우수 과제에 이를 수행하신 분들이 계시니 한 번 확인해보면 좋을 거 같습니다~
class MyWidget extends StatelessWidget { const MyWidget({super.key}); Widget build(BuildContext context) { return /*여러분이 작성한 위젯*/ } }
Dart
복사

2. helper method

메소드의 방식으로도 Custom위젯을 만들어 재사용성을 늘릴 수 있습니다!
하지만 이는 그렇게 추천하지는 않습니다… BuildContext가 꼬여버릴 수 있기 때문입니다.
이에 대한 자세한 설명은 아래의 글에 있습니다.
헬퍼 메소드는 아래와 같이 간단하게 작성 가능합니다.
Widget helperMethod() { return /*여러분이 작성한 위젯*/ }
Dart
복사

자료2: CustomPaint

이번에 배우는 CustomPaint는 그 내용이 상당히 많습니다! 처음 접하면 상당히 어려울 수 있을 거 같아 최대한 풀어서 설명해보았습니다.

제출해야할 파일과 파일 경로

파일 경로 : 2024-1-Mobile-Study/Week4
제출 파일 : [flutter 프로젝트 전체] 와 구현한 위젯 스크린 샷

추가 명세

제시된 화면 크기는 아이폰 15 프로입니다!
폰트는 Pretendard 폰트를 사용했습니다!
화면을 정말정말 똑같이 구현하지 않아도 됩니다!!
저런 구성만 만들면 됩니다!
똑같이 구현하면 고라니 칭찬 스티커를 드릴 뿐 그 이상 그 이하의 보상은 없습니다.
하지만 최대한 똑같이 구현해주시길 바랍니다…!
나의 다짐 부분엔 원하는 문구를 넣어주세요!
제 다짐을 꼭 넣을 필요는 없습니다!
하지만 패키지는 꼭 추가해주세요!!
‘아 이렇게 하는거 맞나…?’
맞습니다! 만약에 아니라면 제가 알려드릴 것이니 괜찮습니다.
구현에 대해서는 마음가짐을
‘아닌거 같아 흑흑슨…’ 이 아니라
‘씨x 내가 무조건 맞아’ 를 탑재해주세요!
아무리 해도 안되네… ← 꼭 질문을 통해 해결하셨으면 합니다!

마감 기한

2024년 4월 16일 23:59 까지

제출 방법

2024-1-Mobile-Study 라는 이름의 레포지토리의
Week4 폴더에 프로젝트 파일과 스크린 샷을 모두 올려주시면 됩니다!
2024-1-Mobile-Study/Week4