【Flutter】非活性CupertinoTextFieldの色とマークを変える

導入

これ作りたい

CupertinoTextFieldの特性

・入力の可不を設定できる
・入力できない時の色は基本的に変えられない
(↑今回はこれをゴリ押しで変える。)

・検索マークをつける

記事を書くきっかけ

・TextField押下時に違う画面に遷移させたい
・一発でできそうな方法が無かった
・iOSっぽく角丸で扱いたかった

CupertinoTextFieldの色を変える

三層に分けて考える。

・そもそものベースのview
->CupertinoTextFieldを入れる色を決めるコンテナ
->CupertinoTextField

コンテナをCupertinoTextFieldでくり抜く(BlendMode.dstIn)
参考はこちら

そうすると、

にできる。

コード全文は以下。

Material(
      shape: RoundedRectangleBorder(
        // そもそものviewを丸くする
        borderRadius: BorderRadius.circular(10),
      ),
      // 押下時にイベントを発生させるためにInkWellを使う
      child: InkWell(
        onTap: () {},
        // TextFieldを入れるコンテナを作成
        child: Container(
          decoration: BoxDecoration(
            // コンテナも同様に丸くする。
            borderRadius: BorderRadius.circular(10),
            // あたかも有効に見える色を設定する。
            color: Colors.gray,
          ),
          child: CupertinoTextField(
            readOnly: true,
            autofocus: false,
            enabled: false,
            decoration: BoxDecoration(
              // 丸くする。
              borderRadius: BorderRadius.circular(10),
              // くり抜くviewの色は無色にしておく
              color: Colors.transparent, // 背景色
              // コンテナと重なっている箇所だけ表示する。
              backgroundBlendMode: BlendMode.dstIn,
            ),
            prefix: Icon.search,
            placeholder: 'ここに入力してね',
          ),
        ),
      ),
    );

まとめ

重ねたものに対して何かをするってのが簡単にできるのいいですね。
以下の記事にとても助けられました。

最後に

iOSアプリ開発をしています。
主にSwiftですが、最近は熱が入ってきてFlutterも🦾
色々やってます。もし良かったら見てってください。