flutter 이미지 위젯 종류 #

Find similar titles

총 7회 업데이트 됨.

Edit

최초 작성자
개발자의 디자인 독해력 2022-11-09 09:28:59
최근 업데이트
jhkim 2022-12-13 04:37:33

Structured data

Category: Programming

플러터(Flutter)

플러터(Flutter) #

플러터란 #

Flutter 개요 : http://www.incodom.kr/Flutter
Flutter 설치 : http://www.incodom.kr/Flutter/setting
Flutter state(상태) : http://www.incodom.kr/Flutter/state
Flutter http(서버사용) : http://www.incodom.kr/Flutter/http
Flutter FutureBuilder(비동기) : http://www.incodom.kr/Flutter/FutureBuilder
Flutter compute : http://www.incodom.kr/Flutter/Compute
Flutter 앱 접근 권한 설정 : https://www.incodom.kr/flutter%20%EC%95%B1%20%EC%A0%91%EA%B7%BC%20%EA%B6%8C%ED%95%9C%20%EC%84%A4%EC%A0%95
Flutter MVC 디자인 패턴 : https://www.incodom.kr/flutter%20mvc

플러터 이미지 위젯 #

이미지 첨부 방법
저장한 이미지 사용
URL을 통한 네트워크 이미지 첨부
SVG 이미지 파일 첨부
CachedNetworkImage를 이용한 이미지 첨부
로티 첨부
비디오 파일 첨부

이미지 첨부 방법 #

플러터에서 이미지 첨부의 기본적인 단계는 디렉터리(lib와 같은 위치)에 assets 폴더를 생성하는 것으로 시작한다.
assets 폴더에 저장할 이미지를 넣은 후 pubspec.yaml에 들어간다. 아래 첨부된 사진과 같이 'flutter:' 밑에 'assets:'를 넣고 해당 폴더를 지정한다. 마지막에 해당 폴더 끝에 '/'를 붙이면 폴더 안에 있는 모든 사진을 읽는다는 의미이다. pubspec.yaml은 들여쓰기가 중요함으로 주의하자.

pubspec.yaml에 등록 후 안드로이드 스튜디오 혹은 VSCode 터미널에 'flutter pub get'을 입력한다.

저장한 이미지 사용 #

assets에 이미지를 저장했으면 Image.asset() 함수를 사용하여 UI에 저장된 이미지를 보여줄 수 있다.

Image.asset(                                                                'assets/icon/image-error.png',                                                  width: 72,height: 72,fit: BoxFit.cover,);

```
```: width,height를 설정하면 해당 이미지의 사이즈를 조절할 수 있고 fit을 통해서 width*height 사이즈에서 이미지를 어떻게 넣을지 결정할 수 있다. 예를 들어 BoxFit.fill을 사용하면 지정한 사이즈에 꽉 차게 사진을 보여준다.

URL을 통한 네트워크 이미지 첨부 #

서버에서 저장하고 있는 이미지를 URL 주소를 통해 사진에 접근하는 경우 Image.network를 사용한다.

loadingBuilder은 서버에서 이미지를 불러오는 동안 보여줄 이미지 혹은 gif를 저장하는 부분이다. 주로 LinearProgressIndicator 혹은 CupertinoActivityIndicator를 사용한다.

errorBuilder는 서버에서 이미지를 불러오지 못했을 경우 보이는 부분이다. 나는 주로 에러 시 보이는 이미지를 로컬에 저장하고 errorBuilder를 통해 보여준다.

    Image.network(                                                              'https://www.testimage.com',                                                  width: 72,height: 72,                                                     loadingBuilder:                                                                 (BuildContext? context,Widget? child,ImageChunkEvent?  loadingProgress)
            {return Center(child: child);},
        errorBuilder: (BuildContext? context, Object? exception,                    StackTrace? stackTrace) {
            return Image.asset('assets/icon/image-error.png');},);

SVG 이미지 파일 첨부 #

최근 SVG 파일 형식의 데이터를 자주 사용한다. png보다 더욱 깔끔한 것뿐만 아니라 어그러지는 것도 많이 없기 때문이다.(단점은 그라데이션과 같은 부분이 플러터에서 호환이 잘 안되어서 SVG 파일 코드를 일부 수정해야 한다.)

