Блог

Я новичок в flutter.

Я создаю форму регистрации пользователя, я хочу добиться следующего визуального эффекта:

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

Но я хочу следующее, когда текстовое поле находится в «фокусе». Когда пользователь вводит текст, это выглядит следующим образом:

Это мое обычное текстовое поле

 TextFormField(
                                    initialValue: name,
                                    onChanged: (val) {
                                      setState(() {
                                        name = val;
                                        print(name);
                                      });
                                    },
                                    decoration: InputDecoration(
                                      hintText: "Nombres",
                                      hintStyle: TextStyle(
                                          fontSize: scalador.setSp(22) * 2.63,
                                          color: Color(0xFF949494)),
                                    ),
                                    style: TextStyle(
                                      color: Color(0xFF242427),
                                      fontSize: scalador.setSp(22) * 2.63,
                                    ),
                                    validator: (value) {
                                      if (value.isEmpty) {
                                        return 'Por favor ingrese su(s) Nombre(s)';
                                      } else {
                                        if (value.length < 4)
                                          return 'El nombre debe tener mas de 4 caracteres';
                                      }
                                      return null;
                                    }),
  

есть идеи?

добавьте labelText: 'Nombres', свойство в InputDecoration :

 decoration: InputDecoration(
                                  hintText: "Nombres",
                                  hintStyle: TextStyle(
                                      fontSize: scalador.setSp(22) * 2.63,
                                      color: Color(0xFF949494)),
                                ),
                                 labelText: 'Nombres',
                             )
  

источник :https://api.flutter.dev/flutter/material/TextFormField-class.html

Чтобы добавить желаемое текстовое поле в разделе «фокус», вам нужно будет указать несколько вещей. Для начала вам понадобится LabelText, который будет установлен в строку по вашему выбору. В вашем случае это, вероятно, было бы: LabelText: «Nombres». Далее вам понадобится enabledBorder: который вы можете назначить OutlineInputBorder (в котором вы можете указать радиус границы, сторону границы (цвет)) по своему вкусу. Как только у вас появится enabledBorder для случаев, когда пользователь не имеет его в «фокусе», вам понадобится focusedBorder: в котором вы снова назначите OutlineInputBorder() аналогично enabledBorder . Наконец, вам понадобится border: в котором вы можете задать ему OutlineInputBorder (и желаемый borderRadius внутри).

Это пример для вашей справки

 Padding(
  padding: EdgeInsets.all(10),
  child: new TextFormField(
    decoration: new InputDecoration(
      labelText: "Name",
      labelStyle: TextStyle(
        color: Color(0xFF264653),
      ),
      fillColor: Colors.white,
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(25.0),
        borderSide: BorderSide(
          color: Color(0xFF264653),
        ),
      ),
      focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(25.0),
          borderSide: BorderSide(color: Color(0xFF264653))),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(25.0),
      ),
    ),
  ),
),
  

В зависимости от того, что вы будете делать, я рекомендую ознакомиться с этой статьей: https://medium.com/swlh/working-with-forms-in-flutter-a176cca9449a и / или
https://medium.com/@mahmudahsan/how-to-create-validate-and-save-form-in-flutter-e80b4d2a70a4