flutter 中表单输入字段上的重叠前导图标

Question

尝试在 flutter 中实现这种登录方式。 有任何想法吗？ 尝试使用前缀图标和行，但没有真正得到它。 登录图像示例

Answer 1

您可以使用带有两个孩子的Stack ，一个用于前导图标，另一个用于文本输入。 我写了你需要的代码来实现你想要的。 所以，我将与您分享。 您只需设置 colors 和您喜欢的文本样式。

这里我们 go...

 Column( children: <Widget>[ Stack( children: <Widget>[ Container( margin: EdgeInsets.symmetric(vertical: 6.0), height: 36.0, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(24.0), boxShadow: [BoxShadow(blurRadius: 12.0)], ), child: Padding( padding: EdgeInsets.fromLTRB(70.0, 0.0, 30.0, 0.0), child: TextFormField( decoration: InputDecoration( contentPadding: EdgeInsets.symmetric(vertical: 8.0), border: InputBorder.none, hintText: 'Username', ), ), ), ), Container( decoration: BoxDecoration( color: Colors.white, shape: BoxShape.circle, boxShadow: [BoxShadow(blurRadius: 12.0)], ), child: Padding( padding: EdgeInsets.all(12.0), child: Icon(Icons.person_outline), ), ), ], ), SizedBox(height: 12.0), Stack( children: <Widget>[ Container( margin: EdgeInsets.symmetric(vertical: 6.0), height: 36.0, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(24.0), boxShadow: [BoxShadow(blurRadius: 12.0)], ), child: Padding( padding: EdgeInsets.fromLTRB(70.0, 0.0, 30.0, 0.0), child: TextFormField( decoration: InputDecoration( contentPadding: EdgeInsets.symmetric(vertical: 8.0), border: InputBorder.none, hintText: 'Password', ), ), ), ), Container( decoration: BoxDecoration( color: Colors.white, shape: BoxShape.circle, boxShadow: [BoxShadow(blurRadius: 12.0)], ), child: Padding( padding: EdgeInsets.all(12.0), child: Icon(Icons.lock_outline), ), ), ], ), ], ),

output 是这样的：