flutter - 文本格式字段中的内联平面按钮

Question

尝试在textform字段中添加一个flatbutton，以下是当前字段实现的代码，

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

有人可以协助您按照上述屏幕截图添加此内容。

Answer 1

只需在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: () {},
                    )
                ),