Flutter: Change Icon background color in text form field-CodePudding

I have this TextFormField wrapped in container for shadow effect. And input decoration for field styling. The icon background color and field background color are different.

I am not able to change the icon background color of the field.

I am trying to achieve

Please suggest a way to change the icon background color.

Here is the code

Container(
          margin: const EdgeInsets.all(24.0),
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(10.0),
            ),
            boxShadow: [
              BoxShadow(
                spreadRadius: 10.0,
                blurStyle: BlurStyle.outer,
                blurRadius: 4.0,
                color: Colors.black26,
              ),
            ],
          ),
          child: Material(
            child: TextFormField(
              maxLines: 1,
              decoration: InputDecoration(
                icon: Icon(
                  Icons.search,
                  size: 24.0,
                  color: Theme.of(context).primaryColor,
                ),
                isDense: true,
                hintText: 'Search',
                contentPadding: const EdgeInsets.symmetric(vertical: 8.0),
                fillColor: Theme.of(context).scaffoldBackgroundColor,
                filled: true,
                floatingLabelBehavior: FloatingLabelBehavior.never,
                focusedBorder: InputBorder.none,
                border: InputBorder.none,
              ),
              onFieldSubmitted: (text) {
                // Perform search
              },
            ),
          ),
        )

CodePudding user response：

Wrap the Icon with a Container and give it a color.

Container(
  color: Colors.red,
  child: Icon(
     Icons.search,
     size: 24.0,
     color: Theme.of(context).primaryColor,
  ),
)

CodePudding user response：

Why do you use Material ? I substitute that with a SizedBox :

Container(
      margin: const EdgeInsets.all(24.0),
      decoration: const BoxDecoration(
        color: Colors.transparent,       //Here can you set the background color of the icon
        borderRadius: BorderRadius.all(
          Radius.circular(10.0),
        ),
        boxShadow: [
          BoxShadow(
            spreadRadius: 10.0,
            blurStyle: BlurStyle.outer,
            blurRadius: 4.0,
            color: Colors.black26,
          ),
        ],
      ),
      child: SizedBox(                //Changed here 
        child: TextFormField(
          maxLines: 1,
          decoration: InputDecoration(
            icon: Icon(
              Icons.search,
              size: 24.0,
              color: Colors.black,
            ),
            isDense: true,
            hintText: 'Search',
            contentPadding: const EdgeInsets.symmetric(vertical: 8.0),
            fillColor: Theme.of(context).scaffoldBackgroundColor,
            filled: true,
            floatingLabelBehavior: FloatingLabelBehavior.never,
            focusedBorder: InputBorder.none,
            border: InputBorder.none,
          ),
          onFieldSubmitted: (text) {
            // Perform search
          },
        ),
      ),
    ),

I add comments in the code to explain.

This is the result: