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

时间:2020-02-05 12:08:45

标签: flutter dart

我想要这个:

enter image description here

但我无法实现。

我尝试过:

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

但是结果如下:

enter image description here

Third screenshot.

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

1 个答案:

答案 0 :(得分:3)

您必须使用“行小部件的属性”来实现所需的输出。

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