这就是我想做的:

在Flutter文本字段文档(https://flutter.io/text-input/)中,它说你可以通过将null传递给装饰来删除下划线。然而,这也摆脱了提示文本。

我不希望任何下划线文本字段是否集中。

更新:更新的接受答案,以反映截至2020年4月Flutter SDK的变化。


当前回答

decoration: InputDecoration(
 border:OutLineInputBorder(
 borderSide:BorderSide.none
 bordeRadius: BordeRadius.circular(20.0)
 )
)

其他回答

decoration: InputDecoration(
 border:OutLineInputBorder(
 borderSide:BorderSide.none
 bordeRadius: BordeRadius.circular(20.0)
 )
)

要在Flutter中删除TextField下划线,您可以简单地使用InputBorder.none。

TextField(
  decoration: InputDecoration(
    hintText: 'Hint Text',
    border: InputBorder.none,
  ),
)

TextField(样式:TextStyle(颜色:颜色。black45,fontSize: 18,decorationThickness: 0.0)))它显示没有下划线与decorationThickness:0.0。

要使一个无边界的TextFormField我发现下面的解决方案:

它没有使用容器。

TextFormField(
      decoration: InputDecoration(
          border: OutlineInputBorder(
                         borderRadius: BorderRadius.circular(15.0),
                         borderSide: BorderSide.none,
                            ),

           labelText: "Student email/id",
           floatingLabelStyle: const TextStyle(
                                    height: 4,
                                    color: Color.fromARGB(255, 160, 26, 179)),
                                
           filled: true,
           fillColor: Colors.grey[200],
           prefixIcon: const Icon(Icons.person),
                ),
           ),

样品通常:

当有输入错误时:

当用户输入:

试试下面的代码:

TextFormField(
  decoration: InputDecoration(
    border: OutlineInputBorder(borderSide: BorderSide.none, borderRadius: BorderRadius.circular(30.0)),
    hintText: "Search your trips",
    hintStyle: const TextStyle(color: Colors.white, fontWeight: FontWeight.w300),
    filled: true,
    fillColor: Colors.cyan[200],
    suffixIcon: IconButton(
      onPressed: () {},
      icon: const Icon(Icons.search, color: Colors.white),
    ),
  ),
),