패스트캠퍼스 환급챌린지 12일차 미션(2월 12일): 15개 프로젝트로 실무까지 끝내는 Dart & Flutter 앱 개발 강의 후기

오늘은 Flutter 프로젝트에서 일종의 환경 설정 파일로 사용되는 pubspec.yaml 파일에 대해 알아보고, Flutter에서 외부 라이브러리와 로컬 데이터를 활용하는 방법에 대해 알아보려 한다.

웹 개발 프로젝트에서 외부 라이브러리를 사용하는 경우, 패키지 매니저를 사용하게 되는데 npm의 경우 package.json이라는 파일에서 해당 프로젝트의 이름, 저자, 버전 정보 또는 외부 라이브러리(의존성)의 버전 정보를 관리하게 된다.

Flutter에서도 이 package.json 파일과 같은 역할을 하는 pubspec.yaml 파일이 있다. (진짜 웹 개발이랑 여러모로 비슷하다;;)

pubspec 파일 일부

여기서도 프로젝트의 이름, 상세 설명과 프로젝트 버전 등이 관리되고 있고, sdk 버전도 관리하고 있는 것을 확인할 수 있다.

프로젝트 버전의 경우 안드로이드는 pubspec에서 지정해준 버전을 따라가지만, IOS는 XCode 내에서 지정한 버전을 따라가기 때문에 만약 크로스플랫폼으로 앱을 만든다면 두 앱의 버전을 일치시켜주는게 좋다.

 

조금 더 아래로 내려보면 이 프로젝트에서 사용하는 외부 라이브러리의 이름과 버전 정보를 확인할 수 있다.

의존성으로 flutter sdk, cupertino_icons이 설치돼있고, 개발 의존성으로 flutter_test, flutter_lints라는 라이브러리가 설치돼있다.

 

이제 외부 라이브러리를 사용하는 방법에 대해 알아보자.

Flutter에서 외부 라이브러리는 어디서 받아올 수 있을까? 웹 FE 개발 시에는 npm이었겠지만, Flutter에서는 pub.dev라는 공간에서 관리되고 있다. (https://pub.dev/)

Flutter에서 인증한 라이브러리, 인기있는 라이브러리, Flutter와 Dart에서 각각 인기있는 라이브러리 등을 확인할 수 있다.

라이브러리의 이름을 통해 검색한 후 클릭하면, 해당 라이브러리에 대한 상세정보들을 확인할 수 있다.

이 english_words는 5000개 이상의 영단어를 포함하고, 이를 간단한 유틸리티 함수를 통해 유용한 기능을 활용하도록 해주는 라이브러리이다. 이 라이브러리로 5개의 랜덤한 영단어를 생성하는 예제를 한번 구현해보자.

 

일단 이 라이브러리를 설치하는 방법은 다음과 같다.

- pubspec dependecies에 이름과 버전정보 명시

- pub get

 

그러면 pubspec을 기반으로 의존성이 갱신되면서 프로젝트에서 해당 라이브러리를 import 해올 수 있게 된다.

예제는 아래와 같이 간단하게 구현하였다.

class RandomWords extends StatelessWidget {
  const RandomWords({super.key});

  @override
  Widget build(BuildContext context) {
    final wordList = generateWordPairs().take(5).toList();
    final widgets = wordList
        .map((word) => Text(word.toString(), style: TextStyle(fontSize: 20))).toList();

    return Column(children: widgets,);
  }
}

generateWordPairs()는 이 라이브러리의 pubdev 사이트에서 확인할 수 있는 유틸리티 함수이다.

실행 결과는 다음과 같다.

 

 

마지막으로 로컬 데이터인 에셋 파일을 다루는 방법에 대해 알아보자.

에셋 또한 pubspec 파일에서 관리한다.

assets 항목 하위에 assets/images/라는 경로를 명시해주었다.

이렇게 하면 assets/images 경로 하위의 모든 정적 파일들을 assets로 관리할 수 있게 된다.

와일드카드 문자(*)가 필요 없다는게 신기했다.

 

이미지를 가져다 사용할 때에는 Image 위젯을 활용하면 된다. asset 메서드에 해당 asset의 경로를 명시해주면 되고, 나의 경우는 저렇게 path를 상수화해서 넘겨주었다.

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N