Flutter 自定义文本字段

Question

我想在 Flutter 中创建一个自定义文本字段，如图所示。边框线中间带有标签和图标的轮廓化 TextField 边框。 有没有办法创建这样的TextField？

提前致谢。

Answer 1

你可以使用stack来实现UI

Stack(
       children: [
         TextFormField(
           ...apply the border here
         ),
         Positioned(
           left: 16.0,
           top: 5.0,
           child: Container(
             padding: EdgeInsets.all(5.0),
             color: AppColors.whiteColor,
             child: Row(
               children: [
                 Image.asset(your_image),
                 Text("Name")
               ],
             ),
           ),
         ),
         
       ],
    );