我如何在颤动中做 TextFormField？像这样答案

【问题标题】：How I do the TextFormField in flutter? Like this我如何在颤动中做 TextFormField？像这样
【发布时间】：2020-06-22 20:41:06
【问题描述】：

不用担心图标，但重要的是当 TextFormField 获得焦点时，标签内轮廓边框。

我不想这样：

【问题讨论】：

你的问题不清楚。请更好地描述它

标签： android ios flutter mobile

【解决方案1】：

如果我理解你的问题，你想要这样的东西：

在这种情况下，您可以通过使用带有装饰的 Container 和一个包含 Text 以及 TextFromField 的 Column 来实现这一点，如下所示：

  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, 
          )
        )
      ]
     )
  )

不是最短的解决方案……但它可以完成工作。

【讨论】：

【解决方案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))),
            ),

          ],
        ),
      ),

【讨论】：