본 글을 해당 영상을 참고하였습니다.
https://www.youtube.com/watch?v=Dh-cTQJgM-Q
들어가며
플러터로 토이프로젝트를 진행하다보니 점점 내가 익숙한 방식으로만 코드를 작성한다는 느낌이 들었다.
그리고 내가 하는 방식이 옳은 방식인지에 대한 의문도 종종 들곤하였다.
그래서 나보다 더 개발을 잘하고, 플러터라는 프레임워크에 익숙한 사람들은 어떤 방식으로 코드를 작성하는지 배워보고자, 유튜브에 있는 Modern Login Ui 튜토리얼을 따라해보기로 하였다.
오늘은 이 튜토리얼을 진행하면서 새로웠던 부분을 간략하게 정리해보고자 한다.
글로 안써놓으면 또 까먹으니까..
구현 화면
튜토리얼에서 구현한 로그인 UI이다.
이번에는 로그인 기능 자체보다, UI나 프로젝트를 구성하는 방식에 초점을 두고 공부했다.
프로젝트 구조
- images
프로젝트에 사용되는 각종 이미지를 담아놓는 폴더이다.
보통은 lib 폴더와 같은 레벨에 images 폴더를 만들어서 사용하곤 했는데, 이 튜토리얼에서는 lib 폴더 안에 images 폴더를 만들어서 사용했다.
- pages
앱의 페이지(스크린) 위젯을 모아놓는 폴더이다.
때에 따라 하위 폴더를 만들어서 해당 페이지에 사용되는 각종 위젯을 모아놓기도 한다.
- services
api 또는 인증서버와의 통신을 담당하는 파일을 모아놓는 폴더이다.
api 요청이나 인증 요청이 필요한 경우, 요청이 완료되어야 다음 작업을 실행할 수 있는 경우가 많다.
따라서 일반적으로는 async await을 이용해 비동기 방식으로 함수를 작성한다.
- widgets
프로젝트에서 전반적으로 재사용되는 위젯을 모아놓는 폴더이다.
기본적인 버튼이나, 텍스트 필드 등이 이에 해당한다.
재사용되는 위젯은 전반적인 틀을 작성해놓고, 매개변수로 문자열이나 함수등을 전달받아 경우에 따라 다른 방식으로 위젯이 동작(또는 렌더링)될 수 있도록 한다.
AuthPage의 활용
이 프로젝트에서는 main.dart파일에서 AuthPage를 기본렌더링한다.
그리고 AuthPage에서는 SteamBuilder를 활용해 로그인이 필요한 경우 LoginPage를, 로그인이 완료된 경우 HomePage를 렌더링해주게 된다.
함수 인자 전달
이 프로젝트에서는 대부분의 onTap 함수를 부모 위젯에서 전달해주는 방식을 사용하였다.
내 생각에는 onTap과 같은 함수를 자식 위젯의 인자로 전달해서 사용할 경우
- 위젯의 재사용성 증가 (때에 따라 다르게 동작하도록 구현 가능함)
- 부모 위젯에서 동작을 위한 함수를 한꺼번에 관리 가능
정도의 장점이 있는 것 같다.
프로젝트를 하다보면, 위젯의 개수가 많아질수록 어떤 위젯이나 페이지에 동작 함수를 짜놓았는지 헷갈릴 때가 있다.
이런 경우에 해당 페이지의 메인 파일에서 대부분의 함수를 관리하는 방식을 사용하는 것도 좋을 것 같다.
물론, 상태관리가 필요한 경우에는 콜백함수보다는 Provider를 사용할 것 같다..
'Dart & Flutter' 카테고리의 다른 글
| [Dart 기초] Function (0) | 2023.04.05 |
|---|---|
| [Error] Vertical viewport was given unbounded height / RenderBox was not laid out. (0) | 2023.04.04 |
| [Error] Use context before initState() completed (0) | 2023.04.02 |
| [Error] Could not find the correct Provider above this Widget (0) | 2023.03.23 |
| [Flutter] Stateless Widgets (0) | 2023.03.21 |