文本字段内的嵌入式平面按钮

Posted 2021-04-05

试图在文本格式字段中添加平面按钮，下面是当前字段实现的代码，

TextFormField(
                      textAlign: TextAlign.left,
                      obscureText: true,
                      cursorColor: Colors.white,
                      onChanged: (value) {
                        //Do something with the user input.
                        password = value;
                      },
                      style: TextStyle(color: Colors.white),
                      decoration: InputDecoration(
                        icon: Icon(Icons.help, color: Colors.white, ),
//                        contentPadding: EdgeInsets.fromLTRB(20, 20, 20, 20),
                        labelText: 'Enter your password',
                        labelStyle: TextStyle(color: Colors.white),
                        focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.white)),
                        enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.white)),
                      ),
                    ),

有人可以根据上面的屏幕快照协助添加它。

答案

只需在suffixIcon实现中添加InputDecoration属性，然后将FlatButton小部件传递给它。下面的示例代码：

decoration: InputDecoration(
                  icon: Icon(Icons.help, color: Colors.black, ),
//                        contentPadding: EdgeInsets.fromLTRB(20, 20, 20, 20),
                  labelText: 'Enter your password',
                  labelStyle: TextStyle(color: Colors.black),
                  focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.black)),
                  enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.black)),
                    suffixIcon: FlatButton(
                      child: Text('Need Help?'),
                      onPressed: () {},
                    )
                ),