[Flutter]CupertinoButtonに色付きの枠線を付けるには？

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

CupertinoButtonに色付きの枠線を付ける方法を紹介します。

方法

CupertinoButtonに色付きの枠線を付けるには、Containerを使います。

まず、CupertinoButtonをContainerでラップします。

Containerの引数「decoration」にBoxDecorationを指定します。

そして、BoxDecorationの引数「border」に「Border.all()」を指定します。

Border.all()の引数「color」に枠線の色を指定します。

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: borderColor, //枠線の色
    ),
  ),
  child: CupertinoButton(・・・),
),

Containerで上記の記述をすることにより、CuperitnoButtonに色付きの枠線を付けることができます。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.red,
            ),
          ),
          child: CupertinoButton(
            child: Text("Button"),
            onPressed: () => print('Tapped!!'),
          ),
        ),
      ),
    );
  }