[Flutter]Text(テキスト)を縁取り(bordered)するには？

どうも、ちょげ(@chogetarou)です。

Textで表示するテキストを縁取りする方法を紹介します。

方法
使用例

方法

Textを縁取りするには、「bordered_text」パッケージを使います。

まず、「pubspec.yaml」でパッケージを導入します。

dependencies:
  bordered_text: ^2.0.0

そして、該当ファイルでパッケージをインポートします。

import 'package:bordered_text/bordered_text.dart';

次に、縁取りしたいTextを、BorderedTextでラップします。

BorderedText(
  child: Text('テキスト'),
),

最後に、BorderedTextの引数で縁取りの設定をします。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: BorderedText(
          child: Text(
            'Hello Flutter',
            style: TextStyle(
              fontSize: 24,
              color: Colors.white,
            ),
          ),
          strokeWidth: 2.0, //縁の太さ
          strokeColor: Colors.blue, //縁の色
        ),
      ),
    );
  }