[Flutter]Borderクラスで枠線の色(line color)を設定するには？

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

Borderクラスで枠線の色を設定する方法を紹介します。

方法
1. Border.all
2. BorderSide
まとめ

方法

Borderクラスで枠線の色をするには、引数を使います。

Border.all

Border.all()を使っている場合は、Border.all()の引数「color」に枠線の色を指定します。

Border.all(
  color: 色,
),

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.red,
            ),
          ),
          width: 200,
          height: 50,
          child: Text('Hello, Flutter'),
        ),
      ),
    );
  }

BorderSide

BoderクラスでBorderSideを使っている場合は、BorderSideの引数「color」に枠線の色を指定します。

BorderSide(
    color: 色
)

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
            border: Border(
              top: BorderSide(
                color: Colors.red,
              ),
              left: BorderSide(
                color: Colors.yellow,
              ),
              bottom: BorderSide(
                color: Colors.green,
              ),
              right: BorderSide(
                color: Colors.blue,
              ),
            ),
          ),
          width: 200,
          height: 50,
          child: Text('Hello, Flutter'),
        ),
      ),
    );
  }