반응형
포스팅에서 진행한 환경
- OS : Windows 10
- IDE : Visual Studio Code
- Emulator : Pixel 5 API 27 (Android-x86 emulator)
이번 포스팅에서는 파일을 위젯별로 분류하여 메인 파일을 간소화하고 코드 유지보수를 하기 쉽게 변경해봅니다.
다른 설명이 필요하면 아래의 링크를 참고해주세요.
- 01. Flutter - ListView, Card, Navigator - 스크롤 가능한 목록 표시, 목록 선택시 특정 목록 내용 보여주기
- 02. Flutter - StatefulWidget 활용 - 실시간 검색 기능 구현하기
- 03. Flutter - Floating Action Button, showDialog - 플로팅 액션 버튼으로 특정 작업 수행하기(리스트뷰 항목 추가하기)
- 04. Flutter - BottomNavigationBar - 다른 페이지로 이동하기(화면 전환)
포스팅에서 다루는 예시 프로젝트는 아래의 깃허브 링크에서 다운로드 받을 수 있습니다.
'5_file_devide_example' 폴더를 확인해주세요.
새 dart 파일 생성하기
- (프로젝트 디렉토리에서) lib 폴더 우클릭 - New File...
- dart파일 이름 정의
- memoDetailPage.dart : 메모 항목의 상세 내용을 보여주는 페이지
파일 분리하기
- main.dart 파일의 해당 코드를 새로 생성한 dart파일로 이동
- 예시) 항목을 선택했을 때 상세 화면을 보여줄 페이지를 분리하기
main.dart에서 분리할 코드 잘라내기
새로 생성한 dart 파일에 붙여넣기
- 붙여넣기를 하면 오류가 발생
- QuickFix 버튼을 눌러 해결 할 수 있음
- main.dart에서 사용하던 패키지가 임포트가 되지 않아 발생되는 문제
- ContentPage 클래스를 새로운 dart 파일로 이동한 화면
분리한 파일 연결하기
- main.dart에서 분리한 파일을 import 로 호출
- main.dart 코드를 살펴보면 기존의 연결되었던 부분에서 오류 발생, 퀵 픽스로 클래스 임포트 진행
- 어렵게 생각하지말고, 기존의 라이브러리나 클래스 호출할 때와 동일한 방식으로 진행하면 됩니다.
main.dart 에러 수정
- 기존 main.dart 코드에서 연결되었던 클래스를 찾을 수 없다는 의미
- 새로 만든 dart 파일 연결(포스팅에서는 ContentPage가 있는 dart 파일 연결)
- Quick Fix를 누르면 자동으로 분리한 dart 파일이 import 됩니다.
- 동일한 방식으로 여러개의 위젯을 분류에 맞게 파일로 분리해봅시다.
- 포스팅에서의 분류 기준
- lib - memoPage : 메모 관련 페이지를 저장할 폴더
- lib - communityPage : 커뮤니티 관련 페이지를 저장할 폴더
- lib - myInfoPage : 내 정보 관련 페이지를 저장할 폴더
- footer.dart : 바텀 내비게이션 바를 분리한 파일
정리 전
- 정리 이전의 main.dart 코드 화면
- 약 300줄의 코드로 에러나 위젯의 내용 수정시 특정 코드를 찾기 난해하였음
정리 후
- 모든 위젯을 리소스화(파일화)하여 메인 파일이 엄청 깔끔해진 화면
- 에러나 수정시 특정 분류에 맞는 디렉토리의 파일을 열어 수정
참고
반응형