[Flutter]enabledBorderでの入力時に文字列がズレる

結論から言うとすごい初歩的なミスでした。。。
enabledBorderを使用する時は、
入力時のフォーマットを[focusedBorder]で指定する必要があります。
 enabledBorder = 非フォーカス時の枠線フォーマット
 focusedBorder = フォーカス時の枠線フォーマット

ついでに・・・
今回TextFieldの枠線の色を変えるためにenabledBorderを使ったのですが、
フォーカス時の色はデフォルトの色がよかったのでfocusedBorder内で配色と幅を調整してみました。

borderSide: BorderSide(color: Color(0xFF2C98EF),width: 2),

作ったTextFieldの全体

TextField(
  controller: _searchController,
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.search_outlined),
    enabledBorder: const OutlineInputBorder(
      borderSide: BorderSide(color: Color(0xFF66A5AD)),
      borderRadius: const BorderRadius.all(
        const Radius.circular(40.0),
      ),
    ),
    focusedBorder: const OutlineInputBorder(
      borderSide: BorderSide(color: Color(0xFF2C98EF),width: 2),
      borderRadius: const BorderRadius.all(
        const Radius.circular(40.0),
      ),
    ),
    filled: true,
    fillColor: Colors.white70
  ),
),

投稿日

カテゴリー:

投稿者:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA