How can I attach two Suffix Icon Button on TextFormField in Flutter?

Question

I want this:

but I can't implement it.

I tried:

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

But the result was as follows:

So, How can I attach two Suffix Icon Button on TextFormField in Flutter?

Answer 1

     decoration: InputDecoration(
                                      errorBorder: OutlineInputBorder(
                                          borderSide: const BorderSide(
                                              color: Colors.red),
                                          borderRadius:
                                              const BorderRadius.all(
                                                  Radius.circular(10))),
                                      labelText: "Confirm password",
                                      suffixIcon: IconButton(
                                        splashColor: Colors.transparent,
                                        highlightColor: Colors.transparent,
                                        icon: Icon(
                                          !controller.isObscureConfirm.value
                                              ? Icons.visibility_outlined
                                              : Icons.visibility_off_outlined,
                                          size: 26,
                                          color: ColorConstants.grayLight,
                                        ),
                                        onPressed: () {
                                          controller.isObscureConfirm.value =
                                              !controller
                                                  .isObscureConfirm.value;
                                        },
                                      ),
                                    ),

// change to :

Answer 2

You have to use Property of Row Widget To achieve your desire output.

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