【Flutter】画像を表示しサイズ・配置を変更、角丸にするまでの完全ガイド！

2024年2月24日2024年4月2日

【Flutter】画像を表示しサイズ・配置を変更、角丸にするまでの完全ガイド！

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです

この記事を読んでわかること

Flutterでの画像表示の基本
画像のサイズ変更と配置のカスタマイズ方法
画像を角丸で表示する技術
assetsフォルダの作成とpubspec.yamlへのパス設定方法

開発環境

Dart 3.0.0
Flutter 3.10.0

1.画面に画像を表示させるための事前準備

assetsフォルダの作成と設定

Flutterで画像やフォントなどのアセットをアプリに組み込むには、まずプロジェクト直下にassetsフォルダを作成します。次に、このフォルダをFlutterが認識できるようにpubspec.yamlファイルにパスを設定します。

pubspec.yaml設定例:

flutter:
  assets:
    - assets/

この設定により、assetsフォルダ内のファイルがFlutterプロジェクトで利用可能になります。

2. 画像を表示する

概要

Flutterで画像を表示するには、Image.assetウィジェットを使用します。このウィジェットを使うことで、assetsフォルダに格納された画像を簡単に表示できます。

サンプルコード

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('画像を表示する'),
        ),
        body: Center(
          child: Image.asset('assets/your_image.png'),
        ),
      ),
    );
  }
}

サンプルコードの解説

1行目: 必要なFlutterのMaterialデザインライブラリをインポートします。
3行目: アプリケーションのエントリポイントを定義します。
5-16行目: MyAppクラスを定義し、MaterialAppウィジェットを使用してアプリの基本構造を構築します。
11行目: AppBarを使用してアプリのヘッダーにタイトルを表示します。
13-15行目: Centerウィジェットを使用して、Image.assetで指定した画像を画面の中央に表示します。

表示確認

いちの

それでは、表示を確認してみましょ〜

3. 画像のサイズを変更する

概要

画像のサイズを変更するには、Image.assetウィジェットのwidthとheightプロパティを設定します。

サンプルコード

Image.asset(
  'assets/your_image.png',
  width: 200, // 幅を200ピクセルに設定
  height: 200, // 高さを200ピクセルに設定
)

サンプルコードの解説

2-4行目: Image.assetウィジェットを使用して画像を表示し、widthとheightプロパティを使用して画像のサイズを200ピクセル四方に指定します。

表示確認

いちの

それでは、表示を確認してみましょ〜

ウィジェットを横幅いっぱいに広げたり、割合表示する方法にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

4. 画像の配置を変更する

概要

画像の配置を変更するには、AlignウィジェットやContainerウィジェット内のalignmentプロパティを利用します。

サンプルコード

Container(
  alignment: Alignment.topRight,
  child: Image.asset('assets/your_image.png'),
)

サンプルコードの解説

1-4行目: Containerウィジェットを使用して、alignmentプロパティにAlignment.topRightを指定することで、画像をコンテナの右上に配置します。

表示確認

いちの

それでは、表示を確認してみましょ〜

5. 画像を角丸で表示する

概要

画像を角丸で表示するには、ClipRRectウィジェットを使用して、画像ウィジェットをラップします。borderRadiusプロパティで角の丸みを指定できます。

サンプルコード

ClipRRect(
  borderRadius: BorderRadius.circular(20.0), // 角の丸みを20.0に設定
  child: Image.asset('assets/your_image.png'),
)

サンプルコードの解説

1-4行目: ClipRRectウィジェットを使用して画像をラップし、borderRadiusにBorderRadius.circular(20.0)を指定することで、画像の角を20.0の半径で丸くします。

表示確認

いちの

それでは、表示を確認してみましょ〜

画像ボタンにご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

まとめ

いかがでしたでしょうか？今回は、Flutterで画像を表示しサイズ・配置を変更、角丸にする方法を解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。