[Flutter]CupertinoButtonに枠線(border)をつけるには？

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

CupertinoButtonに枠線をつける方法を紹介します。

方法
使用例

方法

CuopertinoButtonに枠線をつけるには、Containerを使います。

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

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

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

Container(
  decoration: BoxDecoration(
    border: Border.all( ),
  ),
  child: CupertinoButton(
    child: Text('Button'),
    onPressed: () {
      //処理
    },
  ),
),

Containerを使えば、CupertinoButtonに枠線をつけることができます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.blue, //色
                width: 2, //太さ
              ),
            ),
            child: CupertinoButton(
              child: Text('Button'),
              onPressed: () {
                print('Tap');
              },
            ),
          ),
        ),
      ),
    );
  }