Как я делаю TextFormField во флаттере? Нравится

Question

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

Я не хотел этого:

Answer 1

Если я понял ваш вопрос, вы хотите что-то вроде этого:

В этом случае вы достигнете этого, используя контейнер с декором и столбец у которого есть Text и, конечно, TextFromField, например:

  Container(
   padding: EdgeInsets.all(8),
   decoration: new BoxDecoration(
     border: new Border.all(
        color: Colors.black,
        width: 1.0,
        style: BorderStyle.solid
      ),
     borderRadius: BorderRadius.circular(8.0),
   ),
   child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text("Label", style: TextStyle(color: Colors.black54),),
        TextFormField(
          decoration: const InputDecoration(
            suffixIcon: Icon(Icons.remove_red_eye),
            hintText: "Input text",
            // if you want to remove bottom border that changes color when field gains focus
            // then uncomment the line bellow
            // border: InputBorder.none, 
          )
        )
      ]
     )
  )

Не самое короткое решение ... но оно выполняет свою работу.

Answer 2

Вы можете использовать так:

  Form(
        key: _formKey,
        child: ListView(
          //physics: const NeverScrollableScrollPhysics(),
          children: <Widget>[
            Center(
              child: Text(
                'Token',
                style: TextStyle(fontSize: 36, fontWeight: FontWeight.w300),
              ),
            ),
            Container(
              height: 40,
            ),
            TextFormField(
              style: textStyle,
              controller: authControllername,
              // ignore: missing_return
              validator: (String value) {
                if (value.isEmpty) {
                  return 'Please enter name';
                }
              },
              decoration: InputDecoration(
                  labelText: 'Name',
                  hintText: 'Enter name',
                  labelStyle: textStyle,
                  errorStyle: TextStyle(color: Colors.red, fontSize: 14.0),
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(5.0))),
            ),
            Container(
              height: 20,
            ),
            TextFormField(
              style: textStyle,
              controller: authController,
              validator: (String value) {
                if (value.isEmpty) {
                  return 'Please enter OAuth token';
                }
              },
              decoration: InputDecoration(
                  labelText: 'OAuth token',
                  hintText: 'Enter OAuth token',
                  labelStyle: textStyle,
                  errorStyle: TextStyle(color: Colors.red, fontSize: 14.0),
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(5.0))),
            ),

          ],
        ),
      ),