いちのこんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです
この記事を読んでわかること
- 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エンジニアを目指すなら【ユニゾンキャリア】
をオススメします。
コメント