[Flutter] Image.network でネット上の画像を表示する

Image.network はネット上にあるURLから画像を取得して
アプリに表示させることができます

Image.network

ネット上にある画像のURLを取得して

それを読み出し表示するコードは以下になります

Image.network('https://aaa.com/bbb/ccc/xxx.jpg')

1	Image.network('https://aaa.com/bbb/ccc/xxx.jpg')

Flutterでの画像表示方法はいくつかあります

Image.asset
- アプリ内のassetsに画像を置きそこから読み出して表示
Image.network
- Net上のURLから取得して表示
Image.file
- デバイス内の写真や画像ファイルを表示
Image.memory
- バイトストリーム、例えばBase64でエンコードされた画像を表示する

また、Imageクラスには特定の目的がないデフォルトのコンストラクタとしてImage.newがあります
これは明示的にコンストラクタを呼び出したい場合でほとんどのケースでは直接使われることはないようです

Image.new
- Image.newはImageクラスのデフォルトコンストラクタ
- ImageProvider
  - 異なるソースからの画像を取得するための統一されたインターフェースの役割

目次
1. Assetの設定
2. サンプルコード
3. 実行結果

URLの画像

例えば Image class にちょうどいいフクロウの画像ファイルがあるので
それを取得してみます

Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')

1	Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')

サンプルコード

Image.assetと同様で簡単に作成できます

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Image.network(
            'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'
            ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MainApp());

}

class MainApp extends StatelessWidget {

const MainApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

body: Center(

child: Image.network(

'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'

);

}

実行結果

Androidエミュレータで実行

Androidではこんなに難しくやっていました
HttpURLConnection GET で画像をダウンロードする

References：
Image.network
image class