Блог

Главная - Вопросы по программированию - Как изменить стиль TextFormField в теме в flutter

Как изменить стиль TextFormField в теме в flutter

#flutter

#flutter

Вопрос:

Кажется, я не могу понять, как стилизовать мои TextFormFields внутри моего файла темы. Исследование привело меня к классу inputDecorationTheme для достижения этой цели, но я не могу понять, как реализовать это в моем файле темы.

Код моего файла темы, с которым я работаю, выглядит следующим образом (обратите внимание на inputDecorationTheme :):

  final ThemeData base = ThemeData.light();
  return base.copyWith(

      inputDecorationTheme: InputDecorationTheme(border: ***InputBorder.borderSide***()),

      textTheme: _mainTextTheme(base.textTheme),
      primaryColor: Color(0xff666666),
      appBarTheme: _avoAppBar(base.appBarTheme),
      iconTheme: IconThemeData(color: Colors.black, size: 16.0),
      primaryIconTheme:
          const IconThemeData.fallback().copyWith(color: fontColor),
      elevatedButtonTheme: ElevatedButtonThemeData(
          style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(buttonColor),
        foregroundColor: MaterialStateProperty.all(Colors.white),
        minimumSize: MaterialStateProperty.all(Size(300, 50)),
      ))
      
      );

Ответ №1:

Пожалуйста, смотрите Ниже пару примеров того, как использовать InputDecorationTheme :

 var textColor = Colors.black;
var errorColor = Colors.red;
var primaryColor = Colors.blue;
var dividerColor = Colors.blueGrey;
var disabledColor = Colors.grey;

InputDecorationTheme(
  focusedErrorBorder: UnderlineInputBorder(
      borderSide: BorderSide(width: 0.7, color: errorColor)),
  focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(width: 0.5, color: primaryColor)),
  enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(width: 2.0, color: dividerColor)),
  border: UnderlineInputBorder(
      borderSide: BorderSide(width: 2.0, color: dividerColor)),
  disabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(width: 2.0, color: disabledColor)),
);

InputDecorationTheme(
  border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(28),
    borderSide: BorderSide(color: textColor),
  ),
);

Комментарии:

1. Большое спасибо! Это именно то, что мне было нужно. Это работает.

2. Пожалуйста, поставьте лайк и примите ответ, если он помог вам решить вашу проблему. Спасибо.

Ответ №2:

Попробуйте сделать это с помощью подзаголовка,

 theme: ThemeData( 
brightness: Brightness.dark,
 primaryColor: Colors.orange,
 accentColor: Colors.green,
 textTheme: TextTheme( 
subhead: TextStyle(color: Colors.blue),
 ), 
),

Или напрямую установить субтитры следующим образом,

 MaterialApp(
 theme: ThemeData(
 textTheme: TextTheme(
 subtitle1: TextStyle(fontSize: 50,
 fontWeight: FontWeight.bold),
 ),
 );

или
вы можете установить непосредственно для определенного textformfiled

 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: 'Enter Currency',
                helperText: 'User Currency',
                labelText: 'User Currency',
                prefixIcon: const Icon(
                  Icons.person,
                  color: Colors.green,
                ),
                prefixText: ' ',
                suffixText: 'USD',
                suffixStyle: const TextStyle(color: Colors.green)),
          ),
        ));

Комментарии:

1. Если я не был ясен в своем первоначальном сообщении, я пытаюсь оформить сами поля формы. Цвет границы, радиус границы и т.д. И я хочу сделать это в файле темы, чтобы мне не приходилось повторять шаги для каждого поля, которое я создаю. Я не пытаюсь стилизовать текст.

2. хорошо, для конкретного файла textformfiled я добавлю код.

Ответ №3:

Вот пример

 InputDecorationTheme inputDecorationTheme() {
  OutlineInputBorder outlineInputBorder = OutlineInputBorder(
    borderRadius: BorderRadius.circular(28),
    borderSide: BorderSide(color: kTextColor),
    gapPadding: 10,
  );
  return InputDecorationTheme(
    // If  you are using latest version of flutter then lable text and hint text shown like this
    // if you r using flutter less then 1.20.* then maybe this is not working properly
    // if we are define our floatingLabelBehavior in our theme then it's not applayed
    floatingLabelBehavior: FloatingLabelBehavior.always,
    contentPadding: EdgeInsets.symmetric(horizontal: 42, vertical: 20),
    enabledBorder: outlineInputBorder,
    focusedBorder: outlineInputBorder,
    border: outlineInputBorder,
  );
}