いちのこんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです
この記事を読んでわかること
- ウィジェットを重ねる基本的な方法
- 実践的なサンプルを通じた画像の上にテキストを重ねる方法
開発環境
- Dart 3.0.0
- Flutter 3.10.0
目次
Flutterにおけるウィジェットの重ね方の基本
概要
Flutterでは、Stackウィジェットを使用して、複数のウィジェットを重ねることができます。Stackウィジェット内に子ウィジェットを配置することで、前面から背面へ向かってウィジェットを重ねることができます。
サンプルコード
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// Stackウィジェットを使用してウィジェットを重ねる
child: Stack(
alignment: Alignment.center,
children: <Widget>[
// 背景としての円形のデコレーション
CircleAvatar(
radius: 100,
backgroundColor: Colors.blue,
),
// 上に重ねるテキストウィジェット
Text(
'Flutter',
style: TextStyle(fontSize: 30, color: Colors.white),
),
],
),
),
),
);
}
}サンプルコードの解説
- 18-21行目:
CircleAvatarウィジェットを使って、青色の背景を作成します。 - 23-26行目:
Textウィジェットを使って、「Flutter」というテキストを中央に表示します。このテキストは、CircleAvatarの上に重ねられます。
表示確認
いちのそれでは、表示を確認してみましょ〜
実践的なサンプル: 画像の上にテキストを重ねる
概要
画像の上にテキストを表示する場合、StackウィジェットとPositionedウィジェットを組み合わせて使用します。ここでは、assetsフォルダ内の画像を読み込んで使用する方法を解説します。
サンプルコード
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Stack(
children: <Widget>[
// assetsから画像を読み込んで表示
Image.asset('assets/flutter_logo.png'),
// 画像の上にテキストを配置
Positioned(
bottom: 10,
right: 10,
child: Text(
'Flutter',
style: TextStyle(fontSize: 20, color: Colors.white, backgroundColor: Colors.black.withOpacity(0.5)),
),
),
],
),
),
),
);
}
}サンプルコードの解説
- 16行目:
Image.assetを使って、assetsフォルダにあるflutter_logo.png画像を読み込み、表示します。 - 18-25行目:
Positionedウィジェットを使って、画像の右下にテキスト「Flutter」を表示します。テキストは半透明の黒背景を持っており、読みやすくなっています。
表示確認
いちのそれでは、表示を確認してみましょ〜
ウィジェットを横幅いっぱいに広げたり、割合表示する方法にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。
あわせて読みたい
【Flutter】横幅いっぱいに表示する方法から横幅を割合表示する方法まで解説！
こんばんは〜弊社ブログに辿り着いていただきありがとうございます！株式会社メモリアインクのいちのです この記事を読んでわかること Flutterでウィジェットを画面いっ…
まとめ
いかがでしたでしょうか？今回は、ウィジェットを重ねる方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！
いちの自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。
コメント