-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Big white space between search bar and list of words #4
Comments
This is one of the approach to reduce the space. Firstly, the space is created due to the height of Container inside Before: class HeaderWithSearchBox extends StatelessWidget {
const HeaderWithSearchBox({
Key key,
@required this.size,
}) : super(key: key);
final Size size;
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(bottom: 20.0 * 2.5),
height: size.height * 0.2, Therefore, we reduce the height to 0.12 * size.height. At the same time, remove the margin bottom. class HeaderWithSearchBox extends StatelessWidget {
const HeaderWithSearchBox({
Key key,
@required this.size,
}) : super(key: key);
final Size size;
@override
Widget build(BuildContext context) {
return Container(
height: size.height * 0.12, However, this fix will lead to big corruption in search bar(search bar moving upward near appbar). In order to fix this, we replace Before, Widget build(BuildContext context) {
return Container(
height: size.height * 0.12,
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(
left: 20.0,
right: 20.0,
bottom: 56,
),
height: size.height * 0.2 - 100,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(36),
bottomRight: Radius.circular(36),
),
),
),
Positioned(
bottom: 70,
left: 0,
right: 0, After, Widget build(BuildContext context) {
return Container(
height: size.height * 0.12,
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(
left: 20.0,
right: 20.0,
bottom: 56,
),
height: size.height * 0.2 - 100,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(36),
bottomRight: Radius.circular(36),
),
),
),
Positioned(
top: 45,
left: 0,
right: 0, |
iPhone 6s Plus seems not to work very well with this approach |
Neither does this Samsung phone. |
Here is the suggestion for making pinned search bar when scrolling and also fixing the blank space: lib/home/home_page.dart>HomeScreen>Scaffold>CustomScrollView SliverPersistentHeader(
pinned: true,
delegate: PersistentHeader(
widget: HeaderWithSearchBox(size: size),
),
),
SliverList(
delegate: SliverChildListDelegate(
[
Column(
children: <Widget>[
Word(),
],
),
],
),
), lib/home/�components/header_with_searchbox.dart class HeaderWithSearchBox extends StatelessWidget {
const HeaderWithSearchBox({
Key key,
@required this.size,
}) : super(key: key);
final Size size;
@override
Widget build(BuildContext context) {
return Container(
height: size.height * 0.12,
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(
left: 20.0,
right: 20.0,
bottom: 56,
),
/*
height: size.height * 0.2 - 100,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(36),
bottomRight: Radius.circular(36),
),
),
*/
),
/* ........................... */
class PersistentHeader extends SliverPersistentHeaderDelegate {
final Widget widget;
PersistentHeader({this.widget});
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return Container(
width: double.infinity,
height: 105.0,
child: Card(
margin: EdgeInsets.all(0),
color: Colors.white,
elevation: 0,
child: Center(child: widget),
),
);
}
@override
double get maxExtent => 105.0;
@override
double get minExtent => 105.0;
@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
return true;
}
} |
The text was updated successfully, but these errors were encountered: