Flutter：搜索栏底部溢出 38 个像素

问题描述

我正在使用 flappy_search_bar 实现一个 SearchBar，我想从底部缩小它以适合 appBar，因为目前我收到一个错误（也见下面的截图）：

A RenderFlex overflowed by 38 pixels on the bottom.

我尝试用各种小部件包装它，但它什么也没产生。我怎样才能使 SearchBar 更薄，以便它很好地适合 appBar？

我的代码：

import 'package:flappy_search_bar/search_bar_style.dart';
import 'package:flappy_search_bar/flappy_search_bar.dart';
import 'package:Flutter/material.dart';

class Post {
  final String title;
  final String description;

  Post(this.title,this.description);
}

Future<List<Post>> search(String search) async {
  await Future.delayed(Duration(seconds: 2));
  return List.generate(search.length,(int index) {
    return Post(
      "Title : $search $index","Description :$search $index",);
  });
}

@override
Widget build(BuildContext context) {
  return Material(
    child: Scaffold(
    resizetoAvoidBottomInset: true,resizetoAvoidBottomPadding: false,backgroundColor: Colors.transparent,appBar: AppBar(
        elevation: 0.0,backgroundColor: Colors.lightGreen[800],actions: <Widget>[
         Expanded(
           child: Padding(
           padding: const EdgeInsets.only(
             left: 50,right: 5,bottom: 10,top: 4,),child: SearchBar<Post>(
             searchBarStyle: SearchBarStyle(
               backgroundColor: Colors.white60,borderRadius: BorderRadius.circular(30),onSearch: search,onItemFound: (Post post,int index) {
               return ListTile(
                 title: Text(post.title),subtitle: Text(post.description),);
               },IconButton(
            icon: Icon(Icons.shopping_cart_outlined),onpressed: null
          ),IconButton(
            icon: Icon(Icons.favorite),],leading: IconButton(
           icon: Icon(Icons.logout)
            onpressed: null
        ),body: Center(CircularProgressIndicator())
    ),);
}

当前应用状态的屏幕截图：

解决方法

从 flappy_search_bar 源文件中可以看出，height 参数是一个 hard-coded value，等于 80。

因此，我们可以修改 AppBar 的高度来解决问题：

class CustomAppBar extends PreferredSize {
  CustomAppBar({Key key,Widget title,List<Widget> actions}) : super(
    key: key,preferredSize: Size.fromHeight(90),child: AppBar(
      title: title,elevation: 0.0,backgroundColor: Colors.lightGreen[800],actions: actions,),);
}

并在我们的代码中使用它：

@override
Widget build(BuildContext context) {
  return Material(
    child: Scaffold(
       resizeToAvoidBottomInset: true,resizeToAvoidBottomPadding: false,backgroundColor: Colors.transparent,appBar: CustomAppBar(actions: _appBarActions)
     )
  );
}