Web上の画像

CoddyのFlutterジャーニー「はじめてのアプリ」セクションの一部。レッスン 27/32。

Image.networkは、ウェブアドレスから画像を表示します。

Image.network('https://picsum.photos/id/10/300/200')

アプリは実行中に画像をダウンロードするため、画面のほかの部分が表示された後、少し遅れて画像が表示されることがあります。width:で描画時の幅を設定すると、画像の形を保つために高さが自動的に決まります。

Image.network('https://picsum.photos/id/10/300/200', width: 150)

アプリ自体に含まれる画像にはImage.assetを使います。自分のプロジェクトを作るときに使うことになります。

チャレンジ

簡単

この画像をキャプションの上、Columnの最初の子として表示します：

https://picsum.photos/id/237/300/200

自分で試してみよう

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('A good dog', style: TextStyle(fontSize: 24)),
            ],
          ),
        ),
      ),
    );
  }
}