Фоновая форма текстового поля и всплывающая подсказка во флаттере - PullRequest
Новая
       6

Фоновая форма текстового поля и всплывающая подсказка во флаттере

0 голосов
/ 06 января 2020

У меня есть TextFormField с формой фона, как показано на рисунке. Но проблема, с которой я сталкиваюсь, заключается в том, что подсказка плавает поверх поля, потому что я использовал активированную границу (OutlineInputBorder), чтобы обеспечить форму и цвет bg.

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

new Theme(
  data: new ThemeData(
    primaryColor: Colors.green,
  ),
  child: new TextFormField(
    style: new TextStyle(
      color: Color(0xff651515),
    ),
    autofocus: false,
    obscureText: false,
    controller: date_picker,
    decoration: InputDecoration(
      suffixIcon: new Image.asset(
        'assets/calendar_ic.png',
      ),
      enabledBorder: new OutlineInputBorder(
        borderSide: BorderSide(color: Colors.black38),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10),
          bottomLeft: Radius.circular(10),
          bottomRight: Radius.circular(10),
          topRight: Radius.circular(0)),
      ),
      filled: true,
      fillColor: Colors.black12,
      labelText: TextDisplayConstants.ENTER_DATE,
      labelStyle: TextStyle(
        color: Colors.black45,
        fontSize: 14,
      ),
    ),
  ),
),

https://i.stack.imgur.com/Qh4ie.png Изображение для справки

https://i.stack.imgur.com/zocff.png Мой результат

1 Ответ

0 голосов
/ 07 января 2020

Наконец-то получили решение, как и ожидалось, используя следующий код: 

                Material(
                  color: Color(0xFFF8F8F8),
                  shape: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.transparent),
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(10),
                        bottomLeft: Radius.circular(10),
                        bottomRight: Radius.circular(10),
                        topRight: Radius.circular(0)),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(15, 0, 0, 0),
                    child: FormBuilderDropdown(
                      isExpanded: false,
                      decoration: InputDecoration(
                        labelText: TextDisplayConstants.SELECT_SUBJECT,
                        labelStyle: TextStyle(
                            fontFamily: 'BasisGrotesquePro',
                            fontWeight: FontWeight.w200,
                            color: Color(0xffb7b7b7)),
                        suffixIcon: new Image.asset(
                          'assets/subject_ic.png',
                        ),
                        hintStyle: new TextStyle(color: Colors.grey),
                        border: InputBorder.none,
                      ),
                      initialValue: _subjectList[0],
                      onChanged: (val) {
                        model.subject = val.id;
                      },
                      validators: [FormBuilderValidators.required()],
                      items: _subjectList.map((SubjectResponse subject) {
                        return new DropdownMenuItem<SubjectResponse>(
                          value: subject,
                          child: new Text(
                            subject.subject,
                            style: new TextStyle(
                              fontFamily: 'BasisGrotesquePro',
                              fontWeight: FontWeight.w400,
                              color: Color(0xff651515),
                            ),
                          ),
                        );
                      }).toList(),
                    ),
                  ),
                ),

Спасибо всем, кто откликнулся. Если кому-то поможет это решение, я с удовольствием ...

...