Copy & Paste Engineer

【Flutter】画像を表示する

【Flutter】画像を表示する

Flutter で画像を表示する方法

画像を配置する

images フォルダをプロジェクト直下に作成します。 表示したい画像をその中に入れます。

設定ファイルを編集

pubspec.yaml ファイルを編集します。

flutter:

  assets:
    # 画像を指定する場合
    - images/sample.jpg
    # ファルダを指定する場合
    - images/

実行コード

Image.asset('images/sample.jpg') を使用して画像を読み込みます。

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.asset('images/sample.jpg');
  }
}

参考