1. ホーム
  2. dart

[解決済み] TextFieldのBorder Colorを変更できない。

2022-07-27 22:21:17

質問

のボーダーの色を変えたいのですが、どうすればよいでしょうか? TextField を使用して BorderSide を使っていますが、うまくいきません。

以下は私のコードです。

new TextField(
  decoration: new InputDecoration(
    border: new OutlineInputBorder(
      borderSide: new BorderSide(color: Colors.teal)
    ),
    hintText: 'Tell us about yourself',
    helperText: 'Keep it short, this is just a demo.',
    labelText: 'Life story',
    prefixIcon: const Icon(Icons.person, color: Colors.green,),
    prefixText: ' ',
    suffixText: 'USD',
    suffixStyle: const TextStyle(color: Colors.green)),
  )
)

結果のスクリーンショットは以下のとおりです。

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

画面に設定されているデフォルトのテーマのため、変更されません。

なので、TextFieldを以下のようにラップして、描画しているウィジェット用に変更します。 new ThemeData()

child: new Theme(
          data: new ThemeData(
            primaryColor: Colors.redAccent,
            primaryColorDark: Colors.red,
          ),
          child: new TextField(
            decoration: new InputDecoration(
                border: new OutlineInputBorder(
                    borderSide: new BorderSide(color: Colors.teal)),
                hintText: 'Tell us about yourself',
                helperText: 'Keep it short, this is just a demo.',
                labelText: 'Life story',
                prefixIcon: const Icon(
                  Icons.person,
                  color: Colors.green,
                ),
                prefixText: ' ',
                suffixText: 'USD',
                suffixStyle: const TextStyle(color: Colors.green)),
          ),
        ));