Невозможно изменить цвет границы текстового поля

Я пытаюсь изменить цвет границы моего 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)),
  )
)

Снимок экрана с результатом показан ниже.

Невозможно изменить цвет границы текстового поля

dart flutter
01.05.2018 21:09
98
0
123 452
11
Перейти к ответу Данный вопрос помечен как решенный

Ответы 11

Ответ принят как подходящий

Это не меняется из-за того, что для экрана задана тема по умолчанию.

Так что просто измените их для виджета, который вы рисуете, заключив текстовое поле в новые 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)),
          ),
        ));

Вы уже можете увидеть его работу в действии. Это просто цвет темы для вашего виджета экрана, который не переопределяется

— Napolean 02.05.2018 07:55

Не работает из-за настроек ThemeData ... спас мой день, спасибо.

— noveleven 27.05.2021 10:14
01.05.2018 23:10

Код, в котором вы меняете цвет primaryColor и primaryColorDark, не изменяет начальный цвет границы, только после касания цвет остается черным.

Атрибут, который необходимо изменить, - hintColor.

BorderSide не следует использовать для этого, вам нужно изменить тему.

Чтобы сделать красный цвет по умолчанию для помещения темы в MaterialApp(theme: ...) и изменить тему определенного виджета, например, изменить красный цвет по умолчанию на желтый цвет виджета, виджет будет окружен:

new Theme(
  data: new ThemeData(
    hintColor: Colors.yellow
  ),
  child: ...
)

Ниже код и гифка:

Обратите внимание, что если мы определяем цвет primaryColor как черный, при нажатии на виджет он выбирается с черным цветом.

Но чтобы изменить метку и текст внутри виджета, нам нужно установить тему InputDecorationTheme.

Виджет, который начинается с желтого цвета, имеет свою собственную тему, а виджет, который начинается с красного цвета, имеет тему по умолчанию, определенную с помощью функции buildTheme().

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

ThemeData buildTheme() {
  final ThemeData base = ThemeData();
  return base.copyWith(
    hintColor: Colors.red,
    primaryColor: Colors.black,
    inputDecorationTheme: InputDecorationTheme(
      hintStyle: TextStyle(
        color: Colors.blue,
      ),
      labelStyle: TextStyle(
        color: Colors.green,
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: buildTheme(),
      home: new HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String xp = '0';

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      body: new Container(
        padding: new EdgeInsets.only(top: 16.0),
        child: new ListView(
          children: <Widget>[
            new InkWell(
              onTap: () {},
              child: new Theme(
                data: new ThemeData(
                  hintColor: Colors.yellow
                ),
                child: new TextField(
                  decoration: new InputDecoration(
                      border: new OutlineInputBorder(),
                      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)),
                )
              )
            ),
            new InkWell(
              onTap: () {},                
              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)),
              )
            )
          ],
        ),
      )
    );
  }
}

Ответ Дженни Теуниссен (в настоящее время ниже этого) является самым свежим ответом.

— sevensevens 23.04.2020 05:49
15.05.2018 15:48

Новый способ сделать это - использовать enabledBorder следующим образом:

new TextField(
  decoration: new InputDecoration(
    enabledBorder: const OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.grey, width: 0.0),
    ),
    focusedBorder: ...
    border: ...
  ),
)

Чем отличается enabledBorder от границы?

— stuckedoverflow 27.11.2018 11:38

@stuckedoverflow. Интуиция подсказывает, что border должен действовать как значение по умолчанию, когда enabledBorder, disabledBorder, focusedBorder, errorBorder или focusedErrorBorder опущены в обстоятельствах, когда используется любая из этих границ. Однако не похоже, что метод сборки InputDecorator вообще ссылается на border. Либо у него есть варианты использования вне InputDecorator, либо это ошибка (поскольку поле, которое фактически никогда не используется).

— Abion47 17.07.2020 23:08

@ Abion47 Свойство border охватывает все 5 случаев, как и следовало ожидать, например, вы можете установить borderRadius, и это повлияет на все случаи. Однако именно InputBorder.borderSide необходимо переопределять индивидуально. Док: api.flutter.dev/flutter/material/InputDecoration/border.html

— user1032613 19.09.2020 05:50
18.10.2018 13:22

