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

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