【Flutter】画像の上にテキストを表示させる

2023年1月15日

こんにちは、フラメルです。

今回は画像の上にテキストを表示させる方法を紹介します。

画像の上にテキストを表示させる方法

ウィジェットを積み重ねて表示できる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】画像の上にテキストを表示させる

画像の上にテキストを表示させる方法

サンプルコード

合わせて読みたい