[英]Flutter: search bar overflowed by 38 pixels on the bottom
我正在使用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),
onPressed: null
),
],
leading: IconButton(
icon: Icon(Icons.logout)
onPressed: null
),
),
body: Center(CircularProgressIndicator())
),
);
}
当前应用的 state 截图:
从flappy_search_bar
源文件中可以看出, height
参数是一个硬编码值,等于 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)
)
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.