10
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Flutter] Textの装飾8種類を紹介します

Last updated at Posted at 2021-04-17

Flutterでtextの装飾を行うコードをまとめて紹介します。
もっと良い書き方やコードの不備などありましたら、ご指摘お願いします。

1.太字のtext

スクリーンショット 2021-04-15 16.45.47.png

    Text(
      '太字',
      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
    ),

2.背景付きのtext

スクリーンショット 2021-04-15 16.47.38.png

      Container(
         color: Colors.blue,
         child: Text(
           '背景をつける',
           style: TextStyle(fontSize: 20),
         ),
       ),

3.枠線で囲われたtext

スクリーンショット 2021-04-15 16.54.44.png

       Container(
         decoration: BoxDecoration(
           border: Border.all(color: Colors.blue),
         ),
         child: Text(
           "枠線で囲う",
           style: TextStyle(fontSize: 20),
         ),
       ),

4.角丸の枠線で囲われたtext

スクリーンショット 2021-04-15 16.55.04.png

       Container(
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(10),
           border: Border.all(color: Colors.blue),
         ),
         child: Text(
           "枠線を丸くする",
           style: TextStyle(fontSize: 20),
         ),
       ),

5.下線ありのtext

スクリーンショット 2021-04-15 16.55.37.png

      Text(
         "下線",
         style: TextStyle(
           decoration: TextDecoration.underline,
           fontSize: 20,
         ),
      ),

6.文字の間にスペースを作る

スクリーンショット 2021-04-15 16.55.57.png

      Text(
         "文字の間にスペース",
         style: TextStyle(
           letterSpacing: 6.0,
           fontSize: 20,
         ),
      ),

7. 一部の文字だけを装飾する

スクリーンショット 2021-04-15 16.56.14.png

      RichText(
         text: TextSpan(
           children: [
             TextSpan(
               text: '一部の文字だけ',
               style: TextStyle(color: Colors.black ,fontSize: 20),
             ),
             TextSpan(
               text: '装飾',
               style: TextStyle(color: Colors.blue ,fontSize: 40, fontWeight: FontWeight.bold),
             ),
           ],
         ),
       )

8. 影をつける

スクリーンショット 2021-04-16 16.02.53.png

       Text(
         '影をつける',
         style: TextStyle(
           fontSize: 20,
           shadows: <Shadow>[
             Shadow(
               color: Colors.grey,
               offset: Offset(5.0, 5.0),
               blurRadius: 3.0,
             ),
           ],
         ),  
       ),  
10
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?