flutter - Flutterでウィジェットに境界線を追加するにはどうすればよいですか?

Question

Flutter を使用しており、ウィジェット (この場合はウィジェット) に境界線を追加したいと考えていTextます。

TextStyleとを試しTextましたが、境界線を追加する方法がわかりませんでした。

score 731 · Accepted Answer

Textasを withプロパティを持つchildに追加できます。ContainerBoxDecorationborder

Container(
  margin: const EdgeInsets.all(15.0),
  padding: const EdgeInsets.all(3.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent)
  ),
  child: Text('My Awesome Border'),
)

score 7 · Accepted Answer

ここで、Textウィジェットにはを定義できるプロパティがないborderため、境界線を定義できるウィジェットでラップする必要があります。いくつかの解決策があります。しかし、最善の解決策は、ContainerウィジェットでBoxDecorationを使用することです。

BoxDecoration を使用する理由

BoxDecoration は、以下を定義する可能性など、より多くのカスタマイズを提供するためです。

まず、borderとも次のように定義します。

ボーダの色
ボーダー幅
境界半径
形
もっと ...

例：

   Container(
     child:Text(' Hello Word '),
     decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(
                color: Colors.red ,
                width: 2.0 ,
              ),
          borderRadius: BorderRadius.circular(15),
            ),
          ),

出力：