Flutter Image & Icon(이미지 & 아이콘)

Flutter에서 이미지를 표시하는 방법에는 여러 가지가 있습니다. 주로 사용되는 이미지 위젯으로 `Image`와 `Icon`이 있으며, 이미지를 로드하는 방법에 따라 `AssetImage`, `NetworkImage`를 사용합니다. 각각의 사용법과 특징을 설명하겠습니다.

Image 위젯

`Image` 위젯은 이미지를 표시하는 가장 기본적인 위젯입니다. 다양한 소스(자산, 네트워크, 메모리 등)에서 이미지를 로드할 수 있습니다.

AssetImage
`AssetImage`는 로컬 자산(프로젝트의 `assets` 폴더)에 저장된 이미지를 표시할 때 사용합니다. 주로 정적 리소스를 로드하는데 사용됩니다.

1. pubspec.yaml 파일에 자산 경로를 등록합니다.

flutter:
  assets:
    - assets/images/my_image.png

2. AssetImage를 사용하여 이미지를 표시합니다.

Image image = Image.asset('assets/images/my_image.png');

NetworkImage
`NetworkImage`는 웹에서 이미지를 가져와서 표시할 때 사용합니다. 인터넷을 통해 이미지를 로드할 수 있습니다.

Image image = Image.network('https://example.com/my_image.png');

예제

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Image Example')),
        body: Column(
          children: <Widget>[
            // AssetImage 사용 예제
            Image.asset('assets/images/my_image.png'),
            // NetworkImage 사용 예제
            Image.network('https://example.com/my_image.png'),
          ],
        ),
      ),
    );
  }
}

Icon 위젯
`Icon` 위젯은 Flutter에서 제공하는 아이콘을 표시하는 위젯입니다. 주로 `Icons` 클래스와 함께 사용됩니다.

Icon icon = Icon(Icons.home);

아이콘의 크기와 색상을 지정할 수 있습니다.

Icon icon = Icon(
  Icons.home,
  size: 50.0,
  color: Colors.blue,
);

정리
– Image 위젯: 이미지를 표시하는 가장 일반적인 방법. 로컬 자산 이미지를 표시할 때는 `Image.asset`을, 네트워크에서 이미지를 로드할 때는 `Image.network`를 사용합니다.
– Icon 위젯: Flutter에서 제공하는 다양한 아이콘을 표시할 때 사용됩니다. `Icons` 클래스와 함께 사용하여 쉽게 아이콘을 추가할 수 있습니다.

이제 각 이미지 로드 방법의 예제를 통해 Flutter에서 이미지를 다루는 방법을 이해할 수 있을 것입니다. 필요에 따라 적절한 위젯을 사용하여 애플리케이션에 이미지를 추가해보세요.