Flutter 강좌 - [Image] 인터넷의 이미지를 출력하는 방법

Flutter 강좌 목록 : https://here4you.tistory.com/120

 

 

이번 강좌에서는 인터넷상의 이미지를 스크린에 출력하는 방법에 대해서 알아본다.

 

소스코드는 다음과 같다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Web Images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(title: Text(title)),
        body: Column(
          children: <Widget>[
            // 일반 이미지
            Image.network('https://picsum.photos/250?image=9'),
            // 애미메이션 GIF 이미지
            Image.network(
                'https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true')
          ],
        ),
      ),
    );
  }
}

 

소스를 살펴모면, 네트워크상에 존재하는 이미지를 출력하기 위해 Image.network()를 이용하고 있다. network 메소드의 파라미터로 이미지의 URL을 입력하면 프레임워크에서 해당 URL의 이미지를 자동으로 다운로드하여 스크린에 출력해 준다.

일반 스틸 이미지외에도 GIF 포맷의 애미메이션 이미지도 지원한다.

 

실행화면은 다음과 같다.

 

화면 상단에는 스틸 이미지가 출력되고, 하단에는 GIF 포맷의 애니메이션이 출력된다. 다만 에뮬레이터를 이용하면 물리적인 그래픽카드가 없어서인지 애니메이션이 매끄럽게 플레이되지는 않는다.

 

---

Flutter Code Examples 강좌를 추천합니다.

• 제 블로그에서 Flutter Code Examples 프로젝트를 시작합니다.
• Flutter의 다양한 예제를 소스코드와 실행화면으로 제공합니다.
• 또한 모든 예제는 Flutter Code Examples 앱을 통해 테스트 가능합니다.

Flutter Code Examples 강좌로 메뉴로 이동

Flutter Code Examples 강좌 목록 페이지로 이동

Flutter Code Examples 앱 설치 | Google Play Store로 이동

Flutter Code Examples - Google Play 앱