Flutter Package(Library) 검색 방법 및 사용, 예제

플러터에서 제공되는 기본 기능만을 가지고 앱을 개발하면 좋겠지만, 

실제 업무를 하다보면 더욱 다양한 환경 구축으로 인해 다양한 기능이 필요하게 됩니다

이러한 기능을 어떻게 찾고 추가하는지에 대해서 간단히 설명해볼까 합니다

 

 

0. 목표

예제 삼아서 네트워크의 이미지를 캐쉬하는 기능을 어떻게 찾고

어떻게 패키지를 설치하고 코드로 구현하는지 같이 살펴보도록 하겠습니다

 

 

 

1. Flutter Packages 방문

먼저 https://pub.dev/flutter 여기로 접속합니다

 

 

2. Cache Network Image 검색

순서 상관없이 떠오르는 기능 그대로 검색해봅시다

 

검색된 결과엔 cached_network_image, extended_image, cache_image, network_to_file_image 가 있습니다. 

일단 여기서 1.0.0 이상한 프로그램들이 주로 안정화된 제품이기 때문에, extended_image, cache_image를 제외합니다.

 

남은 2개의 패키지 중에서 오른쪽에 관련 점수가 높은 100 > 88 인 cached_network_image 로 해보겠습니다

 

 

3. 패키지 상세 정보 페이지

처음 들어오니 Readme가 우릴 반깁니다. 

How to use를 잠깐 살펴보면, imageUrl로 http를 할당해주고 있고, placeholder와 error시 보이는 errorWidget도 쓰고 있네요 

딱 입니다.

 

사용하는 방법은 대충 알았으니, 중간 메뉴 중에 어떻게 프로젝트에 반영하는지 'Install'을 클릭해 봅시다

 

 

 

4. Install 방법

1) pubspec.yaml 파일에 dependencies: 부분에 프로젝트 이름과 버전을 씁니다

• cached_network_image: ^1.1.1

2) 설명에는 '$flutter pub get' 명령어를 치라고 하지만, VSCode를 이용하는 분들은 ⌘+S 를 눌러 저장만 하시면 자동으로 패키지를 다운받습니다.

 

3) 사용하고자 하는 dart 소스코드에 import를 하면 끝!

• import 'package:cached_network_image/cached_network_image.dart';

 

 

5. 소스코드

import 'package:flutter/material.dart'; 
import 'package:cached_network_image/cached_network_image.dart';

void main(){
  runApp(
    MaterialApp(
        home: Center(
          child: SizedBox(
            child:CachedNetworkImage(
              imageUrl: "http://via.placeholder.com/250x250",
              placeholder: (context, url) => new CircularProgressIndicator(),
              errorWidget: (context, url, error) => new Icon(Icons.error),
            ), width: 250, height: 250
          )
        )
      )
  );
}

 패키지의 Readme에 있던걸 이용해 봅니다

 

 

6. 실행 결과

 

 

7. 완성

생각했던 만큼 잘 나와줘서 다행입니다

이렇게 게시글을 따로 쓸 정도는 아닌거 같은데 써버려서.....

일단 공개해 봅니다 민망