'How to change color of my search suggestions and add padding to leading and actions of my searchdelegate in Flutter

I am making a search bar on my appbar, and for that I want to edit my search widget. I want to add paddings, so it just look like previous screen. Then, I want to color my search app bar and it's suggestions. Please, look at the pictures for better understanding -

The appbar without search opened -

...

After I search -

enter image description here

I want to color it in purple and black and want padding equal to the icons before.

The search button on app bar has this function -

InkWell(
              onTap: () {
                showSearch(
                    context: context,
                    delegate: MySearchDelegate(),
                );
              },
              child: SvgPicture.asset('assets/icons/search_icon.svg'),
            ),

Here is my searchDelegate class -

import 'package:flutter/material.dart';

class MySearchDelegate extends SearchDelegate {

  List<String> searchResults = [
    'Question 1',
    'Question 2',
    'Question 3',
    'Question 4',
    'Question 5'
  ];

  @override
  Widget? buildLeading(BuildContext context) => InkWell(
        onTap: () {},
        child: Icon(
          Icons.search,
          color: Colors.white,
        ),
      );

  @override
  List<Widget>? buildActions(BuildContext context) => [
        InkWell(
          onTap: () {
            if(query.isEmpty) {
              close(context, null);
            }
            else {
              query='';
            }
          },
          child: Icon(
            Icons.clear,
            color: Colors.white,
          ),
        ),
      ];

  @override
  Widget buildResults(BuildContext context) {
    return Center(
      child: Text(
        query,
        style: TextStyle(
          color: Colors.white,
        ),
      ),
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    List<String> suggestions = searchResults.where((searchResult) {
      final result = searchResult.toString().toLowerCase();
      final input = query.toLowerCase();

      return result.contains(input);
    }).toList();

    return ListView.builder(
      itemCount: suggestions.length,
      itemBuilder: (context, index) {
        final suggestion = suggestions[index];

        return ListTile(
          focusColor: Colors.white,
          title: Text(
            suggestion,
          ),
          onTap: () {
            query=suggestion;
            showResults(context);
          },
        );
      },
    );
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source