Style Flutter Autocomplete match TextFormField widget visually?

Question

I am having issues styling my Autocomplete widget to match and fit in with my TextFormField Widget:

I have a couple of issues:

Cant get hint text to show up

Icon looks like it has some invisible padding on it on the left side

          TextFormField(
        controller: manufacturerController,
        decoration: const InputDecoration(
          icon: Icon(Icons.store),
          hintText: 'Manufacturer',
          labelText: 'Manufacturer',
        ),
      ),
      InputDecorator(
        decoration: const InputDecoration(
          prefixIcon: Icon(Icons.style),
          hintText: 'Item Category',
          //labelText: 'Item Category',
          border: InputBorder.none,
        ),
        child: Autocomplete(
          optionsBuilder: (TextEditingValue textEditingValue) {
            if (textEditingValue.text == '') {
              return const Iterable.empty();
            }
            return itemTypeList.where((String option) {
              return option
                  .contains(textEditingValue.text.toLowerCase());
            });
          },
          onSelected: (String selection) {
            debugPrint('You just selected $selection');
          },
        ),

Ravindra S. Patil · Answer

Try below code in your code you have set Textfield widget icon and AutoComplete widget prefixIcon. Refer InputDecoration

Column(
  children: [
    TextFormField(
      controller: manufacturerController,
      decoration: const InputDecoration(
        icon: Icon(Icons.store),//with icon
        // prefixIcon: Icon(Icons.store), //with prefixIcon
        hintText: 'Manufacturer',
        labelText: 'Manufacturer',
      ),
    ),
    InputDecorator(
      decoration: const InputDecoration(
        icon: Icon(Icons.style),//with icon
        //prefixIcon: Icon(Icons.style), //with prefixIcon
        hintText: 'Item Category',
        //labelText: 'Item Category',
        border: InputBorder.none,
      ),
      child: Autocomplete(
        optionsBuilder: (TextEditingValue textEditingValue) {
          if (textEditingValue.text == '') {
            return const Iterable.empty();
          }
          return itemTypeList.where((String option) {
            return option.contains(textEditingValue.text.toLowerCase());
          });
        },
        onSelected: (String selection) {
          debugPrint('You just selected $selection');
        },
      ),
    ),
  ],
),

Result Screen With icon->

Result Screen With prefixIcon->

Style Flutter Autocomplete match TextFormField widget visually?

1 Answers