Flutter: Is there a way to change SearchDelegate search bar height in flutter

Question

I am doing an app in flutter and in my whole app i use a custom AppBar (My project AppBar) with a custom height, but i need to create a search function in it, i am using the SearchDelegate that already has a customizable SearchBar (Flutter SearchBar) but i can't find a way to customize it's height without changing the flutter code for it.

here is my code for the SearchDelegate.

class ProjectSearch extends SearchDelegate {
  @override
  get searchFieldStyle => TextStyle();

  @override
  get searchFieldLabel => 'Pesquisar';

  @override
  List buildActions(BuildContext context) {
    return [
      IconButton(
        icon: Icon(
          Icons.clear,
          size: 24.h,
        ), 
        onPressed: () {
          query = '';
        }
      ),
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: AnimatedIcon(
        icon: AnimatedIcons.menu_arrow,
        progress: transitionAnimation,
      ),
      onPressed: () {
        close(context, null);
      }
    );
  }

  @override
  // ignore: missing_return
  Widget buildResults(BuildContext context) {
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return FutureBuilder(
      future: ProjectsRepository().fetchAllProjects(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        List projects = List();
        if (snapshot.hasData) {
          projects = snapshot.data;
        } else {
          return Center(
            child:CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation(Theme.of(context).colorScheme.secondary),
            )
          );
        }

        projects = projects.where((p) => p.name.toLowerCase().startsWith(query.toLowerCase())).toList();

        return ListView.builder(
          itemBuilder: (context, index) => ListTile(
            leading: Icon(Icons.location_city_outlined),
            title: RichText(
              text: TextSpan(
                text: projects[index].name.substring(0, query.length),
                style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.bold
                ),
                children: [
                  TextSpan(
                    text: projects[index].name.substring(query.length),
                    style: TextStyle(
                      color: Colors.grey,
                    )
                  )
                ]
              )
            ),
            onTap: () async {
              
            },
          ),
          itemCount: projects.length,
        );
      
      });
  }
}

user_1752620 · Answer

You can do it by overriding the appBarTheme method of the SearchDelegate class:

  @override
  ThemeData appBarTheme(BuildContext context) {
    final theme = Theme.of(context);
    return theme.copyWith(
      appBarTheme: theme.appBarTheme.copyWith(toolbarHeight: YOUR_HEIGHT),
    );
  }

Or if you want to define this height once for all your app, you can provide a ThemeData to the MaterialApp constructor. E.g.

MaterialApp(
  ...
  theme: ThemeData(
    ...
    appBarTheme: const AppBarTheme(
      toolbarHeight: kToolbarHeight + 16,
    ),
  ),
);

Flutter: Is there a way to change SearchDelegate search bar height in flutter

1 Answers