1. ホーム
  2. dart

[解決済み] textFieldのアンダーラインの色を変更するには?

2022-11-23 21:12:21

質問

私はflutter & dartの両方について初心者です。現在、私の個人的なプロジェクトの1つでこれを使用しています。

私のフォームでは、textFieldの下線はすべて青色で表示されています。これを他の色に変えたいと思います。私が使用しているコード片は次のようなものです...

new TextField(
  controller: this._emailController,
  decoration: new InputDecoration(
      hintText: "Enter your email",
      labelText: "Email",
      labelStyle: new TextStyle(
          color: const Color(0xFF424242)
      )
  ),

),

どうすれば実現できるのかがわからない。

注:似たような質問がここにあることは知っています FlutterでTextFieldの下線を変更する . でも、そこでも完全には解決していません。また、もう一つ似たようなリンクがありました。 appcompat v7でEditTextの下線の色を変更する。 とありますが、これは私が使っているDART(flutter)ではなく、JAVAを使ったAndroidの開発に属するもので、私のAndroidアプリ開発には使われていません。だから、これらのリンクについて混乱しないようにしてください。

どのように解決するのですか?

** 以下のアップデートを参照してください。 GJJ2019 による回答を参照してください。 **

論理的な答えとしては、InputBorderを使うこと、特に 下線入力デコレータ を使い、それをボーダーとして inputdecorator に渡します。 しかし、これは、InputDecorator にアンダーラインを使うべきか、それともあなたが指定する他のものを使うべきかを伝えるだけです。

実際の色はテーマに基づいています - ソースから。

Color _getActiveColor(ThemeData themeData) {
  if (isFocused) {
    switch (themeData.brightness) {
      case Brightness.dark:
        return themeData.accentColor;
      case Brightness.light:
        return themeData.primaryColor;
    }
  }
  return themeData.hintColor;
}

というわけで、色を変えるには以下のようにします(あるいは、アプリケーション全体のテーマを指定します)。

new Theme(
  data: new ThemeData(
    primaryColor: Colors.red,
    accentColor: Colors.orange,
    hintColor: Colors.green
  ),
  child: new TextField(
    decoration: new InputDecoration(
      hintText: "Enter your email",
      labelText: "Email",
      labelStyle: new TextStyle(color: const Color(0xFF424242)),
      border: new UnderlineInputBorder(
        borderSide: new BorderSide(
          color: Colors.red
        )
      )
    ),
  ),
),

UPDATE

という方法でできるようになりました。 期待する にできるようになりました。

decoration: InputDecoration(        
  enabledBorder: UnderlineInputBorder(      
    borderSide: BorderSide(color: theColor),   
  ),  
  focusedBorder: UnderlineInputBorder(
    borderSide: BorderSide(color: theColor),
  ),
  border: UnderlineInputBorder(
    borderSide: BorderSide(color: theColor),
  ),
)