Ну, я действительно не знаю, почему цвет, назначенный границе, не работает. Но вы можете управлять цветом границы, используя другие свойства границы текстового поля. Они есть:

  1. disabledBorder: активируется, если для параметра enabled установлено значение false
  2. enabledBorder: активируется, если для параметра enabled установлено значение true (по умолчанию свойство enabled для TextField имеет значение true)
  3. errorBorder: активируется, когда есть какая-то ошибка (например, неудачная проверка)
  4. focusBorder: активируется, когда мы щелкаем / фокусируемся на TextField.
  5. focusErrorBorder: активируется при возникновении ошибки, и в настоящее время мы сосредоточены на этом текстовом поле.

Фрагмент кода приведен ниже:

TextField(
 enabled: false, // to trigger disabledBorder
 decoration: InputDecoration(
   filled: true,
   fillColor: Color(0xFFF2F2F2),
   focusedBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.red),
   ),
   disabledBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.orange),
   ),
   enabledBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.green),
   ),
   border: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,)
   ),
   errorBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.black)
   ),
   focusedErrorBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.yellowAccent)
   ),
   hintText: "HintText",
   hintStyle: TextStyle(fontSize: 16,color: Color(0xFFB3B1B1)),
   errorText: snapshot.error,
 ),
 controller: _passwordController,
 onChanged: _authenticationFormBloc.onPasswordChanged,
                            obscureText: false,
),

disabledBorder:

disabledBorder

enabledBorder:

enabledBorder

focusBorder:

focusedBorder

errorBorder:

errorBorder

errorFocusedBorder:

errorFocusedBorder

Надеюсь, это поможет тебе.

07.06.2019 08:26 
enabledBorder: OutlineInputBorder(
  borderRadius: BorderRadius.circular(10.0),
  borderSide: BorderSide(color: Colors.red)
),
07.06.2019 11:05

  1. Внутри вашего файла lib

  2. Создайте папку с именем colors.

  3. Внутри папки colors создайте файл дротика и назовите его color.

  4. Вставьте этот код внутрь

    const MaterialColor primaryOrange = MaterialColor(
    _orangePrimaryValue,
    <int, Color>{
        50: Color(0xFFFF9480),
        100: Color(0xFFFF9480),
        200: Color(0xFFFF9480),
        300: Color(0xFFFF9480),
        400: Color(0xFFFF9480),
        500: Color(0xFFFF9480),
        600: Color(0xFFFF9480),
        700: Color(0xFFFF9480),
        800: Color(0xFFFF9480),
        900: Color(0xFFFF9480),
    },
);
const int _orangePrimaryValue = 0xFFFF9480;

  5. Перейдите в свой файл main.dart и поместите этот код в свою тему.

    theme:ThemeData(
    primarySwatch: primaryOrange,
),

  6. Импортируйте папку color в ваш main.dart, как этот import 'colors/colors.dart';

17.01.2020 11:58

Лучшее и наиболее эффективное решение - просто добавить тему в свой основной класс и добавить такое оформление ввода.

theme: ThemeData(
    inputDecorationTheme: InputDecorationTheme(
        border: OutlineInputBorder(
           borderSide: BorderSide(color: Colors.pink)
        )
    ),
)
09.05.2020 13:52

Мы пробовали настраиваемое окно поиска с вставленным фрагментом. Этот код будет полезен для всех видов декораций TextFiled во Flutter. Надеюсь, этот фрагмент будет полезен другим.

Container(
        margin: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
        child:  new Theme(
          data: new ThemeData(
           hintColor: Colors.white,
            primaryColor: Colors.white,
            primaryColorDark: Colors.white,
          ),
          child:Padding(
          padding: EdgeInsets.all(10.0),
          child: TextField(
            style: TextStyle(color: Colors.white),
            onChanged: (value) {
              filterSearchResults(value);
            },
            controller: editingController,
            decoration: InputDecoration(
                labelText: "Search",
                hintText: "Search",
                prefixIcon: Icon(Icons.search,color: Colors.white,),
                enabled: true,
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                    borderRadius: BorderRadius.all(Radius.circular(25.0))),
                border: OutlineInputBorder(
                    borderSide: const BorderSide(color: Colors.white, width: 0.0),
                    borderRadius: BorderRadius.all(Radius.circular(25.0)))),
          ),
        ),
        ),
      ),
19.10.2020 16:31 
Padding(
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
            child: TextField(
              cursorColor: Color.fromRGBO(25, 118, 218, 1),
              decoration: new InputDecoration(
                border: new OutlineInputBorder(
                  borderSide:
                      new BorderSide(color: Color.fromRGBO(25, 118, 218, 1)),
                ),
                focusedBorder: new OutlineInputBorder(
                  borderSide:
                      new BorderSide(color: Color.fromRGBO(25, 118, 218, 1)),
                ),
                labelText: "Edit Phone",
                labelStyle: TextStyle(
                  color: Colors.grey,
                ),
                prefixIcon: const Icon(
                  Icons.phone_outlined,
                  color: Color.fromRGBO(25, 118, 218, 1),
                ),
              ),
            ),
          ),

