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:

1. Cant get hint text to show up

2. 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<String>(
             optionsBuilder: (TextEditingValue textEditingValue) {
               if (textEditingValue.text == '') {
                 return const Iterable<String>.empty();
               }
               return itemTypeList.where((String option) {
                 return option
                     .contains(textEditingValue.text.toLowerCase());
               });
             },
             onSelected: (String selection) {
               debugPrint('You just selected $selection');
             },
           ),
   

Answer 1

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<String>(
        optionsBuilder: (TextEditingValue textEditingValue) {
          if (textEditingValue.text == '') {
            return const Iterable<String>.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->