[Flutter] Image Widget

Flutter Image Widget 소개

영어를 이해할 수 있는 사람은 공식 서류를 제출하세요
https://api.flutter.dev/flutter/widgets/Image-class.html
다음은 간단한 사용법을 소개한다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey,
        appBar: AppBar(
          title: Text('home'),
          backgroundColor: Colors.amberAccent,
        ),
        body: Center(
	// Image Widget を配置する
          child: const Image(
	    // ImageProviderを必ず設定する。
	    image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
	    // 高さの設定
            height: 370,
	    // 画像の説明文
            semanticLabel: 'owl',
          ),
        ),
      ),
    ),
  );
}

Network에서 이미지를 가져올 때

Network 이미지가 표시되는 경우 Network Image 또는 Image입니다.네트워크 활용

Image(image: NetworkImage('画像のURL'))
or
Image.network('画像のURL')

File(Path, URI)에서 이미지를 가져올 때

Path에서 이미지를 표시할 때 FileImage 또는 Image.File 사용()
flutter 프로젝트 이외의 로컬 이미지 등을 가져올 때 편리합니다

import 'dart:io';
Image(image: FileImage(File('画像のPathを設定')))
or
Image.file(File('画像のPathを設定'))

Assets에서 이미지를 가져오는 경우

Assets(Fluter 프로젝트 내의 이미지)에서 이미지를 표시할 때는 AssetImage 또는 Image입니다.asset 사용()
assets 디렉터리에 표시할 그림 설정하기
표시할 그림입니다.png'
pubspec.yaml의 assets 부분에 assets/imagees 추가/

import 'packate:';
Image(image: AssetImage('assets/images/表示したい画像.png'))
or
Image.asset('assets/images/表示したい画像.png')