【Flutter】Imageでオンライン画像を表示させる

2022年12月14日

こんにちは、フラメルです。

今回はImageでオンライン画像を表示させる方法を2つを紹介します。

方法１：NetworkImageで画像を表示

1つ目の方法はimageプロパティにNetworkImageを渡して表示させる方法です。

NetworkImageにはオンライン画像のURLをString型で渡します。

Image(
  image: NetworkImage(
    'https://images.unsplash.com/photo-1548199973-03cce0bbc87b',
  ),
),

方法２：Image.networkで画像を表示

２つ目の方法はImage.networkに直接オンライン画像のURLをString型で渡し表示できます。

Image.network(
  'https://images.unsplash.com/photo-1548199973-03cce0bbc87b',
),

サンプルコード

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('Flutter'),
        ),
        body: Center(
          child: Image.network(
            'https://images.unsplash.com/photo-1548199973-03cce0bbc87b',
          ),
        ),
      ),
    );
  }
}

以上です。