web-dev-qa-db-ja.com

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

Flutterを使用しています。ウィジェット（この場合はテキストウィジェット）に境界線を追加します。

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

dartflutter
51
Seth Ladd

TextFieldをchildとして、Containerプロパティーを持つBoxDecorationを持つborderに追加できます。

enter image description here

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

ここに拡張された答えがあります。 DecoratedBoxは境界線を追加するために必要なものですが、マージンとパディングを追加するためにContainerを使用しています。

一般的なセットアップは次のとおりです。

enter image description here

Widget myWidget() {
  return Container(
    margin: const EdgeInsets.all(30.0),
    padding: const EdgeInsets.all(10.0),
    decoration: myBoxDecoration(), //             <--- BoxDecoration here
    child: Text(
      "text",
      style: TextStyle(fontSize: 30.0),
    ),
  );
}

ここで、BoxDecorationは

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(),
  );
}

ボーダー幅

enter image description here

これらの境界線の幅は、それぞれ1、3、10です。

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 1, //                   <--- border width here
    ),
  );
}

ボーダの色

enter image description here

これらの境界線の色は

  • Colors.red
  • Colors.blue
  • Colors.green

コード

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      color: Colors.red, //                   <--- border color
      width: 5.0,
    ),
  );
}

ボーダーサイド

enter image description here

これらには

  • 左（3.0）、上（3.0）
  • 下（13.0）
  • 左（青[100]、15.0）、上（青[300]、10.0）、右（青[500]、5.0）、下（青[800]、3.0）

コード

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border(
      left: BorderSide( //                   <--- left side
        color: Colors.black,
        width: 3.0,
      ),
      top: BorderSide( //                    <--- top side
        color: Colors.black,
        width: 3.0,
      ),
    ),
  );
}

境界半径

enter image description here

これらの境界半径はそれぞれ5、10、および30です。

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.all(
        Radius.circular(5.0) //                 <--- border radius here
    ),
  );
}

続く

DecoratedBox / BoxDecoration は非常に柔軟です。 Flutter — BoxDecoration Cheat Sheet を読んで、さらに多くのアイデアを入手してください。

73
Suragch

ドキュメントに記載されているように、フラッターはパラメーターよりも合成を好みます。たいていの場合、探しているのはプロパティではなく、ラッパーです（時にはいくつかのヘルパー/「ビルダー」）

ボーダーの場合は、DecoratedBoxが必要です。これには、ボーダーを定義するdecorationプロパティがあります。背景画像や影もあります。

あるいは、@ Azizaが言ったように、Containerを使用できます。 DecoratedBox、SizedBox、およびその他の便利なウィジェットの組み合わせです。

4
Rémi Rousselet