この記事はこんな人におすすめ！
- FlutterでPNG・JPEG・オンライン画像を表示させたい
- Imageウィジェットの基本的な使い方が知りたい
- 画像をローカル保存する方法が知りたい
「Flutterで画像を表示するにはどうするの？」
今回はFlutterでPNG・JPEGファイルの画像を表示できるImageウィジェットの使い方について解説していきます。
本記事の流れとしては「オフライン画像の保存」、「画像の表示方法」の順で解説していくのでぜひ最後までご覧ください。
目次
PNG・JPEG画像の保存
手順
- プロジェクト直下にimagesフォルダを作成・画像の保存
- pubspec.yamlファイルを編集
オフラインの画像を表示したい方は先に画像を保存する作業を行なっておきましょう。
プロジェクト直下にimagesフォルダを作成
Flutterプロジェクト直下にimagesフォルダを作成し画像を保存します。
今回はimagesフォルダにBird.svgを保存してアプリで表示させていきます。
pubspec.yamlファイルを編集
pubspec.yamlファイルを開き次の箇所にコードを追加します。- images/とすることでimagesフォルダの全てのファイルにアクセスできるようになります。
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
#↓の2行のコードを追加
assets:
- images/オフライン画像を表示する方法
先ほどimagesフォルダで保存した画像を表示するにはImage.assetに画像のパスを渡します。
Image.asset('images/Bird.png')
オンライン画像を表示する方法
オンライン画像を表示するにはImage.networkに画像URLのパスを渡します。
Image.network(
'https://images.unsplash.com/photo-1548199973-03cce0bbc87b',
)
サンプルコード
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(
appBar: AppBar(title: const Text('Flutter')),
body: Center(
child: Image.network(
'https://images.unsplash.com/photo-1548199973-03cce0bbc87b',
),
),
),
);
}
}まとめ
今回はImageでPNGやJPEG画像を表示する方法を解説していきました。
Flutterには他にもSVG画像を表示できるSvgPictureがあるのでぜひ一緒にご覧ください。