[Flutter] 실무에서 유용한 플러터 패키지(Pub.dev)

반응형

Flutter로 프로젝트를 진행하면서 개인적으로 유용하다고 느꼈던 몇몇 Package들을 공유드리려고 합니다.

 

다른 모든 언어와 마찬가지로 Flutter 생태계에도 다양한 Package들이 존재합니다. 다양한 Package들이 존재한다는 것은 해당 언어의 생태계가 건강하다는 것을 의미하지만, 초심자들에게는 어떤 Package를 사용해야할 지 모르겠다는 진입장벽이 되기도 합니다.

 

오늘 소개할 모든 Package들은 Pub.dev에서 찾아볼 수 있습니다. 

 

1. dart_code_metrics(https://pub.dev/packages/dart_code_metrics)

Dart 코드 분석 툴

 

여러 개발자들과 함께 개발을 하며 코드 양이 늘어나게 되면 전체 코드의 품질을 유지하기 어려워지는 순간이 반드시 발생합니다. 사람마다 성격이 다르듯 작성하는 코드의 모습도 천차만별이기 때문입니다.

 

dart_code_metrics는 미리 세팅된 룰에 따라 전체 코드를 분석 해주고 개발자에게 error, warning 등의 정보를 제공해 주는 역할을 합니다. 따라서 전체 개발자가 비슷한 수준의 코드 형태를 유지하는 데에 용이합니다. 팀 내부적으로 사용하고 있는 코딩 컨벤션에 따라 룰을 세팅하여 사용하시길 추천드립니다!

 

Flutter에선 코드 마지막에 콤마(,)를 찍냐 안찍느냐로 엄청난 코드 가독성의 차이가 생겼는데 이를 warning 처리해 준다는 것만으로도 엄청난 만족감을 느낄 수 있었습니다.

 

2. cached_network_image(https://pub.dev/packages/cached_network_image)

이미지 캐시 위젯

 

네트워크에서 이미지를 가져와 화면에 랜더링 하는 경우 이미지 캐시를 고려하게 됩니다. cached_network_image는 이를 구현해놓은 패키지로, 이미지 캐시가 필요한 상황에서 사용하도록 Flutter Cookbook에서 사용을 권장하고 있는 패키지입니다.

 

참고 : https://docs.flutter.dev/cookbook/images/cached-images

 

Placeholder, FadeIn / FadeOut, Error 이미지 처리 등의 옵션을 제공하고 있어 유용하게 사용할 수 있습니다.

 

3. flutter_bloc(https://pub.dev/packages/flutter_bloc)

Bloc 패턴 구현 위젯

 

flutter는 선언형 UI 프레임워크입니다. 즉, Flutter에선 상태에 따라 화면이 변경되기 때문에 상태를 관리하는 것이 굉장히 중요합니다. Bloc란 Flutter의 상태 관리를 위해 디자인된 패턴입니다. (나중에 따로 자세히 다뤄 보겠습니다)

 

참고 : https://docs.flutter.dev/development/data-and-backend/state-mgmt/declarative

 

flutter_bloc는 이를 프로젝트에 쉽게 적용할 수 있도록 만들어진 패키지입니다.

 

Flutter 진영에선 규모가 비교적 작은 프로젝트의 경우 provider, 큰 프로젝트의 경우 Bloc 사용을 권장하고 있고 저의 경우 flutter_bloc를 이용하여 BLOC 패턴을 적용했습니다.

 

4. flutter_dotenv(https://pub.dev/packages/flutter_dotenv)

환경 변수 관리 패키지

 

개발을 하다 보면 앱에서 사용되는 환경 변수를 설정해야 하는 상황이 발생합니다.

 

ex) 개발, 테스트, 운영 환경에 따른 API Url 등의 설정값

 

이 경우 보통 값을 코드 상에 직접 기록하지 않고 파일을 따로 분리하여 저장한 뒤, 환경에 따라 읽어오는 방식으로 사용합니다. flutter_dotenv는 이런 상황에서 runtime에 해당 설정값들을 쉽게 불러와 사용할 수 있도록 도와줍니다.

 

5. flutter_hooks(https://pub.dev/packages/flutter_hooks)

리액트 hook의 Flutter 버전

 

Flutter 개발을 하다 보면 불가피하게 반복적으로 작성하게 되는 코드들이 존재합니다.

아래 코드를 예로 들어보면, AnimationController를 사용하기 위해 initState 내부 초기화 로직, dispose 로직 등이 필수로 작성되어야 합니다.

class Example extends StatefulWidget {
  final Duration duration;

  const Example({Key? key, required this.duration})
      : super(key: key);

  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> with SingleTickerProviderStateMixin {
  AnimationController? _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: widget.duration);
  }

  @override
  void didUpdateWidget(Example oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.duration != oldWidget.duration) {
      _controller!.duration = widget.duration;
    }
  }

  @override
  void dispose() {
    _controller!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Flutter_hooks를 사용하면 Hook Class를 통해 위와 같은 BoilerPlate 코드를 줄이고 위젯의 life Cycle 관리를 쉽게 할 수 있습니다!

class Example extends HookWidget {
  const Example({Key? key, required this.duration})
      : super(key: key);

  final Duration duration;

  @override
  Widget build(BuildContext context) {
    final controller = useAnimationController(duration: duration);
    return Container();
  }
}

6. go_router - 라우팅 처리 패키지(https://pub.dev/packages/go_router)

라우팅 처리 패키지

 

Flutter에선 앱의 screen 관리를 위해 Navigator와 Router라는 클래스를 사용합니다. 그리고 Navigation 2.0에 들어서면서 네비게이션 처리를 위해 RouteInformationParser, RouterDelegate 등과 같은 몇몇 클래스들이 추가되었습니다.

 

go_router를 사용하면 앱의 네비게이션 설정과 사용을 좀 더 간편하게 할 수 있습니다!

 

---

 

Flutter 생태계에는 오늘 소개해 드린 패키지 외에도 수많은 패키지들이 존재하고 계속 생겨나고 있습니다.

시간이 날 때 pub.dev를 뒤적여 보는 것은 어떨까요?

 

다른 Flutter 개발자들은 어떤 재미있는 아이디어가 있는지, 어떤 불편함을 개선하려고 시도하는지 살펴보는 것만으로도 생태계의 흐름을 읽는데 큰 도움이 될 거라고 생각합니다!