【Flutter】overflowではみ出した文字を隠す

こんにちは！
過ごしやすい季節になりましたね

今回は、引数「overflow」を使って、Textのはみ出した文字を隠します。
flutter初心者の方に読んでいただきたい記事です

「overflow」には３つの種類があります。

• TextOverflow.clip : はみ出した文字は隠す
• TextOverflow.ellipse : はみ出した文字を「・・・」で隠す
• TextOverflow.fade : はみ出した文字をフェードで隠す

使用例

dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MainApp()));
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text("Textのはみ出した文字を隠す")),
        body: Center(
          child: Column(
            children: [
              Container(
                color: Colors.pink,
                width: 100,
                height: 30,
                child: const Text(
                  'Hello,Flutter',
                  overflow: TextOverflow.clip,
                  style: TextStyle(fontSize: 24),
                ),
              ),
              Container(
                color: Colors.yellow,
                width: 100,
                height: 30,
                child: const Text(
                  'Hello,Flutter',
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(fontSize: 24),
                ),
              ),
              Container(
                color: Colors.purple,
                width: 100,
                height: 30,
                child: const Text(
                  'ハロー、フラッター',
                  overflow: TextOverflow.fade,
                  style: TextStyle(fontSize: 24),
                ),
              ),
            ],
          ),
        ));
  }
}

実行例

紫のContainer部分が見づらくてすみません

最後に

ここまで読んでいただき、ありがとうございました！
いいねをくれると、スキップしながら喜びます