[Flutter Dev] 로컬 / 네트워크 이미지 화면에 표시하기

앱을 개발하게되면 프로필 사진이나 로컬 / 네트워크 이미지를 표시해야 하는 경우가 필수적으로 있습니다.

이번 게시물에서는 Flutter에서 이미지를 표시하는 방법에 대해서 알아보겠습니다.

 

Flutter 플랫폼에서 기본 제공해주는 방법을 사용해도 되겠지만, 편리한 라이브러리가 있어서 이를 활용해보도록 하겠습니다.

샘플 코드는 기존 게시물에서도 작업을 해온 FlutterSampleApp 프로젝트에 구현하겠습니다.

 

---

 

 

1. 로컬 이미지 표시를 위해서, 프로젝트에 이미지를 추가하겠습니다.

   Flutter 프로젝트 assets/images/ 디렉토리를 생성하고, 이미지를 추가해줍니다. 

 

 

2. assets/images/ 디렉토리를 pubspec.yaml 파일에 경로를 등록합니다.

 

assets:
  - assets/icons/
  - assets/images/

 

경로가 여러개인 경우엔 위와 같이 각각 등록해주어야 합니다.

 

---

 

 

3. 이제 라이브러리를 찾으러 갑니다.

    https://pub.dev/ 사이트에 접속하여 "extended_image" 로 검색을 합니다.

 

 

extended_image 라이브러리의 오른쪽 수치를 보니, 확실히 신뢰가 갑니다.

 

 

4. 상세화면으로 이동하여 Installing 탭의 내용을 확인하고, 프로젝트에 라이브러리를 추가해보겠습니다.

    pubspec.yaml 파일에 dependencies 항목 맨 아래에 라이브러리를 추가합니다.

 

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  flutter_svg: ^1.0.1
  extended_image: ^6.0.1

 

5. 추가를 하고, 안드로이드 스튜디오 오른쪽 상단에 Pub get을 눌러줍니다.

 

 

---

 

 

6. 샘플 코드를 구현할 새로운 page를 만듭니다. (이 부분은 넘어가셔도 됩니다.)

 

 

extended_image > extended_image_page.dart 로 생성하였습니다.

 

---

 

 

7. 새로운 파일에 클래스 생성시에 "st" 라고 입력하면 자동으로 추가를 해주는 드롭다운 메뉴가 표시되고, stless 를 선택하면 StatelessWidget이 생성되고, stful 을 선택하면 StatefulWidget 이 자동 생성됩니다.

 

 

8. 아래와 같이 자동으로 입력이 되면, 클래스 이름을 입력하고 imprt 만 해주면 됩니다.

 

 

---

 

 

9. 이제, 실제 사용방법을 알아보겠습니다.

 

    로컬 이미지:  ExtendedImage.asset('{이미지 파일 경로}') 

    네트워크 이미지 : ExtendedImage.network('{이미지 URL}')

   

    그리고, 사이즈나 fit 등의 옵션을 추가하여 사용이 가능합니다.

 

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    body: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
    
      ExtendedImage.asset('assets/images/rachel_davis.jpeg'),
      
      ExtendedImage.network('https://picsum.photos/id/106/400/300',
          width: 150, height: 200, fit: BoxFit.cover)
          
    ]),
  );
}

 

 

네트워크 이미지 URL은 아래 게시글을 참고하시면 좀더 많은 정보를 확인할 수 있습니다.

 

무료 placeholder 이미지 URL (API) 사이트 정리

 

---

 

 

10. 이번엔 약간의 고도화(?)를 해보겠습니다.

      원형의 프로필 사진을 표시하고, 로딩이 완료되면 fade in 애니메이션을 적용하여 자연스럽게 표시되도록 하겠습니다.

 

10-1. 애니메이션 구현을 위하여 StatefulWidget 을 상속받고 클래스 구조를 알맞게 수정해 줍니다.

 

10-2. initState() 에서 애니메이션을 정의합니다.

 

10-3. ExtendedImage.network() 의 속성에 아래의 값을 추가해줍니다.

           shape: BoxShape.circle --> 이미지를 원형으로 만듦

           loadStateChanged --> network로 이미지 로딩 완료 이벤트를 받아, 애니메이션을 시작함.

 

class ExtendedImagePage extends StatefulWidget {
  const ExtendedImagePage({Key? key}) : super(key: key);

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

class _ExtendedImageState extends State<ExtendedImagePage>
    with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
      
        ExtendedImage.network(
          'https://i.pravatar.cc/100?img=26',
          width: 100,
          height: 100,
          cache: false,
          fit: BoxFit.cover,
          shape: BoxShape.circle,
          loadStateChanged: (ExtendedImageState state) {
            switch (state.extendedImageLoadState) {
              case LoadState.loading:
                log("image file loading...");
                break;
              case LoadState.completed:
                log("image file load completed!!");
                _controller.forward();
                return FadeTransition(
                    opacity: _controller,
                    child: ExtendedRawImage(
                      image: state.extendedImageInfo?.image,
                      width: 100,
                      height: 100,
                    ));
              case LoadState.failed:
                log("image file load FAIL!!!");
                _controller.reset();
                break;
            }
          },
        ),
        
      ]),
    );
  }
}

 

---

 

전체 소스 코드는 아래 Github 링크를 확인해주세요.

 

GitHub - rcbuilders/FlutterSampleApp: flutter study sample project