【Flutter】TextFieldデザイン集

はじめに

FlutterのTextField（入力欄）のデザイン集・サンプル集を作りました。
よかったらコピペして使ってください。
(随時更新していきます。)

デザイン集

デザイン①

通常時

フォーカス時

コード

textField_1.dart

SizedBox(
  // 入力欄横幅
  width: MediaQuery.of(context).size.width * 0.7,
  // 入力欄高さ
  height: 48,
  child: const TextField(
    decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(4.0)),
      ),
    ),
  ),
),

• 最もシンプルな入力欄です。これをベースに色々とデコレーションしていきます。

デザイン②

通常時

フォーカス時

コード

textField_2.dart

SizedBox(
  // 入力欄横幅
  width: MediaQuery.of(context).size.width * 0.7,
  child: const TextField(
    decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(4.0)),
      ),
      icon: Icon(Icons.person),
      labelText: '名前',
    ),
  ),
),

• 入力欄横にアイコン追加
• ラベルも付与

デザイン③

通常時

フォーカス時

コード

textField_3.dart

SizedBox(
  // 入力欄横幅
  width: MediaQuery.of(context).size.width * 0.7,
  child: TextField(
    // テキストを見えないようにする
    obscureText: true,
    decoration: InputDecoration(
      // 枠線なし
      border: InputBorder.none,
      fillColor: Colors.blue[100],
      filled: true,
      prefixIcon: const Icon(Icons.lock, color: Colors.blue),
      suffixIcon: const Icon(Icons.visibility_off),
      labelText: 'パスワード',
    ),
  ),
),

• 入力したものの表示/非表示は、目のアイコンタップ時にobscureTextの値とアイコンそのものを切り替える必要がある

デザイン④

通常時

フォーカス時

コード

textField_4.dart

SizedBox(
  // 入力欄横幅
  width: MediaQuery.of(context).size.width * 0.7,
  child: TextField(
    decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(30.0),
      ),
      prefixIcon: IconButton(
        icon: const Icon(Icons.emoji_emotions),
        onPressed: () {},
      ),
      suffixIcon: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        mainAxisSize: MainAxisSize.min,
        children: [
          IconButton(
            icon: const Icon(Icons.attach_file),
            onPressed: () {},
          ),
          IconButton(
            icon: const Icon(Icons.camera_alt),
            onPressed: () {},
          ),
        ],
      ),
      labelText: 'メッセージ',
    ),
  ),
),

• SNSのメッセージ入力欄をイメージ

デザイン⑤

通常時

フォーカス時

コード

textField_5.dart

SizedBox(
  // 入力欄横幅
  width: MediaQuery.of(context).size.width * 0.7,
  // 入力欄高さ
  height: 48,
  child: Container(
    padding: const EdgeInsets.all(12),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(30.0),
      boxShadow: [
        const BoxShadow(color: Colors.grey),
        BoxShadow(
          color: Colors.grey.shade100, // 影の色
          offset: const Offset(-5, -5), // 影の位置
          blurRadius: 10, // 影のぼかし半径
          spreadRadius: -1, // 影の拡散半径
        ),
        const BoxShadow(
          color: Colors.white, // 影の色
          offset: Offset(5, 5), // 影の位置
          blurRadius: 10, // 影のぼかし半径
          spreadRadius: -1, // 影の拡散半径
        ),
      ],
    ),
    child: const TextField(
      cursorColor: Colors.grey, // カーソルの色
      decoration: InputDecoration(
        border: InputBorder.none,
        prefixIcon: Icon(Icons.search, color: Colors.grey),
      ),
    ),
  ),
),

• Nuemorphismを踏襲

(その他デザインは随時追加予定)
(最後にソッといいねボタンやバッジを贈るボタンを押して頂けたら幸いですm(_ _)m)