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

Question

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

Answer 1

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

我们开始...

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

输出是这样的：