title: Flutter create custom search UI extends SearchDelegate
body: <p>I have a fully tested Search class which extends <strong>SearchDelegate</strong>, it always shows the <code>Searchbar</code> within the <code>appbar</code> as <em>material design</em>.</p>
  
  <p><a href="https://i.stack.imgur.com/vGqRA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vGqRA.png" alt="main Search delegate UI"></a></p>
  
  <p><strong>But I want it to be like this one below</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/uBKaq.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uBKaq.gif" alt="enter image description here"></a></p>
  
  <p><strong>How can I change the UI of the <code>Searchbar</code>? without leaving the <code>SearchDelegate</code> methods like</strong> </p>
  
  <p>-buildActions</p>
  
  <p>-buildLeading</p>
  
  <p>-buildResults ... etc</p>