flutter - 如何在 Flutter 的 TextFormField 上附加两个后缀图标按钮？

Question

我要这个：

但我无法实施。

我试过了：

TextFormField(
        decoration: InputDecoration(
            labelText: Strings.AuthPage.PASSWORD,
            hasFloatingPlaceholder: true,
            suffixIcon: Row(
              children: <Widget>[
            IconButton(
            icon: Icon(Icons.clear),
            ),
                IconButton(
                  icon: Icon(snapshot.data ? Icons.visibility : Icons.visibility_off),
                  onPressed: _authBloc.switchObscureTextMode,
                ),
              ],
            ),
        ),
        controller: passwordController,
        obscureText: snapshot.data,
      ),

但结果如下：

那么，如何在 Flutter 的 TextFormField 上附加两个后缀图标按钮？

标签： flutterdart

Answer 1

您必须使用行小部件的属性来实现您想要的输出。

TextFormField(
            decoration: InputDecoration(
              labelText: Strings.AuthPage.PASSWORD,
              hasFloatingPlaceholder: true,
              suffixIcon: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween, // added line
                mainAxisSize: MainAxisSize.min, // added line
                children: <Widget>[
                  IconButton(
                    icon: Icon(Icons.clear),
                  ),
                  IconButton(
                    icon: Icon(snapshot.data
                        ? Icons.visibility
                        : Icons.visibility_off),
                    onPressed: _authBloc.switchObscureTextMode,
                  ),
                ],
              ),
            ),
            controller: passwordController,
            obscureText: snapshot.data,
          ),