기본 사용

• 로컬 이미지 / 웹상의 이미지 임베딩 가능
• 일반적으로 assets 폴더를 사용해 로컬 이미지 저장
• 여러 해상도를 지원하기 위해 보통 이미지를 생성할 때, 2x, 3x를 생성하고 해당 이미지를 사용함

../my_icon.png
../2.0x/my_icon.png
../3.0x/my_icon.png

로컬 이미지 표시

• 프로젝트 폴더 안에 assets 폴더 생성
• 화면에 이미지를 표시하기 위해서 pubspec.yaml 에 작성해야 함

# To add assets to your application, add an assets section, like this:
# assets:
#   - images/a_dot_burr.jpeg
#   - images/a_dot_ham.jpeg

-> 아래와 같이 변경

# To add assets to your application, add an assets section, like this:
assets:
  - assets/bunny.gif
  - assets/profile.png

# 폴더 지정
assets:
	- assets/

• main.dart 수정

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image'),
      ),
      body: Center(
        child: Image(image: AssetImage('assets/profile.png')),
				// 로컬 이미지 표시
      ),
    );
  }
}

# 사용법 1
Image(
  image: AssetImage('assets/profile.png'),
  width: 200,
  height: 100,
  fit: BoxFit.fill,
)

# 사용법 2
Image.asset('assets/profile.png')

# 사용법 3
Image.asset(
  'assets/profile.png',
  width: 200,
  height: 100,
  fit: BoxFit.fill,
)

네트워크 이미지

• AssetImage 대신 NetworkImage 위젯 사용

# 사용법 1
Image(
  image: NetworkImage(
    '<https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg>',
  ),
),

# 사용법 2
Image(
  image: NetworkImage(
    '<https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg>',
  ),
  width: 200,
  height: 100,
  fit: BoxFit.fill,
),

# 사용법 3
Image.network(
  '<https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg>',
)

# 사용법 4
Image.network(
  '<https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg>',
  width: 200,
  height: 100,
  fit: BoxFit.fill,
),