こんにちは、フラメルです。
今回は画像の上にテキストを表示させる方法を紹介します。
目次
画像の上にテキストを表示させる方法

ウィジェットを積み重ねて表示できるStack
を使えば、画像の上にテキストを表示できます。
テキストの位置はStack
のalignment
プロパティまたはPositioned
で指定できます。
Stack(
alignment: AlignmentDirectional.topCenter,
children: [
Image.network(
'https://images.unsplash.com/photo-1517849845537-4d257902454a'),
Positioned(
top: 80,
child: Text(
'Dog',
style: TextStyle(
fontSize: 70,
color: Colors.white,
),
),
)
],
),
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter')),
body: Center(
child: Stack(
alignment: AlignmentDirectional.topCenter,
children: [
Image.network(
'https://images.unsplash.com/photo-1517849845537-4d257902454a'),
Positioned(
top: 80,
child: Text(
'Dog',
style: TextStyle(
fontSize: 70,
color: Colors.white,
),
),
)
],
),
),
),
);
}
}
以上です。
合わせて読みたい
あわせて読みたい


【Flutter】Stackの使い方|ウィジェットを積み重ねて表示
こんにちは、フラメルです。 今回はウィジェットを積み重ねて表示できるStackの使い方を紹介します。 Stackの使い方 Stackではchildrenに積み重ねて表示させたいウィジ…