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

導入

これ作りたい

CupertinoTextFieldの特性

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

・検索マークをつける

記事を書くきっかけ

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

CupertinoTextFieldの色を変える

三層に分けて考える。

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

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

BlendModeについて - Qiita

今度、Flutterの書籍を発売することになりました。いや、執筆することの大変さは噂で聞いていたけど、本当に辛かったです。その辺りの話は別に書くとして、ここでは、書籍に載せるには「需要が少なそう/カ…

qiita.com

そうすると、

にできる。

コード全文は以下。

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: 'ここに入力してね',
          ),
        ),
      ),
    );