YMLib - Flutter - ネットワーク上の画像を表示(Image.network)

ネットワーク上の画像を表示(Image.network)

2025/09/06

ウィジェットImage.networkを使ってネットワーク上の画像を表示します。

◆環境

OS	Windows 10 Home 22H2 64bit OS x64 プロセッサ
Flutter	3.32.6
Dart	3.8.1
Android Studio	Meerkat 2024.3.1

~/lib/main.dartを編集します。

main.dart

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
            seedColor: Colors.deepPurple
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image.network(
          'http://ymlib.com/image/logo.gif',
          width: 400,
          height: 100,
        ),
      ),
    );
  }
}

実行してみます。

期待通りに動作しました。

▲ PageTop ■ Home