Thank me later :)

21.05.2021 20:11

Вы можете использовать этот код как для нижних листов, так и для обычных текстовых полей:

class TextFieldForDropDown extends StatelessWidget {
      final String title;
      final String hintText;
      final TextEditingController textEditingController;
      bool isPassword;
      final Function onTap;
      final bool enable;
      TextFieldForDropDown({this.title, this.hintText, this.textEditingController, this.isPassword = false, this.onTap, this.enable});
      @override
      Widget build(BuildContext context) {
    
        var titleTextStyle = TextStyle(
          color: Color(0xff9098C8),
          fontSize: 12,
          fontWeight: FontWeight.w400,
          fontFamily: "Muli",
        );
    
        var textFieldTextStyle = TextStyle(
          color: Colors.white,
          fontSize: 14,
          fontWeight: FontWeight.w400,
          fontFamily: "Muli",
        );
    
        var borderSides = OutlineInputBorder(borderSide: new BorderSide(color: Color(0xff38406B)));
        var borderSides1 = OutlineInputBorder(borderSide: new BorderSide(color: Color(0xffdae4ff)));
    
        return InkWell(
          onTap: onTap,
          child: Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(this.title, style: titleTextStyle),
                SizedBox(height: 8),
                TextFormField(
                  enabled: enable,
                  // onTap: onTap,
                  obscureText: isPassword,
                  style: textFieldTextStyle,
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
                    hintText: this.hintText,
                    hintStyle: titleTextStyle,
                    border: textEditingController.text != "" ? borderSides1 :borderSides,
                    enabledBorder:  textEditingController.text != "" ? borderSides1 :borderSides,
                    disabledBorder: textEditingController.text != "" ? borderSides1 :borderSides,
                    focusedBorder: OutlineInputBorder(borderSide: new BorderSide(color: Color(0xffdae4ff))),
                  ),
                  controller: textEditingController,
                )
              ],
            ),
          ),
        );
      }
    }

и используйте вот так:

TextFieldForDropDown(
                                title: 'Phone Number*',
                                hintText: '+123-22-223-00',
                                textEditingController: viewModel.phoneController,
                              ),

Привет! Можете ли вы объяснить свой код и выделить важные части? Ответы, которые представляют собой всего лишь код, обычно не очень помогают людям.

— Max 02.06.2021 09:59

в InputDecoration текстового поля вы можете изменить цвет границы с помощью условий, как это сделал я.

— Jawad Abbasi 04.06.2021 13:48
02.06.2021 09:23 
TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(4.0)),
      borderSide: BorderSide(width: 1.0),
    ),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.grey),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.blueGrey),
    ),
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.redAccent),
    ),
    focusedErrorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.orangeAccent),
    ),
    disabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.white),
    ),
    contentPadding: EdgeInsets.all(10.0),
    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),
  ),
),
03.06.2021 03:55

Другие вопросы по теме

Как создавать ячейки разных размеров с помощью GridView во Flutter?
Зависимость мешает сборке приложений для Android во Flutter
Android Studio Flutter не может скомпилироваться в iOS
Flutter: неудачное утверждение при использовании navigator.dart
Получите высоту виджета, используя его GlobalKey во флаттере
Flutter: как принудительно перезапустить приложение (в производственном режиме)?
Конструктор List Storing выдает ошибку в Dart
Как получить MAC-адрес точки доступа с помощью флаттера
BottomNavigationBar с 5 элементами
Flutter_Console каждая команда просто зависает и ничего не возвращает

Похожие вопросы

Зависимость мешает сборке приложений для Android во Flutter
Как записать экземпляр ByteData в файл в Dart?
Flutter: неудачное утверждение при использовании navigator.dart
Получите высоту виджета, используя его GlobalKey во флаттере
Конструктор List Storing выдает ошибку в Dart
Почему определенные переменные помечены как окончательные в пользовательских классах flutter?
Можно ли вернуть объект onComplete, отличный от того, что испускает Stream?
Как изменить кнопку действия для ввода текста (клавишу возврата / ввода) на клавиатуре во Flutter?
Как создать сервис во Flutter, чтобы приложение всегда работало в фоновом режиме?
Flutter: как выполнить действие только при нажатии на уведомление с помощью local_notification?