SVG 형식의 이미지 파일은 'flutter_svg' 패키지를 사용한다. Image.asset과 같이SvgPicture.asset('assets/icon.svg') 방식을 사용하고 네트워크를 통해 이미지를 수신할 시 SigPicture.network('https://www.testfile.com')을 사용한다.

PNG를 저장하는 방식과 같이 assets 폴더에 파일을 넣고 pubspec.yaml에서 pub get으로 등록하면 된다.

CachedNetworkImage를 이용한 이미지 첨부 #

CachedNetworkImage를 사용하는 이유는 '자주 똑같은 이미지를 불러오는 경우'를 리소스 낭비를 방지하기 위해서다. 만약 갤러리 앱을 만들었다고 가정해보자. Image.network를 사용하여 메인 화면에 100가지를 불러오고 한 가지 이미지를 선택했다. 그 후 상세 페이지로 이동했다가 다시 메인으로 오면 똑같은 사진을 함수를 통해 불러온다. 사진이 많은 경우 많은 리소스를 잡아먹게 된다.
하지만 100가지 사진을 캐시에 저장한 후 상세 페이지에 들어갔다 나오면 어떻게 될까? 당연히 캐시에 저장되어 있어서 중복된 사진을 불러올 필요가 없다. 따라서 많은 사진을 앱에서 보여지는 경우 CachedNetworkImage를 사용하는 것이 유용하다.

CachedNetworkImage를 사용하기 위해서는 'cached_network_image' 패키지를 사용한다.

CachedNetworkImage( 
    imageUrl: 'https://www.testimage.com',
    fit: BoxFit.cover,
    errorWidget: (context, url, error){
       return Image.asset('assets/icon/image-error.png', width: 72,             height: 72,);
        },
       ),

```
```: Image.network와 비슷한 형식을 취한다.

로티 첨부 #

로티 파일은 주로 '.json' 혹은 '.zip' 형식을 취한다. 로티는 기본적으로 'AnimationController'를 사용한다. 이를 통해서 로티 시작, 되감기, 일시정지를 컨트롤 할 수 있다.

이 로티 파일을 앱에서 실행하기 위해서는 'lottie' 패키지를 사용한다. 로티도 네트워크를 통해서 접근할 수 있다. Lottie.network을 사용하면 접근 가능하다.

 Lottie.asset(
          'assets/LottieLogo1.json',
          controller: _controller,
          onLoaded: (composition) {
            // Configure the AnimationController with the duration of                   the
            // Lottie file and start the animation.
            _controller
              ..duration = composition.duration
              ..forward();
          },
        ),

비디오 파일 첨부 #

비디오 파일은 '.mp4'형식을 취한다. 'video_player' 패키지를 사용하며 VideoPlayerController.network를 사용하면 네트워크를 통해 mp4 파일을 다운받아 재생할 수 있다.

videoController = VideoPlayerController.asset('assets/videofile.mp4',
    videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true))
  ..initialize().then((_) async {


    setState(() {
    videoController.play();
    videoController.setVolume(0);
    });
  });

videoController.addListener(() {

  if (videoController.value.position == videoController.value.duration) {
    timer = Timer.periodic(Duration(milliseconds: 300), (_) {
      if (mounted) {
        //다음 동작 진행
      }
    });
  }
});

```
```: 위 코드를 해석하면 비디오 파일 시작하되 소리를 0으로 설정한다는 의미이다. 또한 비디오가 끝나면 다음 동작을 진행하라는 의미를 담은 코드이다.

정리 #

이미지(png)를 로컬에 저장하기 위해서는 Image.asset을 사용하고 네트워크를 통해 이미지를 불러오기 위해서는 Image.network를 사용하면 된다. 이미지가 많고 똑같은 이미지를 불러오지 않기 위해서는 CachedNetworkImage를 사용한다. SVG 파일은 SVGPicture.asset을 로티는 lottie.asset을 사용하면 된다. 마지막으로 비디오 파일(.mp4)은 VideoPlayerController.asset를 사용하면 된다.

참조링크 #

로티 패키지: https://pub.dev/packages/lottie
CachedNetworkImage 패키지: https://pub.dev/packages/cached_network_image
SVG 패키지: https://pub.dev/packages/flutter_svg
비디오 재생 패키지: https://pub.dev/packages/video_player