FlutterのTextFieldのデザインを自由自在に変更する

はじめに

Flutterでテキスト入力をさせる場合、TextField（もしくはTextFormField）を使用しますが、OutlineInputBorderを使用するとPaddingがかなり大きめに取られてしまい、contentPaddingにEdgeInsets.zeroを指定してもPaddingは消えてくれません。

そこで、**InputDecoration.collapsed**を使うことでPaddingを無くし、Containerでラップしてデザインする方法を考えました。
InputDecoration.collapsedはサイズが入力フィールドと同じになり（Paddingが0）、出来る装飾が限られます。

元になるTextField

TextField(
  controller: _textController,
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.grey,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(4),
      borderSide: const BorderSide(
        width: 0,
        style: BorderStyle.none,
      ),
    ),
    prefixIcon: const Icon(Icons.search),
    hintText: '検索',
  ),
)

今回は、枠線なしで縁は丸くします。

Containerでデザインする

Container(
  padding: const EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.grey,
    borderRadius: BorderRadius.circular(4),
  ),
  child: Row(
    children: <Widget>[
      const Icon(Icons.search),
      const Padding(padding: EdgeInsets.only(right: 8)),
      Expanded(
        child:TextField(
          decoration: const InputDecoration.collapsed(
            hintText: '検索',
            border: OutlineInputBorder(
              borderSide: BorderSide(
                width: 0,
                style: BorderStyle.none,
              ),
            ),
          ),
        ),
      ),
    ],
  ),
)

filledやfillColorはContainerで行うので消します。
InputDecoration.collapsedではprefixIconを付けることができないので、RowでIconとTextFieldを横に並べます。また、アイコンが近すぎるのでPaddingで調整します。
TextFieldは Expandedでラップしないとダメです。

とりあえずこれで好きなデザインに出来るようにはなりましたが、Container部分やIcon部分をタップしてもTextFieldにフォーカスが移らないため、めちゃくちゃ押しにくくなってしまいました。
なので、さらにGestureDetectorでラップしてonTapでフォーカスを渡すようにします。

#最終的なコード

GestureDetector(
  onTap: () => _focusNode.requestFocus(),
  child: Container(
    padding: const EdgeInsets.all(10),
    decoration: BoxDecoration(
      color: Colors.grey,
      borderRadius: BorderRadius.circular(4),
    ),
    child: Row(
      children: <Widget>[
        const Icon(Icons.search),
        const Padding(padding: EdgeInsets.only(right: 8)),
        Expanded(
          child:TextField(
            focusNode: _focusNode,
            decoration: const InputDecoration.collapsed(
              hintText: '検索',
              border: OutlineInputBorder(
                borderSide: BorderSide(
                  width: 0,
                  style: BorderStyle.none,
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  ),
);

だいぶコードが長くなってしまったので、StatelessWidgetなどにして使いまわしやすいようにしたほうが良いかもしれないですね。