Flutter, Clean하게 Import하기

Manage Flutter Imports Clean

Flutter로 개발을 하다보면 외부 패키지 또는 위젯 모듈들을 import 하는 경우가 많죠. 하나의 소스 파일에서 여러 모듈을 필요로 하는 경우, 위 사진처럼 호출하려고하는 파일의 경로를 가리키는 import 구문들을 작성하게 됩니다.

하지만 이렇게 하나의 소스 파일에서 여러줄의 import구문을 적다보면, 아래와 같은 문제점들이 발생할 수 있습니다.

• 수정 과정 중, 불필요한 import 코드(구문)이 남게됨
• 코드 가독성이 떨어짐
• 중복 코드 발생

Multiple Imports to Single Import

그래서 저는 하나의 소스파일에서 필요한 Import 구문을 적는 Multiple Imports방식 보다 하나의 파일에서Import를 관리하는 Single Import방식을 선호합니다.

그럼 Single Imoprt방식은 어떻게 구성 되는지 알아봅시다.

경로

lib > utilites > index.dart 

코드

/* Flutter Packages */
export 'package:flutter/material.dart';
export 'package:flutter/foundation.dart';
export 'package:flutter/services.dart';

/* Packages */
export 'package:fluro/fluro.dart';
export 'package:flutter_svg/flutter_svg.dart';
export 'package:flutter_hooks/flutter_hooks.dart';
export 'package:sizer/sizer.dart';
export 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
export 'package:get/get.dart';
export 'package:cached_network_image/cached_network_image.dart';
export 'package:clickable_list_wheel_view/clickable_list_wheel_widget.dart';
export 'package:carousel_slider/carousel_slider.dart';

/* Screens */
export 'package:movie_curation/screens/root/root_screen.dart';
export 'package:movie_curation/screens/home/home_screen.dart';
export 'package:movie_curation/screens/home/mobile/home_screen_mobile.dart';
export 'package:movie_curation/screens/home/tablet/home_screen_tablet.dart';
export 'package:movie_curation/utilities/temp_screen.dart';
export 'package:movie_curation/utilities/temp_screen.dart';
export 'package:movie_curation/screens/movieDetail/tablet/movie_detail_tablet.dart';
export 'package:movie_curation/screens/movieDetail/mobile/movie_detail_mobile.dart';
export 'package:movie_curation/screens/movieDetail/movie_detail_screen.dart';
export 'package:youtube_player_flutter/youtube_player_flutter.dart';
export 'package:movie_curation/screens/contentPlayer/content_player_screen.dart';
export 'package:movie_curation/screens/root/root_screen_mobile.dart';
export 'package:movie_curation/screens/searchScreen/search_screen_tablet.dart';

/* Models */
export 'package:movie_curation/models/movie_model.dart';
export 'package:movie_curation/models/movie_genre_model.dart';
export 'package:movie_curation/models/actor_model.dart';
export 'package:movie_curation/models/trailer_model.dart';
export 'package:movie_curation/models/youtube_model.dart';
export 'package:movie_curation/models/youtube_core_model.dart';
export 'package:movie_curation/models/video_detail_model.dart';
export 'package:movie_curation/models/drama_model.dart';

/* View Models */
export 'package:movie_curation/viewModels/movie_view_model.dart';
export 'package:movie_curation/services/youtube_api_response.dart';
export 'package:movie_curation/viewModels/youtube_view_model.dart';
export 'package:movie_curation/viewModels/search_content_view_model.dart';

/* Widgets */
export 'package:movie_curation/widgets/responsive_layout.dart';
export 'package:movie_curation/widgets/gradient_button.dart';
export 'package:movie_curation/widgets/category_group_button.dart';
export 'package:movie_curation/widgets/gradient_post_background.dart';
export 'package:movie_curation/widgets/movie_content_info.dart';
export 'package:movie_curation/widgets/movie_post_slider.dart';
export 'package:movie_curation/widgets/trailer_dialog.dart';
export 'package:movie_curation/screens/movieDetail/localWidget/cast_slider.dart';
export 'package:movie_curation/screens/movieDetail/localWidget/movie_else_info.dart';
export 'package:movie_curation/widgets/back_arrow_button.dart';
export 'package:movie_curation/screens/movieDetail/localWidget/main_content_info_mobile.dart'; // MovieDetailScreen(M) > MainContentInfoMobile
export 'package:movie_curation/screens/movieDetail/localWidget/youtube_reviewCotents_wheel_slider.dart'; // MovieDetailScreen(T) > WheelSlider

/* Services */
export 'package:movie_curation/services/movie_api_response.dart';

/* Utilities */
export 'package:movie_curation/utilities/palette.dart';
export 'package:movie_curation/utilities/orientation.dart';
export 'package:movie_curation/utilities/scroll_controller.dart';
export 'package:movie_curation/utilities/data/dummy_data.dart';
export 'package:movie_curation/utilities/responsive_size.dart';

/* Routes */
export 'package:movie_curation/routes/fluro_router.dart';

Single Import 방식으로 파일을 관리하는 방법은 간단합니다.

• index.dart 파일 생성 (utilities 폴더)
• 다른 소스파일에서 호출이 필요한 export 코드 작성
  • 필요하다면 파일의 구조 또는 역할을 표시하는 주석 작성
• import가 필요한 파일에서 index.dart 호출

마무리

이렇게 Single Import 방식으로 모듈을 Import하는 방법을 알아봤습니다.
Single Import 방식을 채택하면 유지 보수가 용이 해지고 import구문을 누락해서 생기는 디버깅 이슈를 사전에 방지할 수 있습니다.
프로젝트 초반에는 index.dart 파일에 import구문을 하나하나 적는게 조금 번거로웠지만, 프로젝트 규모가 커지면서 모듈들을 유지 보수 해야되는 케이스가 많아지면서 Single Import 방식이 굉장히 유용하더라고요. 여러분들도 한번 참고해보세